Common borders are only shown for one country on highlight

[Vlad Sucala]

Hello

I am using the world map to show some country information on the application that I am working on.

The issue I have is that when hovering over a country I get one out of two scenarios on highlighted borders:
- On common borders the border only shows for one of the countries

- Common borders are thinner than borders that are not common(those to a sea for example)

I have been able to replicate the first scenario in a sample project and have attached it to the issue.

Kind regards,

Vlad S.

Attachment: MapHighlightBorders_9bfcb3c4.zip

[Indumathi Ravi]

Hi Vlad,

 

Please find the details for your queries from the below table.

 

Queries	Details
On common borders the border only shows for one of the countries	When we analyzed the provided sample, we found that the Maps have a white background and also border is set to white color to the shapes. Therefore, the border is not visible properly. This is not an issue. However, we can use the “Background” property in “MapsAreaSettings” tag and set the background color as black to the Maps component. Now, we can see the border color around the shapes. Please find the code snippet below.   Code Snippet: <SfMaps Height="625px" ID="asdsad">     //     <MapsAreaSettings Background="black"> </MapsAreaSettings> </SfMaps>   You can find the modified sample and screenshot below for your reference.   https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp2-1721317949
Common borders are thinner than borders that are not common(those to a sea for example)	To overcome your scenario, we can customize the border size for the shapes by using the “Width” property in “MapsLayerHighlightBorder” and “MapsShapeBorder” tag in the Maps component. Refer the below code snippet for the same.    Code Snippet: <SfMaps Height="625px" ID="asdsad">     //     <MapsLayers>         <MapsLayer ShapeData='new {dataOptions = "world-map.json"}' TValue="string">             <MapsLayerHighlightSettings Enable="true">                 <MapsLayerHighlightBorder Color="#F5FF00" Width="2" />             </MapsLayerHighlightSettings>             <MapsShapeSettings>                 <MapsShapeBorder Color="#FFFFFF" Width="2" />                 //..             </MapsShapeSettings>         </MapsLayer>     </MapsLayers> </SfMaps>   You can find the modified sample and screenshot below for reference.   https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp2727188838

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Vlad Sucala]

Hello Indhumati,

I appreciate your help, but as stated in the original post, my problem is with the highlight borders not the normal borders.

If you look at the following example when you hover on Spain, the borders to France and Portugal should be yellow, but they appear as white. Essentially, when you have a common highlight border, it shows for only one of the countries. This is my issue.

Kind regards,

Vlad S.

[Indumathi Ravi]

Hi Vlad,

When the shapes in the Maps component are rendered in the HTML SVG element, they are rendered one after the other. Due to this, the border of the shapes will overlap with the other shape. When a shape is highlighted or selected, only the border colour is changed. As a result, the border overlap will be visible. Due to the overlap, for example, the border of the Spain shape will be hidden by the border of the Portugal shape. We cannot provide gap between the shapes to display the borders as it will provide wrong coordinate values when any map operation is performed. This is the behaviour of the Maps component.