The Elusive Draggable Map Popup
In certain cases, you may want the user to be able to move the popup by dragging the mouse cursor. But there’s no way to enable that in the API!
Allowing the user to move the popup is not common and probably not best practice in most cases. The popup displays attributes about a feature, and the alignment of the popup near the feature tells the user the which feature’s attributes the popup is showing.
You might want to allow the user to move the popup because it “gets in the way”. This is usually not actually a problem because:
- It’s quite easy to close the popup by clicking on the close button or clicking anywhere on the map, and
- There’s the “docking” option which places the popup in one of the corners of the map.
Since the popup DOM node is created each time the popup opens, it sets up and destroys the Interact.js listeners when the popup opens and closes using the
Other than that, the code is straightforward Interact.js.
Click here for the full code and interactive sample:
In what type of mapping applications have you used draggable popups? Let me know.
I periodically write about technology, maps, open data, and other software topics. To get updates about new posts: