โ† All tools

Map Style Builder

Design a map color theme on a synthetic harbor city โ€” water, parks, road classes, buildings, labels โ€” then export it as a MapLibre GL style, a Leaflet filter snippet, JSON tokens, or a PNG. Everything runs in your browser.

About the exports (click to expand)
  • MapLibre GL style โ€” the headline export: a valid version: 8 style document with layers for background, water, parks, buildings, three road classes (each with a casing), boundaries, and labels with halos. Its sources block points at a placeholder OpenMapTiles-schema vector tile URL โ€” swap in your own tile endpoint (MapTiler, self-hosted tileserver-gl, etc.) and it will render for real.
  • Leaflet snippet โ€” raster tiles can't be recolored per-layer, so this is a CSS filter approximation: it derives an invert/sepia/saturate/brightness chain from your land and water colors and applies it to standard OSM tiles, plus your UI colors for the page. Clearly imperfect, but a fast way to get "close enough" without vector tiles.
  • JSON tokens โ€” a plain { name: "#hex" } map for use in any other tooling.
  • PNG snapshot โ€” the preview SVG rendered to a 1800ร—1240 canvas and downloaded.

The preview city ("Port Meridian") is procedurally drawn inline SVG โ€” no tiles, no network. The URL hash always carries your current theme, so the address bar is a shareable link.

Global
Export
Pick a preset chip or tweak any color โ€” the city updates live.