Maps Marker shape and with custom image or number

[Bastian Lemke]

I use the Maps component to show locations on a map.

I have the ShapeValuePath and ColorValuePath bound, so that the markers can be rendered differently and this works perfectly fine.

But additionally to this, I want to show either a unique number for every marker based on some value in my objects or a check mark.

My markers currently are defined like this:

<MapsMarker Visible="true" Width="25" Height="25" DataSource="markers" TValue="MarkerItem" ColorValuePath="Color" ShapeValuePath="Shape">
                                <MapsMarkerBorder Width="2" Color="rgb(0,0,0)"></MapsMarkerBorder>
                                <MapsMarkerTooltipSettings Visible="true" ValuePath="locationname">
                                    <MapsMarkerTooltipTextStyle Color="gray"></MapsMarkerTooltipTextStyle>
                                </MapsMarkerTooltipSettings>
                            </MapsMarker>

I tried just adding another MapsMarker-component within my MapsLayers and have it render the additional info I would like and just make them overlap or offset the 2nd marker.

<MapsMarker Visible="true" Width="15" Height="15" OffsetX="5" OffsetY="5"
                                DataSource="markers.Where(x => x.locationisvisited)" TValue="MarkerItem"
                                Shape="Syncfusion.Blazor.Maps.MarkerType.Image" ImageUrl="images/MarkerSVGs/check-mark.svg"
                                >
                                <MapsMarkerBorder Width="2" Color="rgb(0,0,0)"></MapsMarkerBorder>
                                <MapsMarkerTooltipSettings Visible="true" ValuePath="locationname">
                                    <MapsMarkerTooltipTextStyle Color="gray"></MapsMarkerTooltipTextStyle>
                                </MapsMarkerTooltipSettings>
                            </MapsMarker>

When I tried this, the map would behave oddly when trying to pan. Panning sometimes would work, but sometimes it wont let me pan and trying to pan results in the map stuttering.

Also this wouldnt solve my problem display a number for every marker.

Is there any way to have the MapsMarker render with the provided Shape and Color from ShapeValuePath and ColorValuePath and additionally show a custom image?

If that is not possible, am I missing anything to explain the observed behaviour?

[Indumathi Ravi]

Hi Bastian,

You can render any desired text or image adjacent to the markers by rendering it as a template. The “MarkerTemplate” property is used to achieve this. Please find the code snippet to add unique number for each marker.

Code Snippet:

@using Syncfusion.Blazor.Maps

 

<SfMaps>

    <MapsLayers>

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

            //..

            <MapsMarkerSettings>

                <MapsMarker Visible="true ColorValuePath="Color"  ShapeValuePath="Shape" AnimationDuration="0">

               //..

               //..

                </MapsMarker>

                <MapsMarker Visible="true" DataSource="MarkerDataSource" TValue="City" OffsetY="8">

                    <MarkerTemplate>

                        @{

                            var Data = context as City;

                            <div style="font-size:13px;font-weight:bold">@Data.Value</div> <br>

                        }

                    </MarkerTemplate>

                </MapsMarker>

            </MapsMarkerSettings>

           //..

        </MapsLayer>

    </MapsLayers>

</SfMaps>

You can find the sample for demonstration from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorMaps1780616865

In the above example, we have added a unique number to each marker using the “MarkerTemplate” property. This unique number is retrieved from the data source by setting the corresponding field in the marker template content.

Meanwhile, we can reproduce the issue - “The panning is not working properly with multiple marker groups with shape and image marker types in the Maps”. We have considered it as a defect and logged a defect report for the same. The fix for this issue will be included in our weekly patch release, which is expected to be available by the mid of October 2023. You can track the status of the issue using below feedback link.

https://www.syncfusion.com/feedback/47148

[Indumathi Ravi]

Hi Bastian,

The reported issue - "The panning is not working properly with multiple marker groups with shape and image marker types in the Maps" - has been resolved in the sample application itself.  The issue is caused by the data source being of the enumerable type when using 'markers.Where(x => x.locationisvisited)'. However, after changing the data source to a list, the panning functionality in Maps now works properly. Please see the code snippet below.

Code Snippet:

<SfMaps>

    <MapsLayers>

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

           //..

            <MapsMarkerSettings>

               //..

              //..

                <MapsMarker Visible="true" Width="15" Height="15" OffsetX="5" OffsetY="5"

                            DataSource="markerData.Where(x => x.LocationIsVisited).ToList()" TValue="City" AnimationDuration="0"

                            Shape="Syncfusion.Blazor.Maps.MarkerType.Image" ImageUrl=https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/maps/ballon.png>

                    //..

                </MapsMarker>

            </MapsMarkerSettings>

            <MapsShapeSettings Fill="lightgray"></MapsShapeSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

You can find the sample and video from the below link.

Sample -  https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsSample759041991

Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/panning-275642894

Please let us know if you need any further assistance.