Rebuilding Stamen’s iconic map styles with Stadia Maps

YouTube link: https://www.youtube.com/watch?v=qewW7-z8W2I&list=PLqjPa29lMiE3msEjJS-QE5MTq1Ew0djYd&index=60

State of the Map US
Salt Lake City, June 8, 2024

Links from the presentation:

https://subdued.social/@alan
https://vis.social/@stamen
https://en.osm.town/@stadiamaps

“Our Brilliant Friend: Stamen and OpenStreetMap through the years” https://sta.mn/q7s

Luke Seelenbinder at SotM EU: “Stadia x Stamen: A New Era for Stamen Map Tiles” https://sta.mn/kdc

Null Island GeoJSON https://sta.mn/62d

“Familiar maps, brand new data” https://sta.mn/z4q

Terrain behind the scenes” https://sta.mn/q2c

“Helvetica is more than a font, it’s a state of mind” https://sta.mn/dgc

Developing an Open-Source Cartography Toolkit” https://sta.mn/hbj

“Harnessing modern vector cartography” https://sta.mn/f3j

Client-side language switching demo: https://etymology.dsantini.it

“The end of the road for Stamen’s legacy map tiles” https://sta.mn/hh4

“Watercolor process” https://sta.mn/qn4

”Watercolor map tiles now in the Smithsonian’s permanent collection” https://sta.mn/x4q

Transcript

1. _sta.mn / qwc_ Rebuilding Stamen’s map styles with Stadia Maps #SOTMUS2024 sta.mn / qwc Alan McConchie Lead Cartographer Stamen Design subdued.social/@alan vis.social/@stamen en.osm.town/@stadiamaps State of the Map US, Salt Lake City, June 8, 2024 Slides: _sta.mn / qwc_ Rebuilding Stamen’s iconic map styles with Stadia Maps
2. _sta.mn / qwc_ 1. A brief history
3. _sta.mn / qwc_ About Stamen Design • Visualization design firm focused on data & cartography • Founded in 2001 3
4. _sta.mn / qwc_ Origins of the map styles • Three raster map styles: Toner, Terrain, and Watercolor. • Funded by the Knight Foundation • maps.stamen.com launched in 2012 • Freely available to all, used by millions 4 “Our Brilliant Friend: Stamen and OpenStreetMap through the years” _sta.mn / q7s_
5. _sta.mn / qwc_ Times have changed • Missing tiles • Old data • High cost • Unsupported 5
6. _sta.mn / qwc_ Does it still spark joy? It really ties the room together! 6 Attitudes of Stamen staff after ten years:
7. _sta.mn / qwc_ 2. Rebuilding the styles
8. _sta.mn / qwc_ Enter Stadia Maps • Location APIs for developers • Private, affordable, supported • Founded in 2016 8 Luke Seelenbinder at SotM EU: “Stadia x Stamen: A New Era for Stamen Map Tiles” _sta.mn / kdc_
9. _sta.mn / qwc_ Technical Challenges • People really like these tilesets: lots of traffic. • The “3” tilesets are really 10+ separate styles. • The old tilesets were spread across multiple domains for secure and insecure traffic. • Terrain needs a lot of data inputs: Natural Earth, OpenMapTiles, EU Global Landcover, Elevation 9
10. _sta.mn / qwc_ Whimsical challenges 10 Null Island GeoJSON _sta.mn / 62d_ maps.stamen.com/toner/#18/0/0
11. _sta.mn / qwc_ Cartographic challenges How do we re-create the look and feel of the old raster style, using all new data, new design tools, and a completely different rendering stack? 11 before after “Familiar maps, brand new data” _sta.mn / z4q_
12. _sta.mn / qwc_ Cover the land, ruin the map? Using multiple, divergent sources of landcover is tricky, but necessary! Blending data at different scales and resolutions requires different blur effects in a vector style, as compared to the original raster. 12 early draft final original raster “Terrain behind the scenes” _sta.mn / q2c_
13. _sta.mn / qwc_ early draft final original raster 13
14. _sta.mn / qwc_ Typographic details Stamen is famous for loving the Helvetica typeface, but surprisingly the legacy raster style had been using Arial all this time! One of these uses Helvetica, the other uses Inter. Can you tell which is which? 14 “Helvetica is more than a font, it’s a state of mind” _sta.mn / dgc_ Instead of using the proprietary Helvetica font for the updated map, we opted for the open-licensed alternative “Inter”
15. _sta.mn / qwc_ Sharpening our tools Building vectorized versions of our basemaps helped us continue to refine our internal map design tools: • Maperture, a side-by-side viewer and debugging tool • Chartographer for visualizing stylesheets in chart form • Our style diff tool for viewing stylesheet changes during development • Figmasset for building map icons • Our build system for generating a set of related stylesheets based on shared templates • and more… 15 “Developing an Open-Source Cartography Toolkit” _sta.mn / hbj_ Maperture in action
16. _sta.mn / qwc_ 3. The results
17. _sta.mn / qwc_ Benefits of vector tiles 17 “Harnessing modern vector cartography” _sta.mn / f3j_
18. _sta.mn / qwc_ Benefits of vector tiles 18 Client-side language switching demo: _etymology.dsantini.it_
19. _sta.mn / qwc_ Making the transition 19 “The end of the road for Stamen’s legacy map tiles” _sta.mn / hh4_
20. _sta.mn / qwc_ 20 Before / After
21. _sta.mn / qwc_ 21 Before / After
22. _sta.mn / qwc_ 22 Before / After
23. _sta.mn / qwc_ Use the styles: Rasterized versions available as a drop-in update for Leaflet, or switch to the vector styles with MapLibre. API key required, but with a generous free tier for non-commercial users. Styles are licensed under CC BY-NC-SA 4.0 (or for commercial use when used with Stadia’s platform) Get started at stadiamaps.com/stamen 23
24. _sta.mn / qwc_ But what about Watercolor? The original codebase was even older than Toner and Terrain (which had at least been updated in 2016). It uses extremely customized Mapnik code, and depends on lots of raster image processing operations. Hard to recreate with vector cartography! For now, the archived Watercolor raster tiles are available from Stadia, but no vector version (yet?) 24 Blog post from 2012: “Watercolor process” _sta.mn / qn4_
25. _sta.mn / qwc_ Museum-hosted map tiles! In 2021, Watercolor tiles and code entered the collection of the Cooper Hewitt, the Smithsonian Design Museum. Go see it in New York now through September 2, 2024! Access the Watercolor tiles from the Smithsonian’s servers: github.com/CooperHewittCollection/watercolor_examples 25 ”Watercolor map tiles now in the Smithsonian’s permanent collection” _sta.mn / x4q
26. _sta.mn / qwc_ Where next? • Further technical and cartographic optimization of the redesigns. • More refinement of our custom tools we used to build these styles. • Improvement of classification of the input data schema. • Re-create Watercolor using vector tooling!? What would you like to see next? Let us know! info@stamen.com vis.social/@stamen en.osm.town/@stadiamaps subdued.social/@alan 26
27. _sta.mn / qwc_ Rebuilding Stamen’s map styles with Stadia Maps #SOTMUS2024 sta.mn / qwc Bonus: More before & after images 27
28. _sta.mn / qwc_ before after 28
29. _sta.mn / qwc_ before / after 29
30. _sta.mn / qwc_ before / after 30
31. _sta.mn / qwc_ before / after 31