Search code examples
ajaxhighchartszoominghighmaps

Highmaps limit zoom range breaks zooming out


I am using Highmaps and I limit the zoom range by setting the minRange property in the xAxis property.

This limits the zoom in factor as expected, but when zooming in too much, it does not let you zoom out again until you drag the map. To be more precise, it lets you zoom out until the x-axis is completely visible, but if your viewport is too wide to display the whole y-range of the map at this particular zoom step, you only get a horizontal stripe.

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

        // Initiate the chart
        $('#container').highcharts('Map', {

            title : {
                text : 'Zoom in on country by double click'
            },

            mapNavigation: {
                enabled: true,
                enableDoubleClickZoomTo: true
            },

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

            xAxis: {
                minRange: 5000 // <- prevent zooming in too much
            },

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

You can see a working demo here: http://jsfiddle.net/b9d0ry3t/

This is a standard Highmaps demo, where I simply added the minRange on the xAxis, nothing else.


Solution

  • This and many other problems have been fixed with the most recent Highmaps update (Feb. 2015).