Class MapPolylineLayer

A sublayer which renders group of MapPolyline on MapShapeLayer and MapTileLayer

Inheritance

System.Object

MapPolylineLayer

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public class MapPolylineLayer : MapSublayer

Examples

XAML
C#

   <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapShapeLayer ShapesSource = "https://cdn.syncfusion.com/maps/map-data/india.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapPolylineLayer>
                        <map:MapPolylineLayer.Polylines>
                            <map:MapPolyline StrokeThickness = "4">
                                <map:MapPolyline.Points>
                                       <map:MapLatLng Latitude="13.0827"
                                                      Longitude="80.2707" />
                                       <map:MapLatLng Latitude="13.1746"
                                                      Longitude="79.6117" />
                                       <map:MapLatLng Latitude="13.6373"
                                                      Longitude="79.5037" />
                                       <map:MapLatLng Latitude="14.4673"
                                                      Longitude="78.8242" />
                                       <map:MapLatLng Latitude="14.9091"
                                                      Longitude="78.0092" />
                                       <map:MapLatLng Latitude="16.2160"
                                                      Longitude="77.3566" />
                                       <map:MapLatLng Latitude="17.1557"
                                                      Longitude="76.8697" />
                                       <map:MapLatLng Latitude="18.0975"
                                                      Longitude="75.4249" />
                                       <map:MapLatLng Latitude="18.5204"
                                                      Longitude="73.8567" />
                                       <map:MapLatLng Latitude="19.0760"
                                                      Longitude="72.8777"  />
                                </map:MapPolyline.Points>  
                                <map:MapPolyline.StrokeDashArray>
                                     <DoubleCollection>
                                         <x:Double>2</x:Double>
                                         <x:Double>2</x:Double>
                                         <x:Double>0.1</x:Double>
                                         <x:Double>2</x:Double>
                                   </DoubleCollection>
                               </map:MapPolyline.StrokeDashArray>
                          </map:MapPolyline>
                      </map:MapPolylineLayer.Polylines>
               </map:MapPolylineLayer>
           </map:MapShapeLayer.Sublayers>
        </map:MapShapeLayer>
    </map:SfMaps.Layer>
   </map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
MapPolylineLayer mapPolylineLayer = new MapPolylineLayer();
MapPolyline polyline = new MapPolyline();
polyline.Points = new ObservableCollection<MapLatLng>()
{
   new MapLatLng(13.0827, 80.2707),
   new MapLatLng(13.1746, 79.6117),
   new MapLatLng(13.6373, 79.5037),
   new MapLatLng(14.4673, 78.8242),
   new MapLatLng(14.9091, 78.0092),
   new MapLatLng(16.2160, 77.3566),
   new MapLatLng(17.1557, 76.8697),
   new MapLatLng(18.0975, 75.4249),
   new MapLatLng(18.5204, 73.8567),
   new MapLatLng(19.0760, 72.8777)
};
polyline.StrokeThickness = 4;
polyline.StrokeLineCap = LineCap.Round;
polyline.Stroke = Brush.Blue;
polyline.StrokeDashArray = new double[] { 2, 2, 0.1, 2 };
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;

Constructors

MapPolylineLayer()

Initializes a new instance of the MapPolylineLayer class.

Declaration

public MapPolylineLayer()

   <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapShapeLayer ShapesSource = "https://cdn.syncfusion.com/maps/map-data/india.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapPolylineLayer>
                        <map:MapPolylineLayer.Polylines>
                            <map:MapPolyline StrokeThickness = "4">
                                <map:MapPolyline.Points>
                                       <map:MapLatLng Latitude="13.0827"
                                                      Longitude="80.2707" />
                                       <map:MapLatLng Latitude="13.1746"
                                                      Longitude="79.6117" />
                                       <map:MapLatLng Latitude="13.6373"
                                                      Longitude="79.5037" />
                                       <map:MapLatLng Latitude="14.4673"
                                                      Longitude="78.8242" />
                                       <map:MapLatLng Latitude="14.9091"
                                                      Longitude="78.0092" />
                                       <map:MapLatLng Latitude="16.2160"
                                                      Longitude="77.3566" />
                                       <map:MapLatLng Latitude="17.1557"
                                                      Longitude="76.8697" />
                                       <map:MapLatLng Latitude="18.0975"
                                                      Longitude="75.4249" />
                                       <map:MapLatLng Latitude="18.5204"
                                                      Longitude="73.8567" />
                                       <map:MapLatLng Latitude="19.0760"
                                                      Longitude="72.8777"  />
                                </map:MapPolyline.Points>  
                                <map:MapPolyline.StrokeDashArray>
                                     <DoubleCollection>
                                         <x:Double>2</x:Double>
                                         <x:Double>2</x:Double>
                                         <x:Double>0.1</x:Double>
                                         <x:Double>2</x:Double>
                                   </DoubleCollection>
                               </map:MapPolyline.StrokeDashArray>
                          </map:MapPolyline>
                      </map:MapPolylineLayer.Polylines>
               </map:MapPolylineLayer>
           </map:MapShapeLayer.Sublayers>
        </map:MapShapeLayer>
    </map:SfMaps.Layer>
   </map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
MapPolylineLayer mapPolylineLayer = new MapPolylineLayer();
MapPolyline polyline = new MapPolyline();
polyline.Points = new ObservableCollection<MapLatLng>()
{
   new MapLatLng(13.0827, 80.2707),
   new MapLatLng(13.1746, 79.6117),
   new MapLatLng(13.6373, 79.5037),
   new MapLatLng(14.4673, 78.8242),
   new MapLatLng(14.9091, 78.0092),
   new MapLatLng(16.2160, 77.3566),
   new MapLatLng(17.1557, 76.8697),
   new MapLatLng(18.0975, 75.4249),
   new MapLatLng(18.5204, 73.8567),
   new MapLatLng(19.0760, 72.8777)
};
polyline.StrokeThickness = 4;
polyline.StrokeLineCap = LineCap.Round;
polyline.Stroke = Brush.Blue;
polyline.StrokeDashArray = new double[] { 2, 2, 0.1, 2 };
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;

Fields

AnimationDurationProperty

Identifies the AnimationDuration bindable property.

Declaration

public static readonly BindableProperty AnimationDurationProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

AnimationEasingProperty

Identifies the AnimationEasing bindable property.

Declaration

public static readonly BindableProperty AnimationEasingProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

PolylinesProperty

Identifies the Polylines bindable property.

Declaration

public static readonly BindableProperty PolylinesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

Properties

AnimationDuration

Gets or sets a value that specifies the polylines animation duration in milliseconds.

Declaration

public double AnimationDuration { get; set; }

Property Value

Type	Description
System.Double	The default value is `0` milliseconds.

Examples

XAML
C#

   <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapShapeLayer ShapesSource = "https://cdn.syncfusion.com/maps/map-data/india.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapPolylineLayer AnimationEasing="{x:Static Easing.Linear}"
                                          AnimationDuration="5000" >
                        <map:MapPolylineLayer.Polylines>
                            <map:MapPolyline StrokeThickness = "4">
                                <map:MapPolyline.Points>
                                       <map:MapLatLng Latitude="13.0827"
                                                      Longitude="80.2707" />
                                       <map:MapLatLng Latitude="13.1746"
                                                      Longitude="79.6117" />
                                       <map:MapLatLng Latitude="13.6373"
                                                      Longitude="79.5037" />
                                       <map:MapLatLng Latitude="14.4673"
                                                      Longitude="78.8242" />
                                       <map:MapLatLng Latitude="14.9091"
                                                      Longitude="78.0092" />
                                       <map:MapLatLng Latitude="16.2160"
                                                      Longitude="77.3566" />
                                       <map:MapLatLng Latitude="17.1557"
                                                      Longitude="76.8697" />
                                       <map:MapLatLng Latitude="18.0975"
                                                      Longitude="75.4249" />
                                       <map:MapLatLng Latitude="18.5204"
                                                      Longitude="73.8567" />
                                       <map:MapLatLng Latitude="19.0760"
                                                      Longitude="72.8777"  />
                                </map:MapPolyline.Points>  
                                <map:MapPolyline.StrokeDashArray>
                                     <DoubleCollection>
                                         <x:Double>2</x:Double>
                                         <x:Double>2</x:Double>
                                         <x:Double>0.1</x:Double>
                                         <x:Double>2</x:Double>
                                   </DoubleCollection>
                               </map:MapPolyline.StrokeDashArray>
                          </map:MapPolyline>
                      </map:MapPolylineLayer.Polylines>
               </map:MapPolylineLayer>
           </map:MapShapeLayer.Sublayers>
        </map:MapShapeLayer>
    </map:SfMaps.Layer>
   </map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
MapPolylineLayer mapPolylineLayer = new MapPolylineLayer();
mapPolylineLayer.AnimationDuration = 5000;
MapPolyline polyline = new MapPolyline();
polyline.Points = new ObservableCollection<MapLatLng>()
{
   new MapLatLng(13.0827, 80.2707),
   new MapLatLng(13.1746, 79.6117),
   new MapLatLng(13.6373, 79.5037),
   new MapLatLng(14.4673, 78.8242),
   new MapLatLng(14.9091, 78.0092),
   new MapLatLng(16.2160, 77.3566),
   new MapLatLng(17.1557, 76.8697),
   new MapLatLng(18.0975, 75.4249),
   new MapLatLng(18.5204, 73.8567),
   new MapLatLng(19.0760, 72.8777)
};
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;

AnimationEasing

Gets or sets a value that specifies the polylines animation easing effect.

Declaration

public Easing AnimationEasing { get; set; }

Property Value

Type	Description
Microsoft.Maui.Easing	The default value is Microsoft.Maui.Easing.Linear.

Examples

XAML
C#

   <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapShapeLayer ShapesSource = "https://cdn.syncfusion.com/maps/map-data/india.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapPolylineLayer AnimationEasing="{x:Static Easing.Linear}">
                        <map:MapPolylineLayer.Polylines>
                            <map:MapPolyline StrokeThickness = "4">
                                <map:MapPolyline.Points>
                                       <map:MapLatLng Latitude="13.0827"
                                                      Longitude="80.2707" />
                                       <map:MapLatLng Latitude="13.1746"
                                                      Longitude="79.6117" />
                                       <map:MapLatLng Latitude="13.6373"
                                                      Longitude="79.5037" />
                                       <map:MapLatLng Latitude="14.4673"
                                                      Longitude="78.8242" />
                                       <map:MapLatLng Latitude="14.9091"
                                                      Longitude="78.0092" />
                                       <map:MapLatLng Latitude="16.2160"
                                                      Longitude="77.3566" />
                                       <map:MapLatLng Latitude="17.1557"
                                                      Longitude="76.8697" />
                                       <map:MapLatLng Latitude="18.0975"
                                                      Longitude="75.4249" />
                                       <map:MapLatLng Latitude="18.5204"
                                                      Longitude="73.8567" />
                                       <map:MapLatLng Latitude="19.0760"
                                                      Longitude="72.8777"  />
                                </map:MapPolyline.Points>  
                                <map:MapPolyline.StrokeDashArray>
                                     <DoubleCollection>
                                         <x:Double>2</x:Double>
                                         <x:Double>2</x:Double>
                                         <x:Double>0.1</x:Double>
                                         <x:Double>2</x:Double>
                                   </DoubleCollection>
                               </map:MapPolyline.StrokeDashArray>
                          </map:MapPolyline>
                      </map:MapPolylineLayer.Polylines>
               </map:MapPolylineLayer>
           </map:MapShapeLayer.Sublayers>
        </map:MapShapeLayer>
    </map:SfMaps.Layer>
   </map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
MapPolylineLayer mapPolylineLayer = new MapPolylineLayer();
mapPolylineLayer.AnimationEasing = Easing.Linear;
MapPolyline polyline = new MapPolyline();
polyline.Points = new ObservableCollection<MapLatLng>()
{
   new MapLatLng(13.0827, 80.2707),
   new MapLatLng(13.1746, 79.6117),
   new MapLatLng(13.6373, 79.5037),
   new MapLatLng(14.4673, 78.8242),
   new MapLatLng(14.9091, 78.0092),
   new MapLatLng(16.2160, 77.3566),
   new MapLatLng(17.1557, 76.8697),
   new MapLatLng(18.0975, 75.4249),
   new MapLatLng(18.5204, 73.8567),
   new MapLatLng(19.0760, 72.8777)
};
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;

Polylines

Gets or sets the collection of polyline to the map.

Declaration

public ObservableCollection<MapPolyline> Polylines { get; set; }

Property Value

Type	Description
System.Collections.ObjectModel.ObservableCollection<MapPolyline>	The polyline collection. By default, the collection is empty.

Examples

XAML
C#

   <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapShapeLayer ShapesSource = "https://cdn.syncfusion.com/maps/map-data/india.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapPolylineLayer>
                        <map:MapPolylineLayer.Polylines>
                            <map:MapPolyline StrokeThickness = "4">
                                <map:MapPolyline.Points>
                                       <map:MapLatLng Latitude="13.0827"
                                                      Longitude="80.2707" />
                                       <map:MapLatLng Latitude="13.1746"
                                                      Longitude="79.6117" />
                                       <map:MapLatLng Latitude="13.6373"
                                                      Longitude="79.5037" />
                                       <map:MapLatLng Latitude="14.4673"
                                                      Longitude="78.8242" />
                                       <map:MapLatLng Latitude="14.9091"
                                                      Longitude="78.0092" />
                                       <map:MapLatLng Latitude="16.2160"
                                                      Longitude="77.3566" />
                                       <map:MapLatLng Latitude="17.1557"
                                                      Longitude="76.8697" />
                                       <map:MapLatLng Latitude="18.0975"
                                                      Longitude="75.4249" />
                                       <map:MapLatLng Latitude="18.5204"
                                                      Longitude="73.8567" />
                                       <map:MapLatLng Latitude="19.0760"
                                                      Longitude="72.8777"  />
                                </map:MapPolyline.Points>  
                                <map:MapPolyline.StrokeDashArray>
                                     <DoubleCollection>
                                         <x:Double>2</x:Double>
                                         <x:Double>2</x:Double>
                                         <x:Double>0.1</x:Double>
                                         <x:Double>2</x:Double>
                                   </DoubleCollection>
                               </map:MapPolyline.StrokeDashArray>
                          </map:MapPolyline>
                      </map:MapPolylineLayer.Polylines>
               </map:MapPolylineLayer>
           </map:MapShapeLayer.Sublayers>
        </map:MapShapeLayer>
    </map:SfMaps.Layer>
   </map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
MapPolylineLayer mapPolylineLayer = new MapPolylineLayer();
MapPolyline polyline = new MapPolyline();
polyline.Points = new ObservableCollection<MapLatLng>()
{
   new MapLatLng(13.0827, 80.2707),
   new MapLatLng(13.1746, 79.6117),
   new MapLatLng(13.6373, 79.5037),
   new MapLatLng(14.4673, 78.8242),
   new MapLatLng(14.9091, 78.0092),
   new MapLatLng(16.2160, 77.3566),
   new MapLatLng(17.1557, 76.8697),
   new MapLatLng(18.0975, 75.4249),
   new MapLatLng(18.5204, 73.8567),
   new MapLatLng(19.0760, 72.8777)
};
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;

Methods

OnBindingContextChanged()

Invoked whenever the binding context of the View changes.

Declaration

protected override void OnBindingContextChanged()