15

Openlayers draggable popups

Share Button

Problem:

Recently I have been working on Openlayers, vector features where the user can draw different vector features on the Openlayers map and than show the results like area covered or radius of the polygon drawn.

The best way I could found was to use Openlayers Popup but in this case a ‘draggable popup‘ so that user can drag this information popup around to see the map and features around. I didn’t find any built-in property to do so, so I tried jQuery-ui draggable plugin to drag the popup. It worked fine other than, when you double click the popup and the popup will stick to your mouse pointer forever and there is no way but to refresh the page to get rid of it. Here is the code I was trying:


Live Demo of the problem

All I can think of this problem is that there is a conflict between double click event in jQuery and Openlayers. I tried to stop propagation for double click event on popup and tried few other ways but it didn’t help.

Solution:

Thanks to Matt Walker for the perfect solution by coding an extension for Openlayers popup which enables it to be draggable.

Live Demo of the solution

Here is code which enables an Openlayers popup to be draggable:

Please comment if you know a better/easy way to make Openlayers popup draggable.

Share Button
  • http://www.aparadekto.com aparadekto

    Hey, I can’t view your site properly within Opera, I actually hope you look into fixing this.

    • http://www.aamirafridi.com Aamir Afridi

      Thank you for informing me. I will make sure it work on Opera too.

  • Ivor

    Works like a charm. The Anchored/Framed/
    Cloud popups act weird while dragging because they’re being repositioned every time. I fixed this by using the ‘old’ moveTo method when the dragControl.down == true ;


    popup.moveTo = function() {
    if (dragPopup.down) {
    OpenLayers.Popup.prototype.moveTo.apply(this, arguments);
    } else {
    OpenLayers.Popup.Anchored.prototype.moveTo.apply(this, arguments);
    }
    }

  • Ivor

    Another problem for me: I use input elements in my popups and events are captured. Fixed by wrapping mouseUp and mouseDown:

    if ( ! $(evt.target).is(':input') ) { /* original code */}

    • http://www.aamirafridi.com Aamir Afridi

      Thanks Ivor for the updates.

      Can you please copy paste whole code (with your fixes) somewhere so I can update the post.

  • Simonsays

    Works awesome, too bad it doesn’t works on an iPad (yet)

  • Kristian

    Had the same issues. Thanks for the solution; seems to work great!

  • ash

    where do I save the class OpenLayers.Control.DragPopup? In the ‘\OpenLayers\lib\OpenLayers\Control’ folder or ‘\OpenLayers\lib\OpenLayers\Popup’ folder?

    • http://www.aamirafridi.com Aamir Afridi

      In any directory you want but just make sure you included it after all js files. Check the demo (solution)

  • dstroeer

    Hey,
    this extension works very fine! But I have an special issue. I use popups that includes a jQuery slider. When I use the draggable popup, I can’t control the slider any more. Is it possible, to define an explicit area in the popup that is draggable?
    Thx

    • http://www.aamirafridi.com Aamir Afridi

      That will be a bit tricky :/
      Not sure sorry.

  • alvaroggallardo

    Continue with the Ivor coment.

    I get this issue with his code but I have done some modificaction to fix the problem. I don`t no why but my code only works in this way.

    var dragControl = new OpenLayers.Control.DragPopup(popup);
    dragControl.setMoveSelector(“.dragMeClass”);

    if(dragControl.down == false){
    popup.moveTo = function() {
    if (dragControl.down) {
    OpenLayers.Popup.prototype.moveTo.apply(this, arguments);

    } else {
    OpenLayers.Popup.Anchored.prototype.moveTo.apply(this, arguments);
    }
    }
    }

    ciudad.popup = popup;
    mapa.addPopup(popup);

    mapa.addControl(dragControl);

  • alvaroggallardo

    It is possible to define an area to drag the popup. In that page you have a review of the class that include a method to set the selector área.

    http://blog.matoski.com/articles/openlayers-drag-popups

  • Leonard

    I have used this solution for some time now, but it worked with OpenLayers 2.11. I have now updated to OpenLayers 2.13.1 and suddenly, the mouseup event stopped working. This keeps the popup attached to the mouse cursor until refreshing the page. The only other way to get rid of the attached popup is to frantically keep clicking and dragging the map until suddenly the mouseup event is triggered once. I really don’t know why it works once while it won’t work normally. Could you help me debugging this?

    I have also asked this question on stackoverflow as a comment on one of your answers: http://stackoverflow.com/questions/12157961/how-to-make-openlayers-popup-draggable#comment37946529_12555176

    • http://www.aamirafridi.com/ Aamir Afridi

      Sorry, I haven’t use Openlayers since 3 years so cannot help with this.

Copyright © 2014 — musings of Aamir Afridi