Add "zoom around center" option

Author: Mohsen Azimi

js/ui/bind_handlers.js

@@ -23,7 +23,7 @@ module.exports = function bindHandlers(map, options) {
     for (const name in handlers) {
         map[name] = new handlers[name](map, options);
         if (options.interactive && options[name]) {
-            map[name].enable();
+            map[name].enable(options[name]);
         }
     }
 

js/ui/handler/scroll_zoom.js

@@ -37,14 +37,20 @@ class ScrollZoomHandler {
     /**
      * Enables the "scroll to zoom" interaction.
      *
+     * @param {Object} [options]
+     * @param {string} [options.around] If "center" is passed, map will zoom around center of map
+     *
      * @example
      *   map.scrollZoom.enable();
+     * @example
+     *  map.scrollZoom.enable({ around: 'center' })
      */
-    enable() {
+    enable(options) {
         if (this.isEnabled()) return;
         this._el.addEventListener('wheel', this._onWheel, false);
         this._el.addEventListener('mousewheel', this._onWheel, false);
         this._enabled = true;
+        this._aroundCenter = options && options.around === 'center';
     }
 
     /**
@@ -137,7 +143,7 @@ class ScrollZoomHandler {
 
         map.zoomTo(targetZoom, {
             duration: this._type === 'wheel' ? 200 : 0,
-            around: map.unproject(this._pos),
+            around: this._aroundCenter ? map.getCenter() : map.unproject(this._pos),
             delayEndEvents: 200,
             smoothEasing: true
         }, { originalEvent: e });

js/ui/handler/touch_zoom_rotate.js

@@ -41,13 +41,19 @@ class TouchZoomRotateHandler {
     /**
      * Enables the "pinch to rotate and zoom" interaction.
      *
+     * @param {Object} [options]
+     * @param {string} [options.around] If "center" is passed, map will zoom around the center
+     *
      * @example
      *   map.touchZoomRotate.enable();
+     * @example
+     *   map.touchZoomRotate.enable({ around: 'center' });
      */
-    enable() {
+    enable(options) {
         if (this.isEnabled()) return;
         this._el.addEventListener('touchstart', this._onStart, false);
         this._enabled = true;
+        this._aroundCenter = options && options.around === 'center';
     }
 
     /**
@@ -197,7 +203,7 @@ class TouchZoomRotateHandler {
             zoom: targetScale,
             duration: duration,
             easing: inertiaEasing,
-            around: map.unproject(p)
+            around: this._aroundCenter ? map.getCenter() : map.unproject(p)
         }, { originalEvent: e });
     }
 

js/ui/map.js

@@ -103,13 +103,13 @@ const defaultOptions = {
  *   GL JS would be dramatically worse than expected (i.e. a software renderer would be used).
  * @param {boolean} [options.preserveDrawingBuffer=false] If `true`, the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()`. This is `false` by default as a performance optimization.
  * @param {LngLatBoundsLike} [options.maxBounds] If set, the map will be constrained to the given bounds.
- * @param {boolean} [options.scrollZoom=true] If `true`, the "scroll to zoom" interaction is enabled (see [`ScrollZoomHandler`](#ScrollZoomHandler)).
+ * @param {boolean|Object} [options.scrollZoom=true] If `true`, the "scroll to zoom" interaction is enabled. An `Object` value is passed as options to [`ScrollZoomHandler#enable`](#ScrollZoomHandler#enable).
  * @param {boolean} [options.boxZoom=true] If `true`, the "box zoom" interaction is enabled (see [`BoxZoomHandler`](#BoxZoomHandler)).
  * @param {boolean} [options.dragRotate=true] If `true`, the "drag to rotate" interaction is enabled (see [`DragRotateHandler`](#DragRotateHandler)).
  * @param {boolean} [options.dragPan=true] If `true`, the "drag to pan" interaction is enabled (see [`DragPanHandler`](#DragPanHandler)).
  * @param {boolean} [options.keyboard=true] If `true`, keyboard shortcuts are enabled (see [`KeyboardHandler`](#KeyboardHandler)).
  * @param {boolean} [options.doubleClickZoom=true] If `true`, the "double click to zoom" interaction is enabled (see [`DoubleClickZoomHandler`](#DoubleClickZoomHandler)).
- * @param {boolean} [options.touchZoomRotate=true] If `true`, the "pinch to rotate and zoom" interaction is enabled (see [`TouchZoomRotateHandler`](#TouchZoomRotateHandler)).
+ * @param {boolean|Object} [options.touchZoomRotate=true] If `true`, the "pinch to rotate and zoom" interaction is enabled. An `Object` value is passed as options to [`TouchZoomRotateHandler#enable`](#TouchZoomRotateHandler#enable).
  * @param {boolean} [options.trackResize=true]  If `true`, the map will automatically resize when the browser window resizes.
  * @param {LngLatLike} [options.center=[0, 0]] The inital geographical centerpoint of the map. If `center` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]`.
  * @param {number} [options.zoom=0] The initial zoom level of the map. If `zoom` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.