The Elusive Draggable Map Popup

In the ArcGIS API 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.

Map of the USA with a popup on Sterling, CO

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:

  1. It’s quite easy to close the popup by clicking on the close button or clicking anywhere on the map, and
  2. 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 API for JavaScript. Other than that, the code is straightforward Interact.js. Click here for the full code and interactive sample:

View the 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:

See Also