The Elusive Draggable Map Popup
In the ArcGIS Maps SDK for JavaScript, the popup widget displays the attributes for individual features on the map. It appears when the user clicks on a feature on the map.
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.
If your use case overrides all of those considerations and you do want to allow dragging, here is a sample using the Interact.js JavaScript library.
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 watch functionality of the ArcGIS Maps SDK for JavaScript.
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.
Subscribe
Get an email summary of my blog posts (four per year):
... or follow the blog here: