[{"data":1,"prerenderedAt":227},["ShallowReactive",2],{"footer-learn-links":3,"site-prefooter-cta":16,"blog-\u002Fblog\u002Fredesigned-land-cover-layers\u002F":24,"related-blog-\u002Fblog\u002Fredesigned-land-cover-layers\u002F":169,"blog-author-\u002Fblog\u002Fredesigned-land-cover-layers\u002F":216},[4,7,10,13],{"title":5,"path":6},"What Is a Distance Matrix API?","\u002Flearn\u002Fdistance-matrix-api",{"title":8,"path":9},"Can You Store Geocoding Results?","\u002Flearn\u002Fgeocoding-data-storage",{"title":11,"path":12},"What Does a \"Free\" Map API Actually Cost?","\u002Flearn\u002Fwhat-does-a-free-map-api-cost",{"title":14,"path":15},"What Is the Best Geocoding API?","\u002Flearn\u002Fbest-geocoding-api",{"id":17,"extension":18,"heading":19,"meta":20,"stem":21,"text":22,"__hash__":23},"site\u002Fsite\u002Fprefooter-cta.yml","yml","Business Outcomes That Fuel Your Growth",{},"site\u002Fprefooter-cta","With Stadia Maps, you build the solutions that matter. Logistics platforms provide accurate ETAs, fleet management apps reduce fuel costs, and emergency dispatch systems improve response times.","XztWiZDFyAC0XCoeYLLQrcyaVmP8uvGWALRS354c9I4",{"id":25,"title":26,"abstract":27,"author":28,"body":29,"description":143,"extension":144,"head":27,"image":145,"imageAlt":146,"keywords":147,"meta":158,"modified":27,"navigation":159,"path":160,"proficiencyLevel":27,"published":161,"rawbody":162,"schemaOrg":27,"schemaType":27,"section":163,"seo":164,"stem":167,"__hash__":168},"blog\u002Fblog\u002Fredesigned-land-cover-layers.md","Redesigned Land Cover Layers at Low Zoom",null,"ian-wagner",{"type":30,"value":31,"toc":130},"minimark",[32,39,44,52,56,59,62,65,69,74,85,94,97,102,106,115,119,123,126],[33,34,35],"blockquote",{},[36,37,38],"p",{},"We added global land cover to our Outdoors style and paid more attention to how it's processed and presented in Alidade Bright, Outdoors, and Stamen Terrain.",[40,41,43],"h2",{"id":42},"what-we-changed","What We Changed",[36,45,46,47,51],{},"We improved the resolution of our satellite land cover dataset to z7 and expanded the classes it covers. We also made a lot of features from OSM ",[48,49,50],"code",{},"landcover"," show up at earlier zoom levels.",[40,53,55],{"id":54},"two-sources-doing-two-jobs","Two Sources Doing Two Jobs",[36,57,58],{},"Satellite and OSM are good at different things, and our redesign now uses each for its strengths.",[36,60,61],{},"OSM mappers tag features that matter to them: vast forests, large dunes, desert plains, and bare rock on mountains. Nobody maps every parcel of land as grass. Canada is the clearest example. Forest outlines in OSM look patchy and often don't match tree edges.",[36,63,64],{},"Satellite data classifies coarse land cover well. It can reasonably tell grass, forest, crops, and ice apart, but it can't resolve small features. Beaches, village greens, parks, and gardens need precision that matches our base OSM layers, so we pull those features from OSM.",[40,66,68],{"id":67},"where-youll-see-the-difference","Where You'll See the Difference",[70,71,73],"h3",{"id":72},"sand-and-bare-rock-at-low-zoom","Sand and bare rock at low zoom",[36,75,76,84],{},[77,78,83],"a",{"href":79,"rel":80,"target":82},"https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Falidade-bright\u002F",[81],"external","_blank","Alidade Bright"," uses global land cover at low zoom. The desert belt is now covered in sand, and OSM-tagged desert areas stand out as distinct features within it. Previously, those areas were only tagged as \"bare.\"",[36,86,87,88,93],{},"On most of our other styles, and on ",[77,89,92],{"href":90,"rel":91,"target":82},"https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Fstamen-terrain\u002F",[81],"Stamen Terrain",", the effect is less pronounced.",[36,95,96],{},"The OpenMapTiles layer now includes sand and bare rock at low zoom levels. Previously, these rendered only at z7 and up. We now process major features, like glaciers, at lower zooms. We also de-emphasized their colors compared to the previous styling.",[98,99],"content-twenty-twenty",{"after-src":100,"before-src":101},"\u002Fimages\u002Fcontent\u002Fomt-low-zoom-bare-sand-rock-after-2x.png","\u002Fimages\u002Fcontent\u002Fomt-low-zoom-bare-sand-rock-before-2x.png",[70,103,105],{"id":104},"glaciers-and-parks-at-low-zoom","Glaciers and parks at low zoom",[36,107,108,109,114],{},"The ",[77,110,113],{"href":111,"rel":112,"target":82},"https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Foutdoors\u002F",[81],"Outdoors"," style is built for adventurers, hikers, and trailblazers, but until now it used only OSM land cover, and OSM coverage is patchy. Before this release, park styling was drawn over land cover. This release adds global land cover and makes it dominant over park styling. Park borders are unchanged for now. The result is better at low zoom levels.",[98,116],{"after-src":117,"before-src":118},"\u002Fimages\u002Fcontent\u002Fomt-iceland-bare-rock-and-glaciers-after-2x.png","\u002Fimages\u002Fcontent\u002Fomt-iceland-bare-rock-and-glaciers-before-2x.png",[70,120,122],{"id":121},"urban-areas-and-cluster-boundaries","Urban areas and cluster boundaries",[36,124,125],{},"The areas we draw around satellite land cover clusters are now more precise at low and mid zooms.",[98,127],{"after-src":128,"before-src":129},"\u002Fimages\u002Fcontent\u002Fglobal-landcover-urban-terrain-after-2x.png","\u002Fimages\u002Fcontent\u002Fglobal-landcover-urban-terrain-before-2x.png",{"title":131,"searchDepth":132,"depth":132,"links":133},"",4,[134,136,137],{"id":42,"depth":135,"text":43},2,{"id":54,"depth":135,"text":55},{"id":67,"depth":135,"text":68,"children":138},[139,141,142],{"id":72,"depth":140,"text":73},3,{"id":104,"depth":140,"text":105},{"id":121,"depth":140,"text":122},"We raised satellite land cover resolution to z7, added global land cover to the Outdoors style, and now pull fine detail from OpenStreetMap.","md","\u002Fimages\u002Fog\u002Fredesigned-land-cover-layers.png","Redesigned Land Cover Layers: Sharper Detail at Low Zoom | Stadia Maps",[148,149,150,151,152,153,83,92,154,155,156,157],"land cover","landcover layer","satellite land cover","OpenStreetMap landcover","OpenMapTiles schema","Outdoors map style","low zoom detail","glaciers and bare rock","vector tiles","basemap cartography",{},true,"\u002Fblog\u002Fredesigned-land-cover-layers","2026-10-19","---\ntitle: Redesigned Land Cover Layers at Low Zoom\ndescription: We raised satellite land cover resolution to z7, added global land cover to the Outdoors style, and now pull fine detail from OpenStreetMap.\nauthor: ian-wagner\nimage: \u002Fimages\u002Fog\u002Fredesigned-land-cover-layers.png\nimageAlt: \"Redesigned Land Cover Layers: Sharper Detail at Low Zoom | Stadia Maps\"\nkeywords:\n  - land cover\n  - landcover layer\n  - satellite land cover\n  - OpenStreetMap landcover\n  - OpenMapTiles schema\n  - Outdoors map style\n  - Alidade Bright\n  - Stamen Terrain\n  - low zoom detail\n  - glaciers and bare rock\n  - vector tiles\n  - basemap cartography\npublished: 2026-10-19\nsection: Maps\nseo:\n  title: \"Redesigned Land Cover Layers: Sharper Detail at Low Zoom\"\n  ogTitle: \"Redesigned Land Cover Layers: Sharper Detail at Low Zoom\"\n  description: Satellite data classifies coarse land cover; OpenStreetMap resolves small features. Redesigned land cover layers combine both for sharper detail at low zoom.\n---\n\n> We added global land cover to our Outdoors style and paid more attention to how it's processed and presented in Alidade Bright, Outdoors, and Stamen Terrain.\n\n## What We Changed\n\nWe improved the resolution of our satellite land cover dataset to z7 and expanded the classes it covers. We also made a lot of features from OSM `landcover` show up at earlier zoom levels.\n\n## Two Sources Doing Two Jobs\n\nSatellite and OSM are good at different things, and our redesign now uses each for its strengths.\n\nOSM mappers tag features that matter to them: vast forests, large dunes, desert plains, and bare rock on mountains. Nobody maps every parcel of land as grass. Canada is the clearest example. Forest outlines in OSM look patchy and often don't match tree edges.\n\nSatellite data classifies coarse land cover well. It can reasonably tell grass, forest, crops, and ice apart, but it can't resolve small features. Beaches, village greens, parks, and gardens need precision that matches our base OSM layers, so we pull those features from OSM.\n\n## Where You'll See the Difference\n\n### Sand and bare rock at low zoom\n\n[Alidade Bright](https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Falidade-bright\u002F) uses global land cover at low zoom. The desert belt is now covered in sand, and OSM-tagged desert areas stand out as distinct features within it. Previously, those areas were only tagged as \"bare.\"\n\nOn most of our other styles, and on [Stamen Terrain](https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Fstamen-terrain\u002F), the effect is less pronounced.\n\nThe OpenMapTiles layer now includes sand and bare rock at low zoom levels. Previously, these rendered only at z7 and up. We now process major features, like glaciers, at lower zooms. We also de-emphasized their colors compared to the previous styling.\n\n:content-twenty-twenty{after-src=\"\u002Fimages\u002Fcontent\u002Fomt-low-zoom-bare-sand-rock-after-2x.png\" before-src=\"\u002Fimages\u002Fcontent\u002Fomt-low-zoom-bare-sand-rock-before-2x.png\"}\n\n### Glaciers and parks at low zoom\n\nThe [Outdoors](https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Foutdoors\u002F) style is built for adventurers, hikers, and trailblazers, but until now it used only OSM land cover, and OSM coverage is patchy. Before this release, park styling was drawn over land cover. This release adds global land cover and makes it dominant over park styling. Park borders are unchanged for now. The result is better at low zoom levels.\n\n:content-twenty-twenty{after-src=\"\u002Fimages\u002Fcontent\u002Fomt-iceland-bare-rock-and-glaciers-after-2x.png\" before-src=\"\u002Fimages\u002Fcontent\u002Fomt-iceland-bare-rock-and-glaciers-before-2x.png\"}\n\n### Urban areas and cluster boundaries\n\nThe areas we draw around satellite land cover clusters are now more precise at low and mid zooms.\n\n:content-twenty-twenty{after-src=\"\u002Fimages\u002Fcontent\u002Fglobal-landcover-urban-terrain-after-2x.png\" before-src=\"\u002Fimages\u002Fcontent\u002Fglobal-landcover-urban-terrain-before-2x.png\"}\n","Maps",{"title":165,"ogTitle":165,"description":166},"Redesigned Land Cover Layers: Sharper Detail at Low Zoom","Satellite data classifies coarse land cover; OpenStreetMap resolves small features. Redesigned land cover layers combine both for sharper detail at low zoom.","blog\u002Fredesigned-land-cover-layers","xf5GMdncsxjnHSsKNevcBH-DHS_jyIeDGVEbgl512lw",[170,185,200],{"title":171,"description":172,"path":173,"published":174,"keywords":175,"rawbody":184},"Revisiting the Cartography Behind Stamen Terrain","Our recent water layer and water label changes reshaped how Stamen Terrain renders coastlines, fjords, and lakes. Four before-and-after comparisons show the difference.","\u002Fblog\u002Frevisiting-the-cartography-behind-stamen-terrain","2026-09-14",[92,176,177,156,178,179,180,181,182,183],"map cartography","water rendering","coastline generalization","zoom level discontinuities","OpenStreetMap water data","Natural Earth","tile size","basemap styles","---\ntitle: Revisiting the Cartography Behind Stamen Terrain\ndescription: Our recent water layer and water label changes reshaped how Stamen Terrain renders coastlines, fjords, and lakes. Four before-and-after comparisons show the difference.\nauthor: ian-wagner\nimage: \u002Fimages\u002Fog\u002Frevisiting-the-cartography-behind-stamen-terrain.png\nimageAlt: Revisiting the Cartography Behind Stamen Terrain — Stadia Maps\nkeywords:\n  - Stamen Terrain\n  - map cartography\n  - water rendering\n  - vector tiles\n  - coastline generalization\n  - zoom level discontinuities\n  - OpenStreetMap water data\n  - Natural Earth\n  - tile size\n  - basemap styles\npublished: 2026-09-14\nsection: Maps\nseo:\n  title: \"Stamen Terrain: Improved Water Rendering\"\n  ogTitle: Revisiting the Cartography Behind Stamen Terrain\n  description: How processing OSM water data at every zoom level removed coastline jumps in Stamen Terrain, preserved more detail, and shrank low-zoom vector tiles.\n---\n\n> We've been taking a fresh look at the cartographic decisions at every level of our map stack. Our recent [water layer changes](\u002Fblog\u002Ffixing-missing-water-interactive-basemaps\u002F) and [water label updates](\u002Fblog\u002Fwater-labels-reworked-cleaner-names-smarter-placement\u002F) made a visible difference to the Stamen Terrain style.\n\nRendering water at low- to mid-zoom levels trades detail against tile size. We want to represent the important features without bloating the tiles with irrelevant detail.\n\nFor polygonal features like water bodies, there already exist several generalized, pre-processed global datasets at varying levels of detail. We used these in the past, but found these created visual jumps when going from one zoom level to the next.\n\nThis was sometimes because of incompatible generalization strategies. For example, many low-resolution water datasets intentionally leave out minor features like fjords, which are not strictly important for a general large-area map but are still visible from a great distance. This is fine for their intended use case, but problematic for ours.\n\nThe other broad class of problem we noticed was that switching datasets (e.g., between Natural Earth and OSM) caused larger discontinuities, as the datasets were produced independently and vary at different speeds. We addressed this by processing OSM data for every zoom level. This took some more work to process, but was absolutely worth it!\n\nFor line data, the generalization criteria are different. We, of course, want to simplify the overall shape using similar techniques to those for polygons, but \"importance\" is a bit more difficult to measure. We revisited the thresholds for inclusion at every zoom level.\n\nThe differences in [**Stamen Terrain**](\u002Fexplore-the-map\u002F#style=stamen_terrain&map=10.05\u002F47.3495\u002F9.3513) were striking enough that we've put together this screenshot tour.\n\n## What's Changed\n\nBelow are four side-by-side comparisons of the former style and the new revised version. We used Iceland, Norway, a wider view of Scandinavia, and Lake Ontario as examples. Drag the slider to compare each pair directly.\n\n**Iceland**\n\n:content-twenty-twenty{after-src=\"\u002Fimages\u002Fcontent\u002Ficeland-after.png\" before-src=\"\u002Fimages\u002Fcontent\u002Ficeland-before.png\"}\n\n**Norway**\n\n:content-twenty-twenty{after-src=\"\u002Fimages\u002Fcontent\u002Fnorway-after.png\" before-src=\"\u002Fimages\u002Fcontent\u002Fnorway-before.png\"}\n\n**Scandinavia**\n\n:content-twenty-twenty{after-src=\"\u002Fimages\u002Fcontent\u002Fscandinavia-after.png\" before-src=\"\u002Fimages\u002Fcontent\u002Fscandinavia-before.png\"}\n\n**Lake Ontario**\n\n:content-twenty-twenty{after-src=\"\u002Fimages\u002Fcontent\u002Flake-ontario-after.png\" before-src=\"\u002Fimages\u002Fcontent\u002Flake-ontario-before.png\"}\n\nAcross all examples, we've been able to preserve more detail. And, while it's harder to highlight the difference here, we've removed essentially all discontinuous coastline and waterway jumps between zoom levels.\n\nSomewhat counterintuitively, this update actually reduces vector tile size at lower zoom levels. Even though we increased the level of visual detail on the map, we got much smarter about merging contiguous bodies of water. And of course, we were also able to drop insignificant features more reliably and improve our approach to geometric simplification, both of which contributed to the reduced tile sizes.\n\nIf you look closely, you might also notice some differences in water labels between the before and after images. [You can read more about our recent overhaul of water name labeling here.](\u002Fblog\u002Fwater-labels-reworked-cleaner-names-smarter-placement\u002F)\n\n## What This Means for Your Application\n\nIf you're using [Stamen Terrain](\u002Fproducts\u002Fmaps\u002Fmap-styles\u002F), whether vector or raster, via the endpoints on our [Stamen Terrain style page](https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Fstamen-terrain\u002F), you're automatically getting the improved tiles. No changes needed on your end.\n\n- Water bodies and coastlines render more consistently across zoom levels, with less of the visual noise that comes from switching data sources mid-zoom\n- Lower-zoom tiles are smaller, despite showing more visual detail\n- Improved water feature labeling: maps now show significant bays, lakes, and gulfs at lower zoom levels; show labels for straits (these were not present before); and have cleaner labels for major oceans and seas\n\nFollow us for more updates as we continue updating our cartography. And if you spot anything that looks off, let us know at \u003Csupport@stadiamaps.com>.\n",{"title":186,"description":187,"path":188,"published":189,"keywords":190,"rawbody":199},"Updated Boundary Layers: Consistency and Efficiency Across All Zoom Levels","We rebuilt our boundary processing pipeline so every boundary keeps the same disputed status at every zoom level, with smaller tiles as a side effect.","\u002Fblog\u002Fupdated-boundary-layers-across-zoom-levels","2026-10-05",[191,192,156,193,194,176,195,196,197,198],"boundary layers","disputed boundaries","zoom level consistency","claimed_by property","tile size optimization","OpenStreetMap boundaries","basemap styling","contested borders","---\ntitle: \"Updated Boundary Layers: Consistency and Efficiency Across All Zoom Levels\"\ndescription: We rebuilt our boundary processing pipeline so every boundary keeps the same disputed status at every zoom level, with smaller tiles as a side effect.\nauthor: ian-wagner\nimage: \u002Fimages\u002Fog\u002Fupdated-boundary-layers-across-zoom-levels.png\nimageAlt: \"Updated Boundary Layers: Consistency and Efficiency Across All Zoom Levels — Stadia Maps\"\nkeywords:\n  - boundary layers\n  - disputed boundaries\n  - vector tiles\n  - zoom level consistency\n  - claimed_by property\n  - map cartography\n  - tile size optimization\n  - OpenStreetMap boundaries\n  - basemap styling\n  - contested borders\npublished: 2026-10-05\nsection: Maps\nseo:\n  title: Consistent Boundary Layers at Every Zoom Level\n  ogTitle: Updated Boundary Layers\n  description: Boundaries now carry the same disputed status at every zoom level, the claimed_by property is normalized, and merged geometry makes the tiles smaller.\n---\n\n# Updated Boundary Layers: Consistency and Efficiency Across All Zoom Levels\n\n> Until now, we had several inconsistencies in how we displayed boundaries across zoom levels. Take, for instance, the border between North Korea and South Korea. At mid-zoom levels, we drew three separate lines for the demilitarized zone. Zoom in, and it disappeared. Zoom out, and it disappeared again. Now, every boundary is consistently marked as disputed or non-disputed at every zoom level.\n\nThat happened because we used a mixture of datasets, which made it difficult to deliver a consistent product across zoom levels. A boundary that existed in the source data at zoom 8 didn't necessarily exist at zoom 4, or may have even been in a slightly different place. This also led to some boundaries being marked as disputed at some zoom levels but not others.\n\n## What We Changed\n\nWe overhauled our boundary processing pipeline to remove these inconsistencies and streamlined how we serve them. Now, every boundary is consistently marked as disputed or non-disputed at every zoom level, and we've cleaned up inconsistencies, like the Korean border mentioned in the intro.\n\nWe've also normalized the `claimed_by` property that describes which country or entity claims a border. The values are now ordered consistently across the dataset. This makes it easier to apply styling and enables us to deliver more efficient tiles.\n\n## An Example of Efficiency\n\nWe applied the same boundary optimization we used for water features in our June 2026 update. Each logical boundary is now a single line, and we merge connected features that share the same attributes. For the technical details on how this works, read [How We Fixed Water Feature Rendering Across All Zoom Levels](\u002Fblog\u002Ffixing-missing-water-interactive-basemaps\u002F).\n\nThe visual output stays the same (or even improves in a few cases!) while the tiles are typically smaller. Smaller tiles matter for apps that render millions of boundaries or run on slow connections.\n\n## What's Coming Next\n\nWe're exploring ways to better communicate who claims, recognizes, and disputes contested areas. We're still working out the best way to do this, but the end goal is to surface more nuance so you can construct the view your users expect.\n\nIf you're styling boundaries today and need a particular treatment for disputed areas, tell us what you need at \u003Csupport@stadiamaps.com>. It feeds directly into what we build next.\n",{"title":201,"description":202,"path":203,"published":204,"keywords":205,"rawbody":215},"How to Build a Custom Map Style in 30 Minutes","Fork a Stadia Maps style, recolor it in Maputnik, and host the JSON yourself. A step-by-step walkthrough for making a basemap match your app's design system.","\u002Fblog\u002Fhow-to-build-a-custom-map-style-in-30-minutes","2026-10-01",[206,207,208,209,210,211,156,212,213,214],"custom map style","MapLibre style spec","Maputnik","map branding","basemap customization","Alidade Smooth","style JSON hosting","domain-based authentication","map color palette","---\ntitle: How to Build a Custom Map Style in 30 Minutes\ndescription: Fork a Stadia Maps style, recolor it in Maputnik, and host the JSON yourself. A step-by-step walkthrough for making a basemap match your app's design system.\nauthor: rob-yoegel\nimage: \u002Fimages\u002Fog\u002Fhow-to-build-a-custom-map-style-in-30-minutes.png\nimageAlt: How to Build a Custom Map Style in 30 Minutes — Stadia Maps\nkeywords:\n  - custom map style\n  - MapLibre style spec\n  - Maputnik\n  - map branding\n  - basemap customization\n  - Alidade Smooth\n  - vector tiles\n  - style JSON hosting\n  - domain-based authentication\n  - map color palette\npublished: 2026-10-01\nsection: Maps\nseo:\n  title: Build a Custom Map Style in 30 Minutes\n  ogTitle: How to Build a Custom Map Style in 30 Minutes\n  description: Fork a MapLibre style, recolor it in Maputnik, export the JSON, and host it yourself. Includes authentication setup and answers to common styling problems.\n---\n\n> This walkthrough forks a Stadia Maps style, recolors the background, water, road, and label layers in Maputnik, exports the JSON, and hosts it as a static file. It covers domain-based authentication versus API keys for production, and answers some of the failures developers hit most: blank maps caused by a 401 response; road layers that only partly change color because roads are split across layers by class; and palettes that break at higher zoom levels.\n\nYour app has a design system, but your map doesn't match it.\n\nMaybe the roads are the wrong shade of gray, the labels compete with your UI, or the entire basemap is louder than the data you're trying to put on top of it. You don't need a different map provider. You just need it to look like it belongs in your app.\n\nA [MapLibre style](https:\u002F\u002Fmaplibre.org\u002Fmaplibre-style-spec\u002F) is just a JSON file, so customizing a map shouldn't be a design problem. It should be a file you edit, review, and deploy like any other asset in your repo.\n\n## What You'll End Up With\n\nIn about 30 minutes, you'll have an interactive map that uses your full brand palette: your background color, your road hierarchy, and your label treatment. A single JSON file you host yourself, loaded by a few lines of [MapLibre GL JS](https:\u002F\u002Fmaplibre.org\u002Fmaplibre-gl-js\u002Fdocs\u002F). The end result will look something like this:\n\n![Stock Alidade Smooth and the same map with a custom brand palette applied, side by side](\u002Fimages\u002Fcontent\u002Fcustom-map-style-before-after.png){style=\"display: block; margin-inline: auto; max-width: 100%; width: auto;\"}\n\n## Start With a Working Map\n\nTo get started, all you need is a browser, a Stadia Maps account, and somewhere to serve a static file.\n\nOpen our [Build a Map](\u002Fbuild-a-map\u002F) tool (which doesn't require your Stadia Maps login). It's a style picker, not a style editor. The color changes happen in the next step.\n\nUse the tool to display a working map with your preferred map style and generate the code to load it. Styles include Alidade Bright, Alidade Smooth, Alidade Smooth Dark, Alidade Satellite, Outdoors, OSM Bright, Stamen Terrain, Stamen Toner, Stamen Toner Lite, Stamen Toner Dark, Stamen Toner Blacklite, and Stamen Watercolor.\n\nIf you don't know which style to choose, start with [**Alidade Smooth**](https:\u002F\u002Fdocs.stadiamaps.com\u002Fmap-styles\u002Falidade-smooth\u002F), which is designed for maps with a lot of markers or overlays. Its muted palette leaves you room to work. Forking a finished style also beats starting from an empty one, because you inherit years of cartographic decisions about what to show at which zoom level.\n\nSet your latitude, longitude, and zoom to frame a place you know well. You'll be judging color changes against it, so pick a spot where you'll notice when the roads look wrong.\n\nNext, click the **Try it in JSFiddle** button. You now have a working interactive map. The generated code looks like this (London is used in this example):\n\n```javascript\n\u002F\u002F This is a quick sample to get you started with an interactive map.\n\n\u002F\u002F 1. Set up the map control.\nvar map = new maplibregl.Map({\n    container: 'map',\n    style: 'https:\u002F\u002Ftiles.stadiamaps.com\u002Fstyles\u002Falidade_smooth.json',  \u002F\u002F 2. Style URL; see our https:\u002F\u002Fdocs.stadiamaps.com\u002Fthemes\u002F for more options\n    \u002F\u002F You can also explicitly request tiles from our EU servers using the following URL:\n    \u002F\u002F https:\u002F\u002Ftiles-eu.stadiamaps.com\u002Fstyles\u002Falidade_smooth.json\n    center: { lat: 51.5072, lng: -0.1276 },  \u002F\u002F 3. Initial focus coordinate\n    zoom: 7,  \u002F\u002F 4. Initial zoom\n});\n```\n\nThe HTML pane loads MapLibre GL JS and its stylesheet, and the JavaScript pane adds a `setRTLTextPlugin` call, so right-to-left labels render correctly. Keep this tab open. That `style` line is the only one you'll change at the end.\n\nIf your users are in the EU and you want tiles served from EU infrastructure, the code notes the alternative endpoint: `https:\u002F\u002Ftiles-eu.stadiamaps.com\u002Fstyles\u002Falidade_smooth.json`.\n\nYou have a map, and you know which line controls its appearance. Next, you'll change what that line points to.\n\n## Customize the Style in Maputnik\n\n[Maputnik](https:\u002F\u002Fmaputnik.github.io\u002Feditor\u002F) runs in the browser. It's free and open source, and it edits the same JSON your map already loads.\n\n**Open your starting style.** In the Maputnik menu bar, choose **Open**, then enter the JSON URL for the style you picked. For Alidade Smooth, that's `https:\u002F\u002Ftiles.stadiamaps.com\u002Fstyles\u002Falidade_smooth.json`. The full list lives in our [style library documentation](https:\u002F\u002Fdocs.stadiamaps.com\u002Fthemes\u002F).\n\n**Find the layers that matter.** A production basemap has many [layers](https:\u002F\u002Fdocs.stadiamaps.com\u002Fvector\u002F), but these are the most important to focus on:\n\n- Background and landcover, basically the base color everything sits on\n- Water, usually the strongest color contrast on the map\n- Roads, split across several layers by class, which is why changing \"the road color\" means changing more than one thing\n- Labels, including text color, halo color, and font\n\nUse Maputnik's layer filter to search by name instead of scrolling. Change the background first and let it set the range everything else has to work within.\n\n**Match your palette and check your contrast.** Paste in your brand hex values, then zoom from country level to street level. Colors that look right at [zoom 7](https:\u002F\u002Fwiki.openstreetmap.org\u002Fwiki\u002FZoom_levels) often fall apart at zoom 15, when [more layers switch on](https:\u002F\u002Fmaplibre.org\u002Fmaplibre-style-spec\u002Flayers\u002F) at their `minzoom` thresholds. Check the label text against the [WCAG minimum of 4.5:1](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fcontrast-minimum.html) while you're here, since a palette that passes on a white page can fail over landcover fills. Most of the time, what you spend here determines whether a map looks branded or broken.\n\nCheck the [attribution requirements](\u002Fattribution\u002F) for the style you pick. Keep in mind that Stamen styles carry their own license terms for commercial use and remixing. Also, Stamen Watercolor is a raster style, so it isn't vector-styleable.\n\nClick **Export** in the top menu and save the JSON. If you'll be loading tiles with an [API key](https:\u002F\u002Fdocs.stadiamaps.com\u002Fauthentication\u002F), which covers mobile apps, server-side rendering, and anything outside a browser, enter your API key in the export dialog, and [Maputnik writes it into the style for you](https:\u002F\u002Fdocs.stadiamaps.com\u002Fcustom-styles\u002F).\n\nYou now have your style as a file. All that's left is putting it somewhere your app can reach.\n\n## Host Your Style and Ship It\n\nSome mapping platforms keep your style on their servers, so this step never comes up. We hand you the file instead. Your style is a portable artifact you own: you can diff it, review it in a pull request, roll it back, bundle it offline, and take it with you. It's a design asset in your repository, not a row in someone else's database.\n\n**Host the exported JSON** anywhere you serve static files: your own server, a CDN, or bundled inside your app.\n\n**Point your map at it.** Go back to that JSFiddle tab and change one line:\n\n```javascript\nvar map = new maplibregl.Map({\n    container: 'map',\n    style: 'https:\u002F\u002Fyourdomain.com\u002Fstyles\u002Fyour-custom-style.json',  \u002F\u002F your style now\n    center: { lat: 51.5072, lng: -0.1276 },\n    zoom: 7,\n});\n```\n\n**Reload.**\n\n**Set up authentication before you go live.** For production websites, register your domain in the [Stadia Maps dashboard](https:\u002F\u002Fclient.stadiamaps.com\u002Fdashboard\u002F) and use [domain-based authentication](https:\u002F\u002Fdocs.stadiamaps.com\u002Fauthentication\u002F) to keep API keys out of your client code. For mobile apps, server-side code, and intranet sites, use an API key. Local development on `localhost` requires no authentication, which is why your fiddle worked immediately.\n\n## Troubleshooting and Common Questions\n\n### Why is my map blank after switching to my custom style?\n\nCheck the browser console. A blank map with a 401 response is an authentication issue. Either your domain isn't registered yet, or your API key didn't make it into the style. A blank map with no network errors usually indicates a malformed export or an invalid style URL.\n\n### Why didn't some layers change color?\n\nRoads and labels are split across multiple layers by class and zoom level, so changing one road layer changes only one road class. Filter the layer list by name and check for siblings.\n\n### Why do my colors look right at low zoom but wrong at high zoom levels?\n\nLayers switch on as you zoom in, and some properties use zoom-dependent expressions rather than fixed values. Test every color change across the full zoom range before committing to it.\n\n### Do I have to re-export when the base style is updated?\n\nYour exported style is a snapshot. It keeps working as-is, but it won't automatically pick up upstream improvements. When an update ships that you want, re-fork and reapply your changes, which is much faster if your palette is documented in your repository.\n\n### Can I use custom icons and fonts?\n\nYes, though both take more setup than anything else here. Generate sprite files with [Spreet](https:\u002F\u002Fgithub.com\u002Fflother\u002Fspreet), host them yourself, and point your style's `sprite` key at them. [Our docs cover the details](https:\u002F\u002Fdocs.stadiamaps.com\u002Fcustom-styles\u002F#advanced-customizing-sprites), including why the URL leaves off the file extension. For fonts, generate glyphs with our own `build_pbf_glyphs` or [MapLibre Font Maker](https:\u002F\u002Fmaplibre.org\u002Ffont-maker\u002F); [the font docs](https:\u002F\u002Fdocs.stadiamaps.com\u002Fcustom-styles\u002F#advanced-customizing-fonts) explain how to combine scripts into a single stack with fallbacks. Check the license on anything you ship.\n\n## Take the Next Step\n\nYou now have a branded basemap and a repeatable process for changing it. From here, the natural next steps are adding your own data layers on top, swapping in custom marker sprites, or building a dark variant from the same palette. Our [custom styling documentation](https:\u002F\u002Fdocs.stadiamaps.com\u002Fcustom-styles\u002F) goes deeper on sprites and glyphs when you're ready.\n\nReady to [get started with Stadia Maps for free](https:\u002F\u002Fclient.stadiamaps.com\u002Fsignup\u002F)? Every new account includes a 14-day trial of Stadia Maps Professional, and we don't require a credit card when you sign up. Need help? [Reach out to our Support team at any time.](\u002Fsupport\u002F)\n",{"id":217,"bio":218,"extension":18,"jobTitle":219,"meta":220,"name":221,"sameAs":222,"slug":28,"stem":224,"twitterCreator":225,"type":27,"url":27,"__hash__":226},"authors\u002Fauthors\u002Fian-wagner.yml","Ian is co-founder of Stadia Maps and leads engineering and operations.","Founder & Chief Architect",{},"Ian Wagner",[223],"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fian-w-wagner\u002F","authors\u002Fian-wagner","@ianthetechie","duXv7qvc_ceMszbExfddzNJaKYo_d7bxEXGpG1-tWQU",1792395788984]