Telerik blogs

RadMap provides a rich set of geocoordinate-enabled shapes that can be defined and displayed onto the map surface .There are scenarios, however, where you would like to do more than just position a shape onto the map. This blogpost will demonstrate how to manipulate each individual segment of line/polyline/polygon shape based on mouse input from the user. For example we will select (highlight) a point, and drag the selected object to another location on the map – modifying in this way the shape or the line segment.
First of all we’ll need two Information layers – one for the polyline and the other one for the points that we will use for the shape manipulation. We will disable the default pan / drag actions of the Map as we will attach our own mouse events on the pinpoints only:

  1. <telerik:RadMap x:Name="radMap"
  2.                      InitializeCompleted="radMap_InitializeCompleted"
  3.                      Center="40,-100"
  4.                      MouseClickMode="None"
  5.                      MouseDragMode="None"
  6.                      MouseDoubleClickMode="None"
  7.                      ZoomLevel="4">
  8.          <telerik:RadMap.Provider>
  9.              <telerik:OpenStreetMapProvider />
  10.          </telerik:RadMap.Provider>
  11.          <telerik:InformationLayer x:Name="polylineLayer" />
  12.          <telerik:InformationLayer x:Name="pointLayer" />
  13.      </telerik:RadMap>

Now we will create a sample polyline and add it to the first information layer. Note that it is better to do this after the map provider has been initialized in order to prevent your items from appearing in the upper left corner before the map is initialized and loaded:

  1. private bool initialized;
  2.         private bool isDragging;
  3.  
  4.         private void radMap_InitializeCompleted(object sender, EventArgs e)
  5.         {
  6.             if (!initialized)
  7.             {
  8.                 initialized = true;
  9.  
  10.                 this.BuildPolyline();
  11.             }
  12.         }
  13.  
  14.         private void BuildPolyline()
  15.         {
  16.             LocationCollection points = new LocationCollection();
  17.             points.Add(new Location(40, -100));
  18.             points.Add(new Location(41, -101));
  19.             points.Add(new Location(40, -102));
  20.             points.Add(new Location(43, -103));
  21.             points.Add(new Location(45, -97));
  22.  
  23.             MapPolyline polyline = new MapPolyline();
  24.             polyline.Points = points;
  25.  
  26.             this.polylineLayer.Items.Add(polyline);
  27.         }

And now to the essential part of our scenario – the pinpoints. Add a MapPinPoint instance for each vertex of the original polyline shape you are displaying. This is easy since the polyline itself was created from a set of predefined locations. To be able to modify the shape of our polyline on dragging the pinpoints we’ll attach the following three mouse events:

- MouseLeftButtonDown – used to capture the mouse and to enable dragging

- MouseLeftButtonUp – releases mouse capture and disables dragging

- MouseMove – gets the coordinates of the clicked pinpoint relative to the map control screen coordinates. Then redraw the polyline respecting the new location of its vertex. Both actions are easily achieved via the static SetLocation() and GetLocation() methods of the MapLayer helper class:

  1. private void pinPoint_MouseMove(object sender, MouseEventArgs e)
  2.       {
  3.           if (!this.isDragging)
  4.               return;
  5.  
  6.           var pinPoint = sender as MapPinPoint;
  7.           var oldLocation = MapLayer.GetLocation(pinPoint);
  8.           var location = Location.GetCoordinates(radMap, e.GetPosition(radMap));
  9.           MapLayer.SetLocation(sender as DependencyObject, location);
  10.  
  11.           var polyline = this.polylineLayer.Items[0] as MapPolyline;
  12.           for (int i = 0; i < polyline.Points.Count; i++)
  13.           {
  14.               var locationPoint = polyline.Points[i];
  15.               if (locationPoint == oldLocation)
  16.               {
  17.                   polyline.Points[i] = location;
  18.                   break;
  19.               }
  20.           }
  21.       }

The full source code for the sample can be downloaded from here !


You can see the result below:


About the Author

Manol Donev

Technical Lead,
WinCore Team

Comments

Comments are disabled in preview mode.