Possible to use sfMaps with a custom image?

[Nicholas]

Suppose I have a custom graphics with regular shapes and I wanted to do the same as it is done with sfMaps and have those shapes (think of a chessboard style thing) converted into a control and have them displayed with outlines, labels and such. Would it be possibile

[Indumathi Ravi]

Hi Nicholas,

Maps component supports to render custom shapes/maps in addition to geographic maps and online maps. To render the custom shapes/maps, you need to set the JSON data (which is in GeoJSON format) in the “ShapeData” property and the “GeometryType” property as “Normal”. To customize the border, you can use the “MapsShapeBorder” tag, and the data labels can be customized by using the “MapsDataLabelSettings” tag. Please find the code snippet for the same below.

Code Snippet:

<SfMaps Background="black" ID="Maps">

    <MapsLayers>

        <MapsLayer Visible="true" GeometryType="GeometryType.Normal" ShapeData='new {dataOptions= "customshapes.json"}' TValue="string">

         <MapsDataLabelSettings Visible="true" LabelPath=" seatno"></MapsDataLabelSettings>

         <MapsShapeSettings>

             <MapsShapeBorder Color="Black" Width="2"></MapsShapeBorder>

         </MapsShapeSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

You can find the sample from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp2-1431794360

Please let us know if the above solution meets your requirement.