Stamen’s Checklist for Maps
Recently the fine folks at WIRED’s Map Lab asked for a checklist for maps. We have a list of interaction design-related things we like to ensure across all of our map projects which we thought you might be interested to see. Happy mapping!
- URLs should contain and maintain state, by default. This feature means that you can deep-link into any place, any zoom and even any data layer’s state.
- Drag/Zoom/Pan affects the URL, and vice versa. Check out Stamen alum Michael Evans’ leaflet-hash on Github.
- Clicking UI elements affects the URL too, e.g. show/hide legend should also affect the URL.
2. The map should be integrated with any external displays, so one affects the other in real time. You can see this at work on the Parks Conservancy Trails Page.
3. The application should know when all required tiles are loaded, and act accordingly.
- e.g. Make sure tiles are loaded before any animation begins.
- e.g. Don’t necessarily display data overlays before the tiles have loaded, unless they’re easy to place geographically, which is rare.
4. Mouse scroll should not affect map zoom level when the map is embedded in a page. There’s little more irritating than scrolling quickly down a page and getting stuck way zoomed out of a map you hadn’t intended to interact with.
5. Double click should zoom into the click point on zoom, not the center of the map.
6. No flickering (unless it’s intentional). Work hard to make map transitions as smooth as silk.
- All data and tiles should load smoothly. Tiled data is good for this, as are compression and content delivery networks.
- Wait until the new data is ready and loaded before hiding older data. (Avoid showing grey tiles.)
- e.g. switching between map styles. Don’t throw the old stuff away and show grey tiles in between the switch.
7. If you can, make a full screen version, or at least make the map as BIG AS POSSIBLE, like on the Chesapeake Bay Grasses project.
What’s on your list? Anything you’d like to see added to ours? Tweet @stamen + @wiredmaps + #maplist, or send an email to info [at] stamen [dot] com.
