Draw a curve on the map

5 posts, 1 answers
  1. SHELEPOV
    SHELEPOV avatar
    4 posts
    Member since:
    Jul 2014

    Posted 19 Nov 2014 Link to this post

    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
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 21 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. SHELEPOV
    SHELEPOV avatar
    4 posts
    Member since:
    Jul 2014

    Posted 01 Dec 2014 in reply to Petar Mladenov Link to this post

    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 ?
  5. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 01 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 03 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready