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

Offsetting Marker to accomodate custom marker point


I've got a map view working well with a custom marker made up of a SVG image of a map pin and a Label containing a name defined using a DataTemplate on the relevant layer, however, the map pins are centred on the provided lat/lon but really should be positioned up and left a bit (specifically offset left by 0.5 * image width and up by the height of the image - this is due to the point of the image marker being at the bottom centre of the image file.  I've played with providing a negative Margin on the image (eg  Margin="-20, -40, 0, 0") which corrects the location but makes it impossible to click the marker (you need to click below and to the right!).  Other libraries provide an offset to accommodate this type of situation

Any suggestions to get the icon positioned correctly?

Example XAML follows:

 <sfmaps:ShapeFileLayer x:Name="markers" >

                            <sfmaps:ShapeFileLayer.MarkerTemplate >

                                <DataTemplate >

                                    <StackLayout Orientation="Vertical"     >




                                            Source="{Binding MarkerSource}" />

                                        <Label FontSize="12" TextColor="{Binding MarkerColor}" Text="{Binding MarkerText}"/>





3 Replies 1 reply marked as answer

VO Vishal Omprasad Syncfusion Team January 5, 2023 01:35 PM UTC

Your requirement can be achieved by using the “VerticalAlignment” and “HorizontalAlignment” from the “MapMarkerSettings” in SfMaps. When using the marker template, the centre of the pin image will be placed over the marker's given latitude and longitude point. Using the HorizontalAlignment and VerticalAlignment properties, we can align the map's marker horizontally or vertically to place the pin over the marker's latitude and longitude point. We have prepared the simple sample based on the shared details, please find the attached sample for the same.


Refer to our UG documentation to know more details about the Marker alignment in the SfMaps,



Attachment: MapSample_b001d459.zip

Marked as answer

MW Matthew Willcock January 5, 2023 02:50 PM UTC

Thanks that works perfectly.

For reference for others, the following was inserted in to the XAML for bottom centre alignment


                                <sfmaps:MapMarkerSetting x:Name="markerSetting" HorizontalAlignment="Center" VerticalAlignment="Near"/>



PR Preethi Rajakandham Syncfusion Team January 6, 2023 05:27 AM UTC

Hi Matthew,

We are glad to know that the reported problem has been resolved. Please let us know if you have any further queries on this. We are happy to help.


Preethi R

Live Chat Icon For mobile
Up arrow icon