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

Common borders are only shown for one country on highlight

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

3 Replies

IR Indumathi Ravi Syncfusion Team December 16, 2022 01:09 PM UTC

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.



VS Vlad Sucala December 16, 2022 01:24 PM UTC

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.