Offsetting Marker to accomodate custom marker point

[Matthew Willcock]

Hi,

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"     >

                                        <ffimageloadingsvg:SvgCachedImage

                                            WidthRequest="40"

                                            HeightRequest="40"

                                            Source="{Binding MarkerSource}" />

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

                                    </StackLayout>

                                </DataTemplate>

                            </sfmaps:ShapeFileLayer.MarkerTemplate>

                        </sfmaps:ShapeFileLayer>

[Vishal Omprasad]

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,

 

https://help.syncfusion.com/xamarin/maps/markers#marker-alignment

Attachment: MapSample_b001d459.zip

[Matthew Willcock]

Thanks that works perfectly.

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

 <sfmaps:ShapeFileLayer.MarkerSettings>

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

</sfmaps:ShapeFileLayer.MarkerSettings>

Matt

[Preethi Rajakandham]

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.

Regards,

Preethi R