RadMap - Edit plotted route

[Kok Hooi]

Hi guys,
After plotting the route on the RadMap, how can I easily edit the route by simply dragging one of the points in the plotted route? Attached is the sample from Bing Map where user can modified the route by dragging it.

Thanks

Regards
KokHooi

[Pavel R. Pavlov]

Hi KokHooi,

As I already mentioned this is not supported out of the box. This is why you will need to implement custom drag and drop logic. You can start with hooking the events of the DragDropManager to the visual that is created based on the PolylineData that you add to the layer of the RadMap. You can start with the following code.

However, it is important to keep in mind that the provided code serves for demonstration purposes ana you will need to extend it to fit your scenario.

private void Provider_RoutingCompleted(object sender, RoutingCompletedEventArgs e)
{
  this.findRouteButton.IsEnabled = true;

  var routeResponse = e.Response as RouteResponse;
  if (routeResponse != null && routeResponse.Error == null &&
      routeResponse.Result != null && routeResponse.Result.RoutePath != null)
  {
    this.routeLine = new PolylineData()
    {
      Points = routeResponse.Result.RoutePath.Points,
      ShapeFill = new MapShapeFill()
      {
        Stroke = this.GetBrushFromCombo(),
        StrokeThickness = 2
      }
    };
    this.routeLayer.Items.Add(this.routeLine);

    Dispatcher.Invoke(() =>
        {
            var routeVisual = this.routeLayer.GetContainerFromItem(this.routeLine);
            DragDropManager.SetAllowDrag(routeVisual, true);
            DragDropManager.AddDragInitializeHandler(routeVisual, new DragInitializeEventHandler(OnRouteDrag));
            DragDropManager.AddDragDropCompletedHandler(routeVisual, new DragDropCompletedEventHandler(OnRouteDrop));
        }
   );

  }
  else
  {
    this.ErrorSummary.Visibility = Visibility.Visible;
  }
}

private void OnRouteDrop(object sender, DragDropCompletedEventArgs e)
{
    ;
    Location mouse = Location.GetCoordinates(this.RadMap1, Mouse.GetPosition(this.RadMap1));
    //Add the mouse point and recalculate the new route
}

private void OnRouteDrag(object sender, DragInitializeEventArgs e)
{
    ;
    //update the visual feedback to the user
}

I hope this can get you started.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Kok Hooi]

Hi Pavel,
Thanks for the sample. Based on the attached sample, how can I know that the starting drag point is in between waypoint 1 and waypoint 2? Using the LocationRect to calculate the distance is not so accurate since the calculation is not based on the plotted route. Any way that I can calculate the distance based on the plotted route?

Thanks

Regards
KokHooi

[Pavel R. Pavlov]

Hello KokHooi,

You can get the distance of a route through the RouteResponse class. It exposes detailed information about the route, including its distance. You can get the distance through RouteResponse.Result.Summary.Distance property. 

Please give this approach a try and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Kok Hooi]

Hi Pavel,
I think you get my question wrong. For eg, I've plotted 3 points...Point A, Point B and Point C and get the route plotted on the map. Now I try to drag out a new point from the plotted route, I call it Point D in between Point A and Point B. So now when I call the RouteRequest, I supposed to pass in such an order --> Point A -> Point D -> Point B -> Point C into RouteRequest.Waypoints so that I could get the correct route linking all those points. So my question now is whenever I drag out a new point, how do I determine the newly dragged out point is in between which existing waypoints. Otherwise I'd have pass in Point A -> Point B -> Point C -> Point D which would give me the wrong route calculation.

Thanks

Regards
KokHooi

[Pavel R. Pavlov]

Hi KokHooi,

It is up to you to decide exactly how that should be implemented.

You can get all the points of the calculated route (routeResponse.Result.RoutePath.Points), you have the points that your users created (routePoints) and you have the point where the drag is initialized. Based on this information you will be able to determine where the additional point is.

For example when you get the point of the drag you can traverse all points of the already generated route and compare the coordinates of the drag point to each one of the route plus some small delta. Once you find a point you will know its index. Also, you can get the indices of the user points and based on that you will find out where is the drag point.

I hope this information is helpful.

Regards,
Pavel R. Pavlov
Telerik