MapPolyline with selecteable segments

[Simon Störmer]

Hi,

I want to add a polyline to a map that connects a list of locations. No problem with that. But I want each line segment to be selectable and I want to be able to drag the line endings around to change the position of the segments point. Besides that, I want the polyline to be selectable as a whole as well: when I select one segment, this one should be selected as well as the whole polyline. The whole polyline should be displayed with a red border when selected.

Are there any ideas how this can be acomplished?

Thanks for any help!

Greeting,

Tobias Richling.

[Andrey]

Hello Tobias Richling,

You can use the MapLines to do visual effect for selecting segment of polyline. I would recommend using additional information layer over layer of polygons for them on the map.
The map lines should be built over each segment of polyline. They can use the transparent color as the Stroke property value to allow handling of mouse events. You can use the Tag property of map line to reference the parent polygon.
The sample code is below.

<UserControl x:Class="SelectableSegments.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <Style x:Key="defaultLineStyle" TargetType="telerik:MapShape">

            <Setter Property="StrokeThickness" Value="3" />

            <Setter Property="Stroke" Value="Transparent" />

        </Style>

        <Style x:Key="selectedLineStyle" TargetType="telerik:MapShape">

            <Setter Property="StrokeThickness" Value="3" />

            <Setter Property="Stroke" Value="Green" />

        </Style>

        <Style x:Key="defaultPolylineStyle" TargetType="telerik:MapShape">

            <Setter Property="StrokeThickness" Value="3" />

            <Setter Property="Stroke" Value="Blue" />

        </Style>

        <Style x:Key="selectedPolylineStyle" TargetType="telerik:MapShape">

            <Setter Property="StrokeThickness" Value="3" />

            <Setter Property="Stroke" Value="Red" />

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <telerik:RadMap x:Name="radMap"

                        InitializeCompleted="radMap_InitializeCompleted"

                        Center="40,-100"

                        ZoomLevel="4">

            <telerik:RadMap.Provider>

                <telerik:OpenStreetMapProvider />

            </telerik:RadMap.Provider>


            <telerik:InformationLayer x:Name="polylineLayer" />

            <telerik:InformationLayer x:Name="lineLayer" />


        </telerik:RadMap>

    </Grid>

</UserControl>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using Telerik.Windows.Controls.Map;

namespace SelectableSegments
{
    public partial class MainPage : UserControl
    {
        private bool initialized;

        // selected segment and polyline
        private MapLine selectedLine;
        private MapPolyline selectedPolyline;

        public MainPage()
        {
            InitializeComponent();
        }

        private void radMap_InitializeCompleted(object sender, EventArgs e)
        {
            if (!initialized)
            {
                initialized = true;

                this.BiuldPolyline();
            }
        }

        private void BiuldPolyline()
        {
            LocationCollection points = new LocationCollection();
            points.Add(new Location(40, -100));
            points.Add(new Location(41, -101));
            points.Add(new Location(40, -102));
            points.Add(new Location(43, -103));
            points.Add(new Location(45, -97));

            MapPolyline polyline = new MapPolyline();
            polyline.Points = points;
            this.SetDefaultStyle(polyline);

            this.polylineLayer.Items.Add(polyline);
            this.BuildLines(polyline);
        }

        /// <summary>
        /// Adds lines over each segment of polyline.
        /// </summary>
        private void BuildLines(MapPolyline polyline)
        {
            for (int i = 0; i < polyline.Points.Count - 1; i++)
            {
                Location point1 = polyline.Points[i];
                Location point2 = polyline.Points[i + 1];
                MapLine line = new MapLine()
                {
                    Point1 = point1,
                    Point2 = point2
                };

                this.SetDefaultStyle(line);

                line.MouseLeftButtonDown += new MouseButtonEventHandler(line_MouseLeftButtonDown);
                line.Tag = polyline;

                this.lineLayer.Items.Add(line);
            }
        }

        private void line_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            MapLine line = sender as MapLine;
            if (line != null)
            {
                if (this.selectedLine != null)
                {
                    this.SetDefaultStyle(this.selectedLine);
                }

                if (this.selectedPolyline != null)
                {
                    this.SetDefaultStyle(this.selectedPolyline);
                }

                this.selectedLine = line;
                this.selectedPolyline = line.Tag as MapPolyline;

                this.SetSelectedStyle(this.selectedLine);
                this.SetSelectedStyle(this.selectedPolyline);
            }
        }

        private void SetDefaultStyle(MapShape shape)
        {
            if (shape is MapLine)
            {
                shape.Style = this.Resources["defaultLineStyle"] as Style;
            }
            else
            {
                shape.Style = this.Resources["defaultPolylineStyle"] as Style;
            }
        }

        private void SetSelectedStyle(MapShape shape)
        {
            if (shape is MapLine)
            {
                shape.Style = this.Resources["selectedLineStyle"] as Style;
            }
            else
            {
                shape.Style = this.Resources["selectedPolylineStyle"] as Style;
            }
        }
    }
}

I think you can use an approach like the one above for building points over vertexes of polyline. You can handle mouse events of them for dragging the point with its related vertex of polyline.

All the best,
Andrey Murzov
the Telerik team

[Simon Störmer]

Hi Andrey,

thanks for your reply. Your example works well. What I would like better would be to be able to encapsulate the functionality in a control similar to MapPolyline. I will have lots of those kinds of elements, the concrete number will only be known at runtime according to the user action. The user can add such elements by dragging items from a grid.

I would like to have a layer that holds a list of according objects as its ItemsSource and then give this layer a item template that uses the control to be created as the data template for my objects.

Can you point me to the right direction, what class of yours I could use as a base class / starting point for my control?

Thank you,

Tobias Richling.

[Andrey]

Hi Tobias Richling,

I think you can just use the template selector to show the shape on the map according to type of item in the grid. I have attached a sample solution which demonstrates using of template selector for drag and drop.

All the best,
Andrey Murzov
the Telerik team