eubos
Posts: 5
Joined: Tue Jul 21, 2020 2:47 pm

Disable map 'dragging'

Hello everyone! Is there any opportunity to disable map dragging/moving? I mean that I need to have a static map with no ability to change the placement.
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Disable map 'dragging'

Hi,

We appreciate you reaching out to us!

Do you mean mapNavigation?
https://api.highcharts.com/highmaps/mapNavigation

You can turn it off so you won't be able to zoom.
Let me know if you were looking for it!

Kind Regards
eubos
Posts: 5
Joined: Tue Jul 21, 2020 2:47 pm

Re: Disable map 'dragging'

Thank you for the response. I already disabled zoom, but it not enough. I need to stop changing the map position when the user doing a mouse press. For now, I can move the map by x-axis and y-axis. But I want a stable frozen map without the opportunity to change position/move.
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Disable map 'dragging'

Hi,

Could you then reproduce your simplified, working code and data in an online editor such as JSFiddle, so that I can also test it?
Then I will try to find the best solution for your config.

Best Regards
eubos
Posts: 5
Joined: Tue Jul 21, 2020 2:47 pm

Re: Disable map 'dragging'

Sure. https://jsfiddle.net/eubos/p1afm3b6/22/ This is a simplified code example. After map initialization, I zoom to some country (Italy for example) and need to freeze the map that the user doesn't have the ability to move the map. Could you help me? P.s. the tooltip should be available, so to cover the map with a transparent element - is not a solution. I've tried to do it, but the tooltip is not showing.
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Disable map 'dragging'

Hi,

I wonder what is the use-case of this solution?
Isn't it better to use a dedicated map for Italy from the map collection?
https://code.highcharts.com/mapdata/

If you need to use a dedicated map shape, you can always create your own geoJSON:
https://www.highcharts.com/docs/maps/cu ... ojson-maps

Kind Regards
eubos
Posts: 5
Joined: Tue Jul 21, 2020 2:47 pm

Re: Disable map 'dragging'

The solution is here: I need to display the area of the map where countries have any value. So, in one case it can be Norway, Italy, and Poland, In another case, it can be the United States, Egypt, Spain, and Panama. In some other case, it can be any list of countries with the values. So, I'm using a world map with high resolution and zoom it to the countries area with some value. After that, I need to block/freeze the map, that the customer can't move it and zoom it. If you can help me with a more elegant solution how to display some region in the world when data is dynamic and every time I received new values for countries - I will be very thankful to you.
eubos
Posts: 5
Joined: Tue Jul 21, 2020 2:47 pm

Re: Disable map 'dragging'

I've found a working solution. Just playing around z-index property. Updated example: https://jsfiddle.net/eubos/p1afm3b6/25/
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Disable map 'dragging'

Hi,

Thank you for the explanation and the provided example!
I'm glad you found a solution.
Feel free to contact us if further needed.

Best Regards
dfenersky
Posts: 1
Joined: Fri Sep 17, 2021 7:07 am

Re: Disable map 'dragging'

Alternative solution would be to unbind the 'mousemove' event altogether:

Code: Select all

chart.container.onmousemove = null;
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Disable map 'dragging'

Hi dfenersky,
Welcome to our forum and thanks for share your solution.

If you have questions about the charts, you know where to ask.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”