_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 

_sta.mn / qwc_ 1. A brief history 

_sta.mn / qwc_ About Stamen Design ● Visualization design firm focused on data & cartography ● Founded in 2001 3 

_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_ 

_sta.mn / qwc_ Times have changed ● Missing tiles ● Old data ● High cost ● Unsupported 5 

_sta.mn / qwc_ Does it still spark joy? It really ties the room together! 6 Attitudes of Stamen staff after ten years: 

_sta.mn / qwc_ 2. Rebuilding the styles 

_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_ 

_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 

_sta.mn / qwc_ Whimsical challenges 10 Null Island GeoJSON _sta.mn / 62d_ maps.stamen.com/toner/#18/0/0 

_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_ 

_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_ 

_sta.mn / qwc_ early draft final original raster 13 

_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” 

_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 

_sta.mn / qwc_ 3. The results 

_sta.mn / qwc_ Benefits of vector tiles 17 “Harnessing modern vector cartography” _sta.mn / f3j_ 

_sta.mn / qwc_ Benefits of vector tiles 18 Client-side language switching demo: _etymology.dsantini.it_ 

_sta.mn / qwc_ Making the transition 19 “The end of the road for Stamen’s legacy map tiles” _sta.mn / hh4_ 

_sta.mn / qwc_ 20 Before / After 

_sta.mn / qwc_ 21 Before / After 

_sta.mn / qwc_ 22 Before / After 

_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 

_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_ 

_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 

_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! [email protected] vis.social/@stamen en.osm.town/@stadiamaps subdued.social/@alan 26 

_sta.mn / qwc_ Rebuilding Stamen’s map styles with Stadia Maps #SOTMUS2024 sta.mn / qwc Bonus: More before & after images 27 

_sta.mn / qwc_ before after 28 

_sta.mn / qwc_ before / after 29 

_sta.mn / qwc_ before / after 30 

_sta.mn / qwc_ before / after 31