diff --git a/js/ui/bind_handlers.js b/js/ui/bind_handlers.js index 45be070efd7..201d9ff87b7 100644 --- a/js/ui/bind_handlers.js +++ b/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]); } } diff --git a/js/ui/handler/scroll_zoom.js b/js/ui/handler/scroll_zoom.js index 2260bd44bcc..18f2e60e33b 100644 --- a/js/ui/handler/scroll_zoom.js +++ b/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 }); diff --git a/js/ui/handler/touch_zoom_rotate.js b/js/ui/handler/touch_zoom_rotate.js index b2559c91f8b..e6b584e5850 100644 --- a/js/ui/handler/touch_zoom_rotate.js +++ b/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 }); } diff --git a/js/ui/map.js b/js/ui/map.js index e9a57d8d46b..1d38328a6f9 100755 --- a/js/ui/map.js +++ b/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`.