How to add ploygon shape in Xamarin.Forms maps (SfMaps)
This article explains how to add a polygon shape on Xamarin.Forms SfMaps, as shown in the following image.
|
You can add the input Geo points to add a polygon shape in two ways: -
By using the point collection - You can provide the Geo point collection in a sample to add a polygon shape by using the Points and ShapeType properties. And, add the ShapeFileLayer as a sublayer of the base layer.
By using the shape file - By setting the shape file to the Uri property, you can add the polygon shape in a ShapeFileLayer and add it as a sublayer of the base layer.
To get the desired output as shown above, please use the following XAML code to construct the UI.
[XAML]
<maps:SfMaps x:Name="sfmap" ZoomLevel="4">
<maps:SfMaps.Layers>
<maps:ImageryLayer LayerType="OSM" GeoCoordinates="30.9709225,-100.2187212" >
<maps:ImageryLayer.Sublayers>
<!-- set the Polygon in ShapeType and added points as sublayer --!>
<maps:ShapeFileLayer ShapeType="Polygon" Points="{Binding SubLayer1}" >
<maps:ShapeFileLayer.ShapeSettings>
<maps:ShapeSetting ShapeFill="Blue" ShapeStroke="DarkBlue"
ShapeStrokeThickness="4" />
</maps:ShapeFileLayer.ShapeSettings>
</maps:ShapeFileLayer>
<maps:ShapeFileLayer ShapeType="Polygon" Points="{Binding SubLayer2}">
<maps:ShapeFileLayer.ShapeSettings>
<maps:ShapeSetting ShapeFill="Orange" ShapeStroke="Red"
ShapeStrokeThickness="4" />
</maps:ShapeFileLayer.ShapeSettings>
</maps:ShapeFileLayer>
</maps:ImageryLayer.Sublayers>
</maps:ImageryLayer>
</maps:SfMaps.Layers>
</maps:SfMaps>
This polygon's points got from the ViewModel class as shown in the following code sample.
[C#]
public class ViewModel
{
public ObservableCollection<Point> SubLayer1
{
get; set;
}
public ObservableCollection<Point> SubLayer2
{
get; set;
}
public ViewModel()
{
SubLayer1 = new ObservableCollection<Point>()
{
new Point(37.042972,-109.085003),
new Point(40.992567,-109.021030),
new Point(40.968420,-102.048065),
new Point(36.991893,-102.144024),
new Point(37.042972,-109.085003)
};
SubLayer2 = new ObservableCollection<Point>()
{
new Point(41.04621681452063, -104.0625),
new Point(41.04621681452063, -102.0849609375),
new Point(40.01078714046552, -102.041015625),
new Point(40.04443758460856, -95.44921875),
new Point(42.48830197960227, -96.3720703125),
new Point(43.03677585761058, -98.4375),
new Point(43.068887774169625, -104.0625),
new Point(41.04621681452063, -104.0625),
};
}
}
See also
How to interact with shapes on SfMaps
How to display item on a map
How to load multiple shape files on SfMaps
