How to show the shape in a MarkerTemplate

[tttrickyyy]

We are using the SFMaps MarkerTemplate to add more detail to the specific items. I'm trying to get the Shape to show. Below is an quick code example :

  <MapsMarkerSettings>

                <MapsMarker TValue="MapModel" Visible="true" Fill="Red"

                            Shape="MarkerType.Circle"

                            Height="30" Width="30" DataSource="@AtlanticStates" LegendText="Postalcode">

                    <MarkerTemplate >

                        @{

                            var data = context as MapModel;

                            <div style="width:70px;cursor:default;font-family:Arial;font-size:10px;font-weight:600;">@data.Postalcode <br />@data.Percent %</div>

                        }

                    </MarkerTemplate>

                </MapsMarker>

            </MapsMarkerSettings>

Any help is appreciated!

[Swetha Babu]

Dear Customer, 

 

Thank you for contacting Syncfusion support. 

 

We can add both marker template and marker shape in the Maps component. Also, we have created a simple Blazor WASM application to demonstrate the same and it can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/166259/ze/BlazorMapsWASM-1859607483 

 

Code snippet: 

 

<SfMaps> 

    <MapsLayers> 

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

            <MapsMarkerSettings> 

                <MapsMarker TValue="MapModel" Visible="true" Fill="Red" 

                            Height="30" Width="30" DataSource="@EasternStates" Shape="MarkerType.Circle" LegendText="Postalcode">                     

                </MapsMarker> 

                <MapsMarker TValue="MapModel" Visible="true" Fill="Red" 

                            Height="30" Width="30" DataSource="@EasternStates" LegendText="Postalcode"> 

                    <MarkerTemplate> 

                        @{ 

                            var data = context as MapModel; 

                            <div class="MapLabelWide">@data.Postalcode <br />@data.Percent %</div> 

                        } 

                    </MarkerTemplate> 

                </MapsMarker> 

            </MapsMarkerSettings> 

        </MapsLayer> 

    </MapsLayers> 

</SfMaps> 

 

NOTE: When we try to render both the template and the shape in the same "MapsMarker" class, the marker template takes precedence. So, if you need to render both the marker shape and the marker template, you can do so in a separate "MapsMarker" class in the "MapsMarkerSettings". 

 

Please let us know if the above code snippet meets your requirement. Also, please let us know if you need further assistance. 

 

Regards, 

Swetha Babu.