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 draw a line (route) between two terminals in SfMaps

Platform: Xamarin.Forms |
Control: SfMaps |
Published Date: July 6, 2019 |
Last Revised Date: July 6, 2019

This article explains how to draw a line between two terminals using the SfMaps control. Refer to the following steps to draw a line between two terminals.

Step 1: Initialize the SfMaps control and add ShapeFileLayer to the layer collection of the control with the Uri property. Using the SubLayers support, you can add a sub shape layer that contains line points between two routes over the main ShapeFileLayer.

The following code snippet demonstrates how to add a sub shape file layer over the main shape file layer.

<maps:SfMaps x:Name="sfmap" BackgroundColor="LightGray" >
            <maps:SfMaps.Layers >
                <maps:ShapeFileLayer Uri="world-map.shp" x:Name="layer" >
                    <maps:ShapeFileLayer.Sublayers>
                        <maps:ShapeFileLayer Uri="river.shp">
                            <maps:ShapeFileLayer.ShapeSettings >
                                <maps:ShapeSetting ShapeStrokeThickness="2"/>
                            </maps:ShapeFileLayer.ShapeSettings>
                        </maps:ShapeFileLayer>
                    </maps:ShapeFileLayer.Sublayers>
</maps:ShapeFileLayer>
            </maps:SfMaps.Layers>
        </maps:SfMaps>

 

Step 2: Add markers to ShapeFileLayers using the Markers property with latitude and longitude values.

<maps:ShapeFileLayer.Markers>
 
                        <maps:MapMarker Latitude = "28.6139391" Longitude = "77.2090212"/>
                        <maps:MapMarker Latitude = "39.9041999" Longitude = "116.4073963"/>
                        <maps:MapMarker Latitude = "31.2303904" Longitude = "121.4737021"/>
                        <maps:MapMarker Latitude = "23.12911" Longitude = "113.264385"/>
                        <maps:MapMarker Latitude = "22.396428" Longitude = "114.109497"/>
                        <maps:MapMarker Latitude = "19.0759837" Longitude = "72.8776559"/>
                        <maps:MapMarker Latitude = "13.0826802" Longitude = "80.2707184"/>
                        <maps:MapMarker Latitude = "22.572646" Longitude = "88.363895"/>
                        <maps:MapMarker Latitude = "24.880095" Longitude = "102.832891"/>
                    </maps:ShapeFileLayer.Markers>

 

You can find the sample in the following link: Sample

Screenshot

 

Lines between two terminals using xamarin SfMaps

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Aman Kharzoum
Dec 05, 2019

Hi, I want to ask if I could draw a line (route) between two terminals in SfMaps using ImageryLayer?

Reply
Bharathiraja K [Syncfusion]
Dec 05, 2019

Hi Aman,

Yes. You can add a sublayer that contains line points between two routes (terminals) over the main ImageryLayer as like ShapeLayer.

Please refer the below help document for adding sublayer in imagery layer. https://help.syncfusion.com/xamarin/maps/sublayer#adding-sublayers-in-imagerylayer

Regards, Bharathi.

Bharathiraja K [Syncfusion]
Dec 06, 2019

Hi Aman,

Also, we have provided support to draw polyline (routes), polygon using Point Collection from C# code that contains the two GeoCoordinates (terminals) instead of referring shape files to draw line and this feature will be included in our upcoming 2019 Volume4 release which is scheduled to be rolled out in the mid of December 2019.

Aman Kharzoum
Dec 08, 2019

Thank you so much :)

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