How to zoom to specific point in Highmaps

Question

Highmaps / highcharts is a javascript/jquery adapter that renders maps in browsers etc.

I have a map with a single country highlighted, however, the scale of the (world) map is such that I want zoom in after the map is loaded on the country in question.

Looking at the API I feel certain this is possible.

There is an event listener, such that I can execute custom functions on load. As illustrated with this example, where a series is added on load (Js fiddle)

Additionally there is a method mapZoom allowing you to specify a point to zoom to with the following arguments:

mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])

But when I try and call this method onload (my code attempt below, JS fiddle here), nothing happens.

$(function () {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {

        // Assign id's
        $.each(data, function () {
            this.id = this.code;
        });

        // Initiate the chart
        $('#container').highcharts('Map', {
            chart: {
                events: {
                    load: function () {
                    mapZoom(0.5, 100, 100);
                    }
                }
            },
            title: {
                text: 'Zoom on load attempt'
            },


            legend: {
                title: {
                    text: 'Population density per km²'
                }
            },

            colorAxis: {
                min: 1,
                max: 1000,
                type: 'logarithmic'
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series : [{
                data : data,
                mapData: Highcharts.maps['custom/world-highres'],
                joinBy: ['iso-a2', 'code'],
                name: 'Population density',
                allowPointSelect: true,
                cursor: 'pointer',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                tooltip: {
                    pointFormat: '{point.id} {point.name}',
                    valueSuffix: '/km²'
                }
            }]
        });

    });
});

score 9 · Accepted Answer · answered Mar 09 '15 at 04:35

9

mapZoom is a method that belongs to the chart object so, in order to call it as en event (load), you have to call it using this keyword.

You can edit your code like this (JSFiddle):

...
events: {
    load: function () {
        this.mapZoom(0.5, 100, 100);
        }
    }
}
...

Alternatively, you can call it whenever you want using a jQuery reference (JSFiddle):

$('#container').highcharts().mapZoom(0.5, 100, 100);

answered Mar 09 '15 at 04:35

Roco CTZ

1,107
1
16
31

1

How would you zoom in to a specific (lat,lon) location? – user720491 Mar 25 '15 at 15:25
1

`var pos = this.fromLatLonToPoint({ lat: 51.5, lon: 2.0 });` `this.mapZoom(0.1, this.xAxis[0].toPixels(pos.x), this.yAxis[0].toPixels(pos.y));` is zooming in, but not to the required position – user720491 Mar 25 '15 at 15:41
Hi, zooming in to x,y doesn't mean going to x latitude, y longitude. The map has a different coordinates system different than the geographical -90:90, -180:180. If you want to make the conversion, you will need to use the proj4 library. Please see this discussion: http://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/5780574-add-ability-to-plot-points-based-on-longitude-lati – Roco CTZ Mar 25 '15 at 21:15

score 5 · Answer 2 · answered Jun 03 '16 at 10:19

Zoom to a specific country on your map is easy

series : [{
            ...
            data: [{code: 'HU', id: 'HU', value: 7.5, name: 'Hungary'}],
            ...
            }

...and then...

var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well

score 1 · Answer 3 · edited Aug 05 '20 at 09:19

If you want to zoom several countries, than you can try this

events: {
    load: function () {
    var mapChart = this;
    ['DE', 'HU', 'RO'].map(function(code){
        return mapChart.get(code);
    }).reduce(function(acc, current){
      // Set map bounds
      acc._minX = isNaN(acc._minX) ? current._minX : Math.min(acc._minX, current._minX);
      acc._maxX = isNaN(acc._maxX) ? current._maxX : Math.max(acc._maxX, current._maxX);
      acc._minY = isNaN(acc._minY) ? current._minY : Math.min(acc._minY, current._minY);
      acc._maxY = isNaN(acc._maxY) ? current._maxY : Math.max(acc._maxY, current._maxY);
      return acc;
    }).zoomTo(); 
 }}

I found your answer to working for zoom doesn't work accurately. do you know any changes required? — Sahil Jain, Mar 25 '19 at 12:34

How to zoom to specific point in Highmaps

3 Answers3

Linked