CODEWITHSUNDEEP
highcharts
Johannes Christ
Johannes Christ

Reputation: 109

Highcharts Highmaps zoom to latitude longitude

I built a world map with a drop down menu that changes the zoom level: see fiddle

This is my function:

$('#func').change(function () {
    var chart = $('#map').highcharts();  
    var v = $(this).val();
            if(v == "1") {
              $('#map').highcharts().mapZoom(10);
              $('#map').highcharts().mapZoom(.4);
              chart.redraw();
                       }                        
                     });

In addition I want to change the position of the map. How can I change latitude and longitude after a value is selected?

Upvotes: 0

Views: 734

Answers (1)

Karol Kołodziej
Karol Kołodziej

Reputation: 672

Using the mapZoom method you can change the current map view. You only have to add the second and third argument to that method. This is the X and Y position of the new zoom centre.
For calculating that value from latitude/longitude you might use the fromLatLonToPoint method.
In the demo below I implemented it for Europe.

API:
https://api.highcharts.com/class-reference/Highcharts.Chart#mapZoom
https://api.highcharts.com/class-reference/Highcharts.Chart.html#fromLatLonToPoint
Live demo:
https://jsfiddle.net/BlackLabel/xs8nLgho/

Upvotes: 1

Related Questions