Search code examples
javascriptdraggableopenlayers-3overlays

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.

Solution

  • 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;