Hi everyone,
Is it possible to custom the background for polygon in blazor maps , to be like that.
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.
It works , Thank you so much.
But can I get the color dynamically from the datasource ?
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.
What I'm looking for is that every shape will have diffrent color using svg as path . Like in this image
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.