Alberto Alberto - 3 months ago 43
Javascript Question

Can we make ol.Overlay draggable on OpenLayers 3?

I am trying to make that an ol.overlay is draggable, but I am not able to do it. I have found this example (http://openlayers.org/en/v3.2.1/examples/drag-features.html?q=drag), but it is done using ol.Features and what I need is an overlay, since I can use a custom -html div- for showing what I need. I have also found a very interesting example that is able to do what I want, but it is done using google maps v3 and I need it for ol3.

Thanks in advance.

Answer

UPDATE:

There's no need of this ol.Map.prototype.forEachOverlayAtPixel method (see https://github.com/openlayers/ol3/issues/5760).

Just register a mousedown listener on the DOM overlay element and you're good to go. Fiddle updated.


ol.Overlay is a poor type in OL3 but with some work, yes, you can achieve it. ol.Feature is the all-powerful and if you really need ol.Overlay I came up this demo fiddle.

The idea is:

  • Listen for pointerdown map event and check if there's a overlay at the clicked pixel;

    • ol.Map.prototype.forEachOverlayAtPixel - just created for question
  • Deactivate ol.interaction.DragPan - map panning;

  • Listen for pointermove and set the overlay position;

  • Listen for pointerup and restore ol.interaction.DragPan;