Add "zoom aournd center" option to scrollZoom and touchZoomRotate #3876

mohsen1 · 2016-12-31T21:03:18Z

Launch Checklist

briefly describe the changes in this PR
This change list is implementing Add center parameter to ScrollZoom and TouchZoomRotate handlers #3780.
write tests for all new functionality
document any changes to public APIs
Updated JSDoc, please let me know what else needs to be changed
post benchmark scores
How?
manually test the debug page
Works in debug page

jfirebaugh · 2017-01-02T19:19:48Z

Thanks for contributing @mohsen1! I have a suggestion for how we could make the public API being added here more coherent and amenable to future expansions: let's make the optional argument passed to enable an "options" object rather than a single string. That way use of the API can be more self-explanatory: map. doubleClickZoom.enable({around: 'center'}), and we can add additional options without backwards-incompatible API changes. This should extend to handler options passed to the map constructor as well, for example:

var map = new mapboxgl.Map({
   ...,
   doubleClickZoom: { around: 'center' }
});

jfirebaugh · 2017-01-02T19:20:55Z

js/ui/map.js

@@ -40,7 +40,7 @@ const defaultOptions = {
    dragPan: true,
    keyboard: true,
    doubleClickZoom: true,
-    touchZoomRotate: true,
+    touchZoomRotate: 'center', // temp


Don't forget to remove this.

jfirebaugh

Per above.

jfirebaugh · 2017-01-04T22:58:00Z

js/ui/handler/scroll_zoom.js

@@ -37,14 +37,23 @@ class ScrollZoomHandler {
    /**
     * Enables the "scroll to zoom" interaction.
     *
+     * @param {boolean|Object} options If {around: "center"} is passed, map will zoom around center of map


boolean|Object here is incorrect. options should be documented as an optional object, and options.around as a separate subitem.

jfirebaugh · 2017-01-04T22:58:47Z

js/ui/handler/scroll_zoom.js

     * @example
     *   map.scrollZoom.enable();
+     * @example
+     *  map.scrollZoom.enable('center')


Example needs to be updated.

jfirebaugh · 2017-01-04T23:01:16Z

js/ui/map.js

@@ -101,13 +101,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, if {around: 'center'} is passed interaction is enabled and map zooms around the center (see [`ScrollZoomHandler`](#ScrollZoomHandler)).


Rather than re-documenting the specific option, here the documentation can simply state that if an Object is passed it can contain any options supported by ScrollZoomHandler#enable.

jfirebaugh · 2017-01-04T23:01:27Z

js/ui/map.js

 * @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, if {around: 'center'} is passed interaction is enabled and map zooms around the center (see [`TouchZoomRotateHandler`](#TouchZoomRotateHandler)).


jfirebaugh · 2017-01-04T23:01:34Z

js/ui/handler/touch_zoom_rotate.js

@@ -41,13 +41,22 @@ class TouchZoomRotateHandler {
    /**
     * Enables the "pinch to rotate and zoom" interaction.
     *
+     * @param {boolean|Object} options If {around: "center"} is passed, map will zoom around the center


jfirebaugh · 2017-01-04T23:01:39Z

js/ui/handler/touch_zoom_rotate.js

     * @example
     *   map.touchZoomRotate.enable();
+     * @example
+     *   map.touchZoomRotate.enable('center');


jfirebaugh · 2017-01-10T22:08:51Z

js/ui/handler/touch_zoom_rotate.js

     */
-    enable() {
+    enable(options = {}) {


Our code conventions don't currently permit the use of default parameters.

so back to if (typeof options === 'object' && ...?

I would just write this._aroundCenter = options && options.around === 'center'.

jfirebaugh · 2017-01-17T04:36:23Z

Thanks Mohsen!

skol-pro · 2019-11-24T11:15:44Z

Functionality finally not implemented ? scrollZoom is just accepting boolean...

Daandeve · 2019-12-03T18:59:24Z

@skol-pro It is implemented in mapboxgl.
Usage:
//for touch
touchZoomRotate: {around: "center"}
//for scroll
scrollZoom: {around: "center"}

skol-pro · 2019-12-04T08:28:56Z

@Daandeve But not implemented in Mapbox GL JS ?
Getting the following warning for both options using mapbox-gl@^1.5.1:
Type '{ around: string; }' is not assignable to type 'boolean'.ts(2322)

skol-pro · 2019-12-04T08:50:41Z

Seems to work forcing the options. I guess the MapboxOptions interface is not up to date.

ryanhamley · 2019-12-04T20:51:03Z

@skol-pro There's documentation in the Map options as shown below, as well as in the handler docs.

I agree that it could be more explicit though. We're planning on doing some major refactoring of our handlers over the next few months though which will likely include rewriting many of the docs, so we'll try to make things like this more clear. Thanks!

skol-pro · 2019-12-05T07:38:03Z

Thanks @ryanhamley ! I was actually speaking about the @types/mapbox-gl that does not seems up to date.
Still, managed to make zoom centered working with workaround to bypass typescript complaining, thanks !

mohsen1 changed the title ~~Add "zoom aournd center" option to scrollZoom~~ Add "zoom aournd center" option to scrollZoom and touchZoomRotate Dec 31, 2016

mohsen1 mentioned this pull request Dec 31, 2016

Allow each edge to have different padding when fitting to bounds #1339

Closed

jfirebaugh reviewed Jan 2, 2017

View reviewed changes

jfirebaugh suggested changes Jan 2, 2017

View reviewed changes

jfirebaugh suggested changes Jan 4, 2017

View reviewed changes

lucaswoj added the needs revision label Jan 5, 2017

jfirebaugh suggested changes Jan 10, 2017

View reviewed changes

Add "zoom around center" option

7974caa

jfirebaugh force-pushed the around-center-pinch-zoom branch from 1824914 to 7974caa Compare January 17, 2017 04:25

jfirebaugh approved these changes Jan 17, 2017

View reviewed changes

jfirebaugh merged commit 7c72ca4 into mapbox:master Jan 17, 2017

jfirebaugh mentioned this pull request Jan 17, 2017

Add center parameter to ScrollZoom and TouchZoomRotate handlers #3780

Closed

scortumee mentioned this pull request Mar 2, 2022

How to keep camera locked at the center of the map while using pinch(scale) gesture mapbox/mapbox-gl-native-ios#648

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "zoom aournd center" option to scrollZoom and touchZoomRotate #3876

Add "zoom aournd center" option to scrollZoom and touchZoomRotate #3876

mohsen1 commented Dec 31, 2016 •

edited

Loading

jfirebaugh commented Jan 2, 2017

jfirebaugh Jan 2, 2017

jfirebaugh left a comment

jfirebaugh Jan 4, 2017

jfirebaugh Jan 4, 2017

jfirebaugh Jan 4, 2017

jfirebaugh Jan 4, 2017

jfirebaugh Jan 4, 2017

jfirebaugh Jan 4, 2017

jfirebaugh Jan 10, 2017

mohsen1 Jan 10, 2017

jfirebaugh Jan 10, 2017

jfirebaugh commented Jan 17, 2017

skol-pro commented Nov 24, 2019

Daandeve commented Dec 3, 2019

skol-pro commented Dec 4, 2019 •

edited

Loading

skol-pro commented Dec 4, 2019

ryanhamley commented Dec 4, 2019

skol-pro commented Dec 5, 2019

Add "zoom aournd center" option to scrollZoom and touchZoomRotate #3876

Add "zoom aournd center" option to scrollZoom and touchZoomRotate #3876

Conversation

mohsen1 commented Dec 31, 2016 • edited Loading

Launch Checklist

jfirebaugh commented Jan 2, 2017

Choose a reason for hiding this comment

jfirebaugh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jfirebaugh commented Jan 17, 2017

skol-pro commented Nov 24, 2019

Daandeve commented Dec 3, 2019

skol-pro commented Dec 4, 2019 • edited Loading

skol-pro commented Dec 4, 2019

ryanhamley commented Dec 4, 2019

skol-pro commented Dec 5, 2019

mohsen1 commented Dec 31, 2016 •

edited

Loading

skol-pro commented Dec 4, 2019 •

edited

Loading