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

MapsNavigationLine with arrow?


Is there a way to add an arrow to MapsNavigationLine?

I'm trying to show travel destinations and I would need to show the direction of the connection.


1 Reply

IR Indumathi Ravi Syncfusion Team April 3, 2023 04:04 PM UTC

Hi Valerio,

The arrow in the navigation line of the Maps component can be added by setting the “ShowArrow” property as “true” in the “MapsArrow” tag. Please find the code snippet for the same below.

Code Snippet:



        <MapsLayer ShapeData='new {dataOptions =https://cdn.syncfusion.com/maps/map-data/world-map.json}' TValue="string">




                <MapsNavigationLine Visible="true" Color="black" Angle="-0.1" Width="2" DashArray="4"

                                    Latitude="new double[]{ 65.931163, 39.864171 }" Longitude="new double[]{ -45.812820, -100.854833 }">

                    <MapsArrow ShowArrow="true" Color="black" Size="10"></MapsArrow>







You can find the sample from the below link.



Please refer the below UG documentation link to learn more about the customization of the arrow in the navigation line.


Please let us know if you need any further assistance.

Live Chat Icon For mobile
Up arrow icon