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

Custom the backround for polygon in blazor maps

Hi everyone,

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


rayon_imag.PNG


5 Replies

IR Indumathi Ravi Syncfusion Team April 10, 2023 07:05 PM UTC

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.



KA Kaouthar replied to Indumathi Ravi April 13, 2023 11:55 AM UTC

It works , Thank you so much.

But can I get the color dynamically from the datasource ?



SA Sabari Anand Senthamarai Kannan Syncfusion Team April 14, 2023 08:01 PM UTC

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.



KA Kaouthar replied to Sabari Anand Senthamarai Kannan April 18, 2023 03:29 PM UTC

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




IR Indumathi Ravi Syncfusion Team April 19, 2023 03:59 PM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon