Alberto Alberto - 1 year ago 179
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 (, 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 Source


There's no need of this ol.Map.prototype.forEachOverlayAtPixel method (see

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;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download