Shruthi
Posts: 9
Joined: Wed Jul 22, 2020 10:25 am

HighMaps Zoomed-in Location based on user selected location

High Chart Map already have the Zoom In / Zoom Out option. It is also possible to manually drag the map to a particular location using Mouse scroll. The requirement is to programmatically Zoom & Drag the map to the configured coordinates ( Given location details will be configured at back end For e.g. Latitudes and Longitudes of Left Bottom and Right Top). We want to avoid mapping of multiple JSON files as it impacts the performance of the Dashboard. Please advise on the best approach.

Eg: Suppose we want Texas, the Texas portion of the map should be zoomed-in.

Do help on this with the sample jsfiddle code.

Reference Map used: https://jsfiddle.net/gh/get/library/pur ... ght-routes
Attachments
hm.PNG
hm.PNG (121.46 KiB) Viewed 1894 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: HighMaps Zoomed-in Location based on user selected location

Hi Shruthi!
Thanks for contacting us with your question!

I think you have attached the wrong link to the demo, but I will show you a method on a similar demo to the one from your image. To zoom the map view by a given number and to given coordinates, you can use mapView.zoomBy method. You can read docs, which parameters this function is using. Below, you can find a mentioned demo with a button to zoom into Texas programmatically.

Demo: https://jsfiddle.net/BlackLabel/6430wnrj/
API Reference: https://api.highcharts.com/class-refere ... iew#zoomBy

Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
Shruthi
Posts: 9
Joined: Wed Jul 22, 2020 10:25 am

Re: HighMaps Zoomed-in Location based on user selected location

The jsfiddle https://jsfiddle.net/BlackLabel/6430wnrj/ is not showing any maps.
I need a feature where the state/city gets automatically zoomed-in on selection of that particular state/city from a dropdown without pressing any buttons explicitly.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: HighMaps Zoomed-in Location based on user selected location

Shruthi,
Thank you for your clarification. I think, now I understand you correctly, to achieve something like this you can set chart.zooming.type to xy. Sadly, you cannot move the map by your click, because it will be treated as zooming.

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

Let me know if that was what you were looking for.
Regards!
Hubert Kozik
Highcharts Developer
ferdy
Posts: 1
Joined: Thu Feb 02, 2023 6:49 pm

Re: HighMaps Zoomed-in Location based on user selected location

However, dear Hubert, in your example using zoomBy, you point to Texas with chart.mapView.zoomBy(1.4, [-106, 50]);

After reading your documentation about zoomby (https://api.highcharts.com/class-refere ... iew#zoomBy) those array of coordinates are of type Highcharts.LonLatArray, that means "common longitude and latitude" (https://api.highcharts.com/class-refere ... onLatArray) .

But the longitude and latitude fort Texas are (close to) "lon": -98.491142, "lat": 29.424349. So, please, could you explain to me why are you using -106 and 50 intead -98 and 29? Is there any transformation when you are using the https://code.highcharts.com/mapdata/cou ... o.json map?

As an example in order to understand it better, could you please provide the chart.mapView.zoomBy for NY and let me know from where are those lon/lat values coming from?

Than you in advance. And congrats for such great product.

Best regards
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: HighMaps Zoomed-in Location based on user selected location

Hi Ferdy,

To zoom to a map point you could call zoomTo function on the point.
Demo: https://jsfiddle.net/BlackLabel/6430wnrj/16/
If your point has id then you could use chart.get function to find that point.

Code: Select all

chart.get('NY').zoomTo();
zoomBy coords parameter is just a set of coordinates that should be fixed so there is no guarantee that this will be the new center.

Best regards,
Kacper Madej
Highcharts Developer

Return to “Highcharts Maps”