Add custom shapes to syncfusion map in blazor app-CodePudding

is it possible to add and draw custom shapes like polygons to syncfusion map in blazor app ?

CodePudding user response：

The Maps component does not support drawing custom shapes over the maps. The Maps component is intended to display maps from the JSON files with GeoJSON data. So, we can create desired custom shapes by creating polygon shapes with coordinates in the JSON file using GeoJSON format. Please find the basic structure of the GeoJSON format below.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
           [
              -118.3829506773929,
              56.43179726111322
            ],
            [
              -118.65327897342544,
              40.2779332752753
            ],
            [
              -91.62044937015477,
              40.48385676694477
            ],
            [
              -92.43143425825274,
              56.58097608279979
            ],
            [
              -118.3829506773929,
              56.43179726111322
            ]
          ]
        ]
      }
    }
  ]
}

This created JSON data can be set as "ShapeData" in the "MapsLayer" tag as a sublayer of the Maps or you can set it as the main layer of the Maps. Please find the code snippet for adding the created shapes as a sublayer of the Maps below.

Code Snippet:

<SfMaps ID="Maps">
<MapsLayers>
    <MapsLayer UrlTemplate=https://tile.openstreetmap.org/level/tileX/tileY.png TValue="string">
    </MapsLayer>
    <MapsLayer Type="Syncfusion.Blazor.Maps.Type.SubLayer" ShapeData='new {dataOptions= "simplegeo.json"}' TValue="string">
       <MapsShapeSettings Fill="Grey"></MapsShapeSettings>
    </MapsLayer>
</MapsLayers>
</SfMaps>

You can find the sample from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppMaps-538912053

Similar to the above structure, we must construct the map with your own data to render custom shapes in the Maps component. To know more about the custom shapes, please refer to the sample link and documentation link below.

Sample: https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=fluent

Documentation: https://blazor.syncfusion.com/documentation/maps/layers#rendering-custom-shapes

CodePudding user response：

The "ColorValuePath" property in the "MapsShapeSettings" tag, which takes the field name (that has color values) from the GeoJSON data as value, can be used to set the color of individual shapes in the GeoJSON map. You need to modify the "properties" field in the GeoJSON data to hold the color values in JSON file. Please find the code snippet for the same below.

JSON Data:

[simplegeo.json]

{
"type": "FeatureCollection",
"features": [
 {
  "type": "Feature",
  "properties": {
    “fill”: “#99ccff”
   },
  //..
 //..
}

] }

Code Snippet:

[Index.razor]

<SfMaps ID="Maps">
<MapsLayers>
    //..
    <MapsLayer Type="Syncfusion.Blazor.Maps.Type.SubLayer" ShapeData='new {dataOptions= "simplegeo.json"}' TValue="string">
      <MapsShapeSettings ColorValuePath="fill"></MapsShapeSettings>
    </MapsLayer>
</MapsLayers>

You can find the modified sample from the below link. https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppMaps-1180499072

As shown in the above solution, you can modify the JSON file to get the color values from the GeoJSON data. If you cannot modify the GeoJSON data, you can create a data source in the application and set the color from the data source using the same property. Please refer the UG documentations below to learn more about setting the color in the shapes. https://blazor.syncfusion.com/documentation/maps/customization#setting-color-to-the-shapes-from-the-data-source https://blazor.syncfusion.com/documentation/maps/color-mapping