How to zoom to specific point in Highmaps

问题

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²'
                }
            }]
        });

    });
});

回答1:

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);

回答2:

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

回答3:

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 = Math.min(acc._minX, current._minX);
      acc._maxX = Math.max(acc._maxX, current._maxX);
      acc._minY = Math.min(acc._minY, current._minY);
      acc._maxY = Math.max(acc._maxY, current._maxY);
      return acc;
    }).zoomTo(); 
 }}

来源：https://stackoverflow.com/questions/28933713/how-to-zoom-to-specific-point-in-highmaps

标签

javascript

Highcharts

highmaps