2

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

Joel Gauvreau
  • 3,586
  • 4
  • 29
  • 32
Fred
  • 49
  • 1
  • 7

1 Answers1

4

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!

Mike Zavarello
  • 3,514
  • 4
  • 29
  • 43
  • 1
    Excellent! This is a lot simpler than I imagined. Your proposed values increase the zoom level. For smaller increments, the following works well: zoomIn: this.mapZoom(0.8); zoomOut: this.mapZoom(1.25); – Fred May 19 '16 at 08:31
  • I'm glad that worked well for you! And thank you for the suggested parameters for `mapZoom`. – Mike Zavarello May 19 '16 at 10:37