ktstyle
Posts: 33
Joined: Tue May 05, 2020 11:48 pm

Customizing world map

Hello,

Linke to jsfiddle: https://jsfiddle.net/0o8jazud/11/

I'm attempting to customize a world map to have pinpoints on them. I am attempting label a couple with pins and on hover only working for those pinned countries. I was able to customize an EU country map with pins, but when attempting to apply it to a world map the map does not load.

I attempted to change

Code: Select all

  chart: {
        map: 'custom/europe',
        borderWidth: 1
    },
to 'map: 'custom/world' which I've seen from other world map demos but it does not load the map.


2. I am also attempting to make all countries one universal color red. I applied a color property to the map but it only applies to tooltip legend and border effect from the pins but does not make all countries 1 color which would be red.

3. I would also like to add a hover effect on only the countries that are pinned. I would like the hover to highlight the entire country. I've attempted this by adding an in the series but it has no effect.

Code: Select all

states: {
                hover: {
                    color: 'rgba(17, 134, 195, 0.5);'
                }
            },

Please advise on how I can achieve this.

Best,
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Customizing world map

Hello,

Thanks for contacting us with your question!

1. The reason why your custom/world map doesn't load is missed module.
Add the following link to your HTML file:

Code: Select all

https://code.highcharts.com/mapdata/custom/world.js

2&3. I've modified the array of hc-key's and now everything is working correctly.

Demo:
https://jsfiddle.net/BlackLabel/nhoug627/

Let me know if that was what you were looking for!
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
ktstyle
Posts: 33
Joined: Tue May 05, 2020 11:48 pm

Re: Customizing world map

Hi magdalena thanks for your help.

This helps a ton, there is 1 more thing I wasn't clear on. I would like to make all countries on the map appear red and only have the hover effect on the ones that are marked by the pin such as Finland, Sweden, Norway, Denmark and Irleand
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Customizing world map

In that case, you need to set nullColor on the series.

Demo:
https://jsfiddle.net/BlackLabel/2ekujmpb/

API Reference:
https://api.highcharts.com/highmaps/ser ... .nullColor

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Maps”