We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add ploygon shape in Xamarin.Forms maps (SfMaps)

Platform: Xamarin.Forms |
Control: SfMaps |
Published Date: July 23, 2020 |
Last Revised Date: July 23, 2020

This article explains how to add a polygon shape on Xamarin.Forms SfMaps, as shown in the following image.

 

Drawn polygon shape on SfMaps

 

 

 

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),
            };
        }
    }

 

View the sample in GitHub.

 

See also


How to interact with shapes on SfMaps

How to display item on a map

 

How to load multiple shape files on SfMaps

 

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile