Change the zoom level for highmaps

Question

I have been trying to reduce the amount the map zooms in/out when pressing the zoom in/out buttons. It seems there is no variable for this, and that it requires a custom function using http://api.highcharts.com/highmaps#Chart.mapZoom

What I would like to do is override the default event for the zoom in/out buttons with a custom event, which uses a custom value for the mapZoom 'howMuch' parameter. This is the only example I was able to find of the mapZoom function in action - http://jsfiddle.net/z8X6B/1/ :

Highcharts.Chart.prototype.mapZoom = function (howMuch, centerXArg, centerYArg, mouseX, mouseY) {}

But I haven't been able to figure out how to override the existing zoom in/out button events with a custom function (I'd like to avoid creating my own buttons).

Answer 1

Great question! I dug through the Highmaps API reference on the map's navigation buttons ( http://api.highcharts.com/highmaps#mapNavigation.buttons ) and figured out how to do this:

mapNavigation: {
    buttons: {
        zoomIn: {
            // the lower the value, the greater the zoom in
            onclick: function () { this.mapZoom(0.1); }
        },
        zoomOut: {
            // the higher the value, the greater the zoom out
            onclick: function () { this.mapZoom(10); }
        }
    }
},

Here's an active fiddle based on one of the Highmaps demos: http://jsfiddle.net/brightmatrix/d51g1jt2/

From my tests, it seems like your value for mapZoom() when zooming in needs to be a percentage of the map you still want to see after zooming (in this example, we want to see just 10% of the total map). Anything a value of 1 or higher doesn't seem to work.

For zooming out, the value for mapZoom() seems to be a multiplier. So, in this case, we zoomed in to 10% of the value of the map, so your zoom out is 10x that value.

The default values for zooming in and out are 0.5 and 2 , respectively, which makes sense (zoom in to 50% of the map's size; zoom out 2x).

I hope this information is both helpful and useful to you!