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
close icon

Possible to use sfMaps with a custom image?

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


1 Reply 1 reply marked as answer

IR Indumathi Ravi Syncfusion Team April 19, 2023 06:05 PM UTC

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.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon