Class MapPolyline

The MapPolyline represents the default model for polyline layer.

Inheritance

System.Object

MapPolyline

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public class MapPolyline : Element, IThemeElement

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

MapPolyline()

Initializes a new instance of the MapPolyline class.

Declaration

public MapPolyline()

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;

Fields

PointsProperty

Identifies the Points bindable property.

Declaration

public static readonly BindableProperty PointsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StrokeDashArrayProperty

Identifies the StrokeDashArray bindable property.

Declaration

public static readonly BindableProperty StrokeDashArrayProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StrokeLineCapProperty

Identifies the StrokeLineCap bindable property.

Declaration

public static readonly BindableProperty StrokeLineCapProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StrokeThicknessProperty

Identifies the StrokeThickness bindable property.

Declaration

public static readonly BindableProperty StrokeThicknessProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

Points

Gets or sets the collection of points. Every single MapPolyline connects multiple location coordinates through group of Points.

Declaration

public IList<MapLatLng> Points { get; set; }

Property Value

Type	Description
System.Collections.Generic.IList<MapLatLng>	The points collection. By default, the collection is empty.

   <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>
                                <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>
                      </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;

Stroke

Gets or sets the brush that paints the interior area of the polyline.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	A `Brush` that specifies how the map polyline is painted.

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"
                                             StrokeLineCap="Round"
                                             Stroke="Blue">
                                <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>
                      </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;
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;

StrokeDashArray

Gets or sets the value collection of double values that specifies the pattern of dashes and gaps that are used to outline of the polyline.

Declaration

public DoubleCollection StrokeDashArray { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DoubleCollection	The dash value of the map polyline. The default is `null`.

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;

StrokeLineCap

Gets or sets the value that specifies the shape of the polyline's start and end of a polyline.

Declaration

public LineCap StrokeLineCap { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.LineCap	It specifies the stroke cap of the map polyline. The default value is butt.

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"
                                             StrokeLineCap="Round">
                                <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>
                      </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;
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;

StrokeThickness

Gets or sets the value that specifies the width of the polyline.

Declaration

public double StrokeThickness { get; set; }

Property Value

Type	Description
System.Double	It specifies the width of the map polyline. The default value is 2.

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>
                      </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;
mapPolylineLayer.Polylines.Add(polyline);
layer.Sublayers.Add(mapPolylineLayer);
maps.Layer = layer;
this.Content = maps;