duansha
Posts: 46
Joined: Tue Mar 17, 2020 4:38 pm

How to show Hongkong on HighMap

Hello,

I am using HighMap to show a popup (tooltip) when mouseover for each country with populated values.

I provided data for Hongkong, but I can't see a popup when I mouseover. Singapore is also very tiny on map, but if I zoom in then mouse over, I can see the popup. Not sure if it is because Hongkong is a region within a country, thus HighMap can't show it. Is there a way to show Hongkong?

The data source for Hongkong is like:
{
code: 'HKG',
name: 'HONG KONG',
value: 0.92,
color: '#95e536',
description: ' Hong Kong ...some html to render popup here...'
}

and the tooltip is defined like:
tooltip: {
headerFormat: '',
pointFormat: '{point.description}',
useHTML: true,
style: {
whiteSpace: 'normal',
padding:0
}
},


Thanks,
-Sha
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to show Hongkong on HighMap

Hello duansha,

Thanks for contacting us with your question.

Shared fragment of code might not be enough to find whats the cause of the problem. Could you try to reproduce that issue in a form of a live demo? You can start here: https://jsfiddle.net/BlackLabel/8yje3xnL/

Links that you might find useful:
- Highmaps map collection: https://code.highcharts.com/mapdata/
- Maps with Hongkong: https://jsfiddle.net/BlackLabel/h74pkjvq/,
https://jsfiddle.net/BlackLabel/7qftnLyj/

Best regards!
Mateusz Bernacik
Highcharts Developer
duansha
Posts: 46
Joined: Tue Mar 17, 2020 4:38 pm

Re: How to show Hongkong on HighMap

Thanks for sharing me the links above. I checked them but still could not get what I need. I only need to show country level data, I do not need to show province/state level data. But the special case for Hongkong is: it is a region not a country, but we still need to show its data at country level.

I created a sample page at https://jsfiddle.net/zs8j1qam/

I populated sample data for Hongkong,China,Malaysia, Singapore. I can see 3 popups, but not for Hongkong.

Please help me with it, thanks a lot!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to show Hongkong on HighMap

Hello duansha,

I've taken a closer look at the map data that you are using and you can't show Hongkong, because it simply doesn't exist in the file that you use (https://code.highcharts.com/mapdata/custom/world.js). As a workaround I would suggest to extend that file with a data for Hongkong. Here's a demo showing how to do that: https://jsfiddle.net/BlackLabel/rwnh53ab/

This workaround applies to all regions and zones which you potentially might want to show, but aren't present in your map data.

Also if the map collection that I mentioned in my previous message is not sufficient for you, then you should check this article: https://www.highcharts.com/docs/maps/create-custom-maps
You can find there more details about creating your custom map and adjusting it to your needs.

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
duansha
Posts: 46
Joined: Tue Mar 17, 2020 4:38 pm

Re: How to show Hongkong on HighMap

Thanks! It works perfectly for me.

I added the feature for Hongkong into world.js, and I can see an island added. When I mouse over the island, the tooltip for Hongkong pops up.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to show Hongkong on HighMap

That's great to hear! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”