Draw a curve on the map

[SHELEPOV]

Hi all!
In our project, we need to draw a curves on the map. Moreover, a dotted curves.
I've attached a cut of the design, so you can see what I want.

How can I do that ?
I've tried to inherit from MapLine, but that class is not inherit-friendly, almost sealed. So I failed

[Petar Mladenov]

Hi Shelepov,

To achieve the best possible performance, I encourage you to use the Map Visualization Layer (VL). You can find its overview help article here. In VL you can directly add FrameworkElements, in your case you can add Path. Or you can add Map Shape Data objects - they can be added in a background thread because they are not visual objects. The Map process these shape objects and creates the visual objects internally. For more info please check out the following help article:

Visualization Layer Map Shape Data

So the short answer in your scenario is that you can use VisLayer with Path or PathData to draw a curves.
Path has Stroke, StrokeThickness, StrokeDashArray properties. WHen using PathData you can take advantage from its ShapeFill property - it has Fill, StrokeThickness, StrokeDashArray properties.

Regards,
Petar Mladenov
Telerik

 

 

[SHELEPOV]

The problem is to connect two geo-points with curve. It's not hard to draw a curve as frameworkelement, but hard to place its ends to the geo-points. How to do that ?

[Petar Mladenov]

Hello Anton,

You can take a look at our Time Bar - Special Slots Demo. The business object FlightPath keeps two Location objects. The RadMap has InformationLayer with MapPath object in it:

<telerik:InformationLayer x:Name="informationLayer" SizeChanged="MapInformationLayer_SizeChanged">
                      <telerik:MapPath Data="{Binding FlightPath, Converter={StaticResource locationsToPathDataConverter}}" Stroke="Red" StrokeThickness="1" />
                  </telerik:InformationLayer>

The data of the MapPath represents a curve with 3 points, start, end and middle control point which construct a QadraticbezierSegment. The code for building such segment is in the Converter:

public class LocationsToPathDataConverter : IValueConverter
   {
       public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
       {
           FlightPath flightPath = value as FlightPath;

           MapPathGeometry pathGeometry = new MapPathGeometry();

           var mapPathFigure = new MapPathFigure() { StartPoint = flightPath.DepartureLocation, IsClosed = false };

           Location controlPoint = new Location();
           controlPoint.Longitude = (flightPath.DepartureLocation.Longitude + flightPath.ArrivalLocation.Longitude) / 2;
           controlPoint.Latitude = Math.Max(flightPath.DepartureLocation.Latitude, flightPath.ArrivalLocation.Latitude) + Math.Abs(flightPath.DepartureLocation.Longitude - flightPath.ArrivalLocation.Longitude) / 8;

           mapPathFigure.Segments.Add(new MapQuadraticBezierSegment() { Point1 = controlPoint, Point2 = flightPath.ArrivalLocation });

           pathGeometry.Figures.Add(mapPathFigure);

           return pathGeometry;
       }

       public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
       {
           throw new NotImplementedException(

In Visualization Layer you can use PathData object instead of Information Layer and MapPath.

We hope the suggested approach will fit well in your scenario.

Regards,
Petar Mladenov
Telerik

 

 

[Petar Mladenov]

Hello Anton,

This is just a quick follow up.

We want to suggest another solution that uses Visualization Layer (VL) and BindableWrappers - MapPathView, MapRectangleView, MapPolylineView, MapPathFigureView, etc. You can either use these elements in DataTemplate (as it is done in the attached project) or use them directly in the VL:

<telerik:MapPathView   >
                  <telerik:MapPathView.ShapeFill>
                      <telerik:MapShapeFill Stroke="Blue" StrokeDashArray="2" StrokeThickness="4"/>
                  </telerik:MapPathView.ShapeFill>

                  <telerik:MapPathView.Data>
                      <telerik:MapPathGeometryView>
                          <telerik:MapPathGeometryView.Figures>
                              <telerik:MapPathFigureView IsClosed="False" StartPoint="..." >
                                  <telerik:MapPathFigureView.Segments>
                                      <telerik:MapQuadraticBezierSegmentView Point2="..." Point1="...."  />
                                  </telerik:MapPathFigureView.Segments>
                              </telerik:MapPathFigureView>
                          </telerik:MapPathGeometryView.Figures>
                      </telerik:MapPathGeometryView>
                  </telerik:MapPathView.Data>
              </telerik:MapPathView>

Regards,
Petar Mladenov
Telerik