Custom the backround for polygon in blazor maps

[Kaouthar]

Hi everyone,

Is it possible to custom the background for polygon in blazor maps , to be like that.

[Indumathi Ravi]

Hi Kaouthar,

We can set a custom background to the polygon shape of a map in the sample itself by setting the reference of the SVG pattern element as fill color to the layer of the maps component. The “id”  attribute of the SVG pattern must be set to the “Fill” property of the “MapsShapeSettings” of the “MapsLayer”. Please find the code snippet for the same below.

Code Snippet:

<svg>

    <defs xmlns=http://www.w3.org/2000/svg><pattern id="lines" patternUnits="userSpaceOnUse" width="2" height="5" patternTransform="rotate(60)"><line x1="0" y="0" x2="0" y2="11" stroke="#194d33" stroke-width="2" /></pattern></defs>

</svg>

 

<SfMaps ID="Maps">

    //..

   <MapsLayers>

     //..

        <MapsLayer Type="Syncfusion.Blazor.Maps.Type.SubLayer" ShapeData='new {dataOptions= "simplegeo.json"}' TValue="string">

            <MapsShapeSettings Fill="url(#lines)">

                <MapsShapeBorder Color="Red" Width="5"></MapsShapeBorder>

            </MapsShapeSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

You can find the sample from the link below.

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

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

[Kaouthar]

It works , Thank you so much.

But can I get the color dynamically from the datasource ?

[Sabari Anand Senthamarai Kannan]

Hi Kaouthar,

Thank you for the update.

In the Maps component, you can set the colors from the data source to the shapes in the map layer using "ColorValuePath" property of the "MapsShapeSettings" tag. You need to set the field name (that holds color values) from the data source as value in the “ColorValuePath” property. Please find the code snippet for the same below.

Code Snippet:

<SfMaps ID="Maps" @ref="maps">

    <MapsLayers>

    //..

        <MapsLayer Type="Syncfusion.Blazor.Maps.Type.SubLayer" DataSource="CustomShapeDataSource" ShapeData='new {dataOptions= "simplegeo.json"}' TValue="CustomShapeData" ShapeDataPath="Name" ShapePropertyPath='new string[]{"name"}'>

            <MapsShapeSettings Fill="@ShapeFill" ColorValuePath=@ColorPath>

            </MapsShapeSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

 

@code {

    SfMaps maps;

    public string ShapeFill = "url(#lines)";

    public string ColorPath = string.Empty;

    public List<CustomShapeData> CustomShapeDataSource = new List<CustomShapeData>{

         new CustomShapeData { Name= "shapeone", InitialColor = "pink" }

    };

 

    void ChangeColor()

    {

        ShapeFill = string.Empty;

        ColorPath = "InitialColor";

    }

}​

If you need to change the color of a single shape dynamically in the Maps, you need to set the color value in the desired object in the data source and call the “Refresh” method of the Maps component.  Please find the code snippet for the same below.

Code Snippet:

<SfMaps ID="Maps" @ref="maps">

    <MapsLayers>

    //..

        <MapsLayer Type="Syncfusion.Blazor.Maps.Type.SubLayer" DataSource="CustomShapeDataSource" ShapeData='new {dataOptions= "simplegeo.json"}' TValue="CustomShapeData" ShapeDataPath="Name" ShapePropertyPath='new string[]{"name"}'>

            <MapsShapeSettings Fill="@ShapeFill" ColorValuePath=@ColorPath>

            </MapsShapeSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

 

@code {

    SfMaps maps;

    public string ShapeFill = "url(#lines)";

    public string ColorPath = string.Empty;

    public List<CustomShapeData> CustomShapeDataSource = new List<CustomShapeData>{

         new CustomShapeData { Name= "shapeone", InitialColor = "pink" }

    };

 

    void ChangeColor()

    {

        ShapeFill = string.Empty;

        ColorPath = "InitialColor";

    }

 

    void ChangeSpecificColor()

    {

        CustomShapeDataSource[2].InitialColor = "#728FCE";

        maps.Refresh();

    }

}​

You can find the sample application to demonstrate the same and its video from the below links.

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

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/shapecolor-761752925

Please let us know if you need any further assistance.

[Kaouthar]

What I'm looking for is that every shape will have diffrent color using svg as path . Like in this image 

[Indumathi Ravi]

Hi Kaouthar,

To achieve your requirement, you need to define multiple SVG elements for the patterns and add its “id” attribute as the value for a field in the data source. This field name must be set to the “ColorValuePath” property in the “MapsShapeSettings” of the “MapsLayer”. Please find the code snippet for the same below.

Code Snippet:

@using Syncfusion.Blazor.Maps

<svg>

    <defs xmlns=http://www.w3.org/2000/svg><pattern id="lineone" patternUnits="userSpaceOnUse" width="2" height="5" patternTransform="rotate(60)"><line x1="0" y="0" x2="0" y2="11" stroke="red" stroke-width="2" /></pattern></defs>

    <defs xmlns=http://www.w3.org/2000/svg><pattern id="linetwo" patternUnits="userSpaceOnUse" width="2" height="5" patternTransform="rotate(60)"><line x1="0" y="0" x2="0" y2="11" stroke="blue" stroke-width="2" /></pattern></defs>

    //..

</svg>

 

<SfMaps ID="Maps" @ref="maps">

    <MapsLayers>

         //..

        <MapsLayer>

            <MapsShapeSettings ColorValuePath=@ColorPath>

            </MapsShapeSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

 

@code {

    SfMaps maps;

    public string ColorPath = "InitialColor";

    public List<CustomShapeData> CustomShapeDataSource = new List<CustomShapeData>{

         new CustomShapeData { Name= "shapeone", InitialColor = "url(#lineone)" },

         new CustomShapeData { Name= "shapetwo", InitialColor = "url(#linetwo)" }

        //..

    };

}​

You can find the sample to demonstrate the same from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsBlazor-613891409

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