CODEWITHSUNDEEP
javascriptopenlayers-3pinchzoom
smoench
smoench

Reputation: 11

Openlayers-3: How do I bind zoom-events to Controls or document

How do I bind zoom-events to an ol.Control or on document?

Openlayers (3.7.0) binds serveral zoom-events (interactions, pinchzoom) on .ol-viewport, but they are only triggered on the <canvas>-Element.

In my case I do a pinchzoom on a custom control (a div with some text) and the browser is zooming instead of the map/view.

How I'm able to change that behaviour?

A solution on document would be great, because if a layer is still loading and I do a pinchzoom it is also triggered to the browser.

Upvotes: 1

Views: 1174

Answers (1)

Alexandre Dub&#233;
Alexandre Dub&#233;

Reputation: 2829

Controls are added inside the ol-overlaycontainer-stopevent div by default, which prevent events to propagate to the map. See in: http://openlayers.org/en/v3.7.0/apidoc/ol.control.Control.html, more specifically:

A control is a visible widget with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only; the position is determined using CSS. By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.

There's an other div that doesn't: ol-overlaycontainer, which can be obtained using map.getOverlayContainer(). Unfortunately, this method doesn't have the @api flag, i.e. it is not exported. You can still obtain it using map.getViewport() and use (let's say) jQuery to find it inside the map viewport.

Give that div as target of your control and events should be propagated down to the map. From map.js, getOverlayContainer:

/**
 * Get the element that serves as the container for overlays.  Elements added to
 * this container will let mousedown and touchstart events through to the map,
 * so clicks and gestures on an overlay will trigger {@link ol.MapBrowserEvent}
 * events.
 * @return {Element} The map's overlay container.
 */

Upvotes: 1

Related Questions