This is a migrated thread and some comments may be shown as answers.

Draw a curve on the map

4 Answers 270 Views
Map
This is a migrated thread and some comments may be shown as answers.
SHELEPOV
Top achievements
Rank 1
SHELEPOV asked on 19 Nov 2014, 11:25 AM
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

4 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 21 Nov 2014, 09:15 AM
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.

 
0
SHELEPOV
Top achievements
Rank 1
answered on 01 Dec 2014, 09:28 AM
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 ?
0
Accepted
Petar Mladenov
Telerik team
answered on 01 Dec 2014, 04:18 PM
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.

 
0
Petar Mladenov
Telerik team
answered on 03 Dec 2014, 11:20 AM
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.

 
Tags
Map
Asked by
SHELEPOV
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
SHELEPOV
Top achievements
Rank 1
Share this question
or