mapcn local map lab

Munich map presets

Two synced map surfaces, expanded local OSM data, and presets that reset palette/detail variables so the selected map kind is actually visible.

Munich parksProduction mapsLanzarote proofRaw PMTiles labPoster lab
Munich maps index

Review every Munich route

A single launchpad for the parks atlas and the new useful-city POI layers, all using the current local map styling and same-origin GeoJSON assets.

ParksMajor green spacesToilets754 public toiletsDrinking water181 fountainsPlaygrounds5,081 playgroundsDog amenities1,517 dog spotsBike services9,045 bike pointsBenches & picnic27,228 comfort pointsTransit entrances775 entrancesAccessible POIs10,853 wheelchair-tagged POIsOktoberfestTheresienwiese visitor POIs
Website map route

Styled Google Maps replacement, powered by PMTiles

Start with the Munich parks atlas and production-facing Protomaps theme gallery, then use Lanzarote as the regional proof that the same local PMTiles stack works outside Munich. Raw PMTiles and poster parity remain available as labs.

Open Munich parksOpen production mapsOpen LanzaroteLanzarote Midnight BlueLanzarote OceanLanzarote Japanese InkRaw PMTiles labPoster parity lab
Map kind presets
Poster themes

All 17 MapToPoster-inspired palettes for clean road-network posters. Picking one also applies the reduced poster recipe.

Poster road engine: thin zoom-scaled roads, MapToPoster class colors, configurable glow, blur, fade, optional grain, and no label/building noise.

Munich Studio
Marienplatz 8, 80331 München
Munich Studio
Marienplatz 8, 80331 München
MapToPoster parity gallery

Example poster crops

Unique upstream example poster crops recreated as live 12:16 MapLibre maps with printed poster coordinates, matching theme palettes, local OSM extracts, parks and water on, and poster effects off by default.

Crop math follows MapToPoster's default portrait compensation: documented/default distance × 16/12 ÷ 4. Exact duplicate crops are collapsed and their source files are listed on the same card.

Amsterdam

Ocean

Netherlands · d 6,000 · 52.3731 N / 4.8925 E

Open parity map

Source posters: amsterdam_ocean_20260118_140624.png, amsterdam_ocean_20260121_120007.png

Barcelona

Warm Beige

Spain · d 8,000 · 41.3826 N / 2.1771 E

Open parity map

Source poster: barcelona_warm_beige_20260118_140048.png

Budapest

Copper Patina

Hungary · d 8,000 · 47.4814 N / 19.1461 E

Open parity map

Source poster: budapest_copper_patina_20260118_151213.png

Dubai

Midnight Blue

UAE · d 15,000 · 25.0743 N / 55.1885 E

Open parity map

Source poster: dubai_midnight_blue_20260118_140807.png

London

Noir

United Kingdom · d 15,000 · 51.5074 N / 0.1278 W

Open parity map

Source poster: london_noir_20260118_150259.png

Marrakech

Terracotta

Morocco · d 5,000 · 31.6258 N / 7.9892 W

Open parity map

Source poster: marrakech_terracotta_20260118_143253.png

Melbourne

Forest

Australia · d 18,000 · 37.8142 S / 144.9632 E

Open parity map

Source poster: melbourne_forest_20260118_153446.png

Moscow

Noir

Russia · d 12,000 · 55.6256 N / 37.6064 E

Open parity map

Source poster: moscow_noir_20260118_141923.png

Mumbai

Contrast Zones

India · d 18,000 · 19.0550 N / 72.8692 E

Open parity map

Source poster: mumbai_contrast_zones_20260118_145843.png

New York

Noir

USA · d 12,000 · 40.7127 N / 74.0060 W

Open parity map

Source poster: new_york_noir_20260118_135113.png

Paris

Pastel Dream

France · d 10,000 · 48.8589 N / 2.3200 E

Open parity map

Source poster: paris_pastel_dream_20260118_141126.png

Rome

Warm Beige

Italy · d 8,000 · 41.8933 N / 12.4829 E

Open parity map

Source poster: rome_warm_beige_20260118_143425.png

San Francisco

Sunset

USA · d 15,000 · 37.7879 N / 122.4075 W

Open parity map

Source posters: san_francisco_sunset_20260117_224834.png, san_francisco_sunset_20260118_144726.png

Seattle

Emerald

USA · d 18,000 · 47.6038 N / 122.3301 W

Open parity map

Source poster: seattle_emerald_20260124_162244.png

Singapore

Neon Cyberpunk

Singapore · d 18,000 · 1.3571 N / 103.8195 E

Open parity map

Source poster: singapore_neon_cyberpunk_20260118_153328.png

Sydney

Ocean

Australia · d 12,000 · 33.8698 S / 151.2083 E

Open parity map

Source poster: sydney_ocean_20260118_145507.png

Tokyo

Japanese Ink

Japan · d 15,000 · 35.6769 N / 139.7639 E

Open parity map

Source poster: tokyo_japanese_ink_20260118_142446.png

Venice

Blueprint

Italy · d 4,000 · 45.4372 N / 12.3346 E

Open parity map

Source posters: venice_blueprint_20260118_140505.png, venice_blueprint_20260120_224440.png

Configurator

Live style variables

Map kind presets reset palette, detail, and layer variables. Use the sliders afterward for deliberate overrides.

Palette themes

Map kinds

Detail / road noise

Data layers

Layer variables

Persisted JSON store

Top controls and lower controls both write this same localStorage-backed config.

{
  "detailMode": "all",
  "layerVisibility": {
    "buildings": true,
    "labels": true,
    "parks": true,
    "roads": true,
    "water": true
  },
  "mapKind": "standard",
  "paletteName": "mapcn",
  "styleConfig": {
    "blur": 10,
    "buildings": 76,
    "extrusion": 42,
    "fade": 48,
    "glow": 35,
    "grain": 0,
    "green": 82,
    "majorRoads": 96,
    "minorRoads": 90,
    "roadWidth": 100,
    "water": 90
  },
  "theme": "dark"
}

React embed export

<ClientMapEmbed
  name="Munich Studio"
  address="Marienplatz 8, 80331 München"
  center={[11.5761, 48.1372]}
  markerLabel="Munich Studio"
  styles={{
    dark: "/map-assets/styles/contact-map-style-standard-dark.json",
    light: "/map-assets/styles/contact-map-style-standard-light.json",
  }}
  theme="dark"
  zoom={14.15}
/>

Static asset manifest

{
  "assets": [
    "map-assets/styles/contact-map-style-standard-dark.json",
    "map-assets/styles/contact-map-style-standard-light.json",
    "map-assets/geojson/roads.geojson",
    "map-assets/geojson/water-lines.geojson",
    "map-assets/geojson/water-areas.geojson",
    "map-assets/geojson/green-areas.geojson",
    "map-assets/geojson/buildings.geojson"
  ],
  "config": {
    "detailMode": "all",
    "layerVisibility": {
      "buildings": true,
      "labels": true,
      "parks": true,
      "roads": true,
      "water": true
    },
    "mapKind": "standard",
    "paletteName": "mapcn",
    "styleConfig": {
      "blur": 10,
      "buildings": 76,
      "extrusion": 42,
      "fade": 48,
      "glow": 35,
      "grain": 0,
      "green": 82,
      "majorRoads": 96,
      "minorRoads": 90,
      "roadWidth": 100,
      "water": 90
    },
    "theme": "dark"
  },
  "staticExport": {
    "command": "npm run build:static",
    "outputDirectory": "out"
  }
}

Static layer export

{
  "description": "Static layer overrides exported from the map workshop. Apply these after loading the base local style JSON.",
  "style": "/map-assets/styles/contact-map-style-standard-dark.json",
  "config": {
    "detailMode": "all",
    "layerVisibility": {
      "buildings": true,
      "labels": true,
      "parks": true,
      "roads": true,
      "water": true
    },
    "mapKind": "standard",
    "paletteName": "mapcn",
    "styleConfig": {
      "blur": 10,
      "buildings": 76,
      "extrusion": 42,
      "fade": 48,
      "glow": 35,
      "grain": 0,
      "green": 82,
      "majorRoads": 96,
      "minorRoads": 90,
      "roadWidth": 100,
      "water": 90
    },
    "theme": "dark"
  },
  "layers": [
    {
      "id": "background",
      "paint": {
        "background-color": "#070707"
      }
    },
    {
      "id": "green-areas",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-color": "#171717",
        "fill-opacity": 0.82
      }
    },
    {
      "id": "water-areas",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-color": "#262626",
        "fill-opacity": 0.9
      }
    },
    {
      "id": "water-lines-wide",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#404040",
        "line-opacity": 0.9,
        "line-width": 8
      }
    },
    {
      "id": "building-fill",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-color": "#171717",
        "fill-opacity": 0.76
      }
    },
    {
      "id": "building-outline",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#404040",
        "line-opacity": 0.84
      }
    },
    {
      "id": "minor-road-casing",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#262626",
        "line-opacity": 0.9,
        "line-width": 4.2
      }
    },
    {
      "id": "minor-roads",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#525252",
        "line-opacity": 0.9,
        "line-width": 2.1
      }
    },
    {
      "id": "major-road-casing",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#737373",
        "line-opacity": 0.96,
        "line-width": 6.4
      }
    },
    {
      "id": "major-roads",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#a3a3a3",
        "line-opacity": 0.96,
        "line-width": 3.5
      }
    }
  ]
}

Static HTML export

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Munich Studio map</title>
    <link rel="stylesheet" href="./vendor/maplibre-gl.css" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      body {
        background: #070707;
        color: #f4f4f5;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      .map-shell {
        min-height: 420px;
        position: relative;
      }

      map-runtime-embed {
        display: block;
        height: min(720px, 100vh);
        width: 100%;
      }

      .map-runtime-fallback {
        display: grid;
        height: 100%;
        place-items: center;
      }

      .map-card {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        z-index: 2;
        max-width: 18rem;
        border: 1px solid rgb(244 244 245 / 18%);
        border-radius: 1rem;
        background: rgb(7 7 7 / 88%);
        box-shadow: 0 18px 60px rgb(0 0 0 / 35%);
        padding: 0.9rem 1rem;
        backdrop-filter: blur(16px);
      }

      .map-card strong,
      .map-card span {
        display: block;
      }

      .map-card strong {
        font-size: 0.95rem;
      }

      .map-card span {
        margin-top: 0.3rem;
        font-size: 0.78rem;
        opacity: 0.72;
      }

      .marker {
        display: grid;
        width: 1.8rem;
        height: 1.8rem;
        place-items: center;
        border: 2px solid #070707;
        border-radius: 999px;
        background: #a3a3a3;
        box-shadow: 0 0 36px rgb(163 163 163 / 60%);
      }

      .marker::after {
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 999px;
        background: #070707;
        content: "";
      }

      .map-attribution {
        position: absolute;
        left: 0.5rem;
        bottom: 0.5rem;
        z-index: 2;
        font-size: 0.75rem;
      }

      .map-attribution a {
        color: inherit;
      }

      .map-consent-card {
        display: grid;
        min-height: 420px;
        place-items: center;
        gap: 0.75rem;
        padding: 2rem;
        text-align: center;
      }

      .map-consent-card strong,
      .map-consent-card span,
      .map-consent-card p {
        display: block;
        max-width: 30rem;
      }

      .map-consent-card p,
      .map-consent-card span {
        opacity: 0.72;
      }

      .map-consent-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
      }

      .map-consent-actions button,
      .map-consent-actions a,
      .map-consent-revoke {
        border: 1px solid rgb(244 244 245 / 18%);
        border-radius: 999px;
        background: rgb(244 244 245 / 8%);
        color: inherit;
        cursor: pointer;
        font: inherit;
        padding: 0.55rem 0.85rem;
        text-decoration: none;
      }

      .map-consent-revoke {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <main class="map-shell">
      <map-runtime-embed aria-label="Munich Studio">
        <div class="map-runtime-fallback" aria-hidden="true"><div class="marker"></div></div>
        <script type="application/json" data-map-runtime-config>{"assets":{"runtimeCodeUrl":"./vendor/maplibre-gl.js","runtimeStyleUrl":"./vendor/maplibre-gl.css"},"content":{"layers":[{"accessibility":{"label":{"de":"Standort","en":"Location"},"wheelchairAccessible":false},"attributionIds":["openstreetmap"],"directions":{"label":{"de":"Route öffnen","en":"Open directions"},"url":"https://www.openstreetmap.org/"},"geometry":{"coordinates":[11.5761,48.1372],"type":"Point"},"id":"static-export-location","kind":"marker","order":0,"popup":{"card":{"summary":{"de":"Kartenstandort","en":"Map location"},"title":{"de":"Standort","en":"Location"}},"description":{"de":"Kartenstandort","en":"Map location"},"title":{"de":"Standort","en":"Location"}},"tags":["static-export"],"visible":true}],"sources":[{"id":"openstreetmap","label":"© OpenStreetMap contributors","url":"https://www.openstreetmap.org/copyright"}]},"options":{"locale":"en","privacy":{"analytics":"disabled","consent":"not-required","storage":"none"},"runtime":{"assetPolicy":"same-origin","mode":"static"},"theme":"dark"},"project":{"content":{"layers":[],"sources":[]},"contentLayers":[{"id":"buildings","visible":true},{"id":"labels","visible":true},{"id":"parks","visible":true},{"id":"roads","visible":true},{"id":"water","visible":true}],"exportSettings":{"formats":["react-embed","static-html","static-layer-json"],"includeAssets":true,"relativeAssetPaths":true},"localization":{"preferredLocale":"en"},"metadata":{"createdAt":"1970-01-01T00:00:00.000Z","description":{"de":"Lokales Kartenprojekt","en":"Local map project"},"id":"static-export","name":{"de":"Munich Studio","en":"Munich Studio"},"updatedAt":"1970-01-01T00:00:00.000Z"},"privacy":{"analytics":"disabled","consent":"not-required","storage":"none"},"regionPack":{"id":"static-export","revision":"1"},"runtime":{"assetPolicy":"same-origin","mode":"static"},"schemaVersion":2,"style":{"detailMode":"all","mapKind":"standard","paletteName":"mapcn","theme":"dark","tokens":{"blur":10,"buildings":76,"extrusion":42,"fade":48,"glow":35,"grain":0,"green":82,"majorRoads":96,"minorRoads":90,"roadWidth":100,"water":90}},"viewport":{"bearing":0,"center":[11.5761,48.1372],"pitch":0,"zoom":14.15}},"regionPack":{"manifest":{"archives":[],"bounds":[-180,-90,180,90],"cache":{"archive":"1","manifest":"1","version":"1"},"id":"static-export","locales":["de","en"],"provenance":{"assetIds":[],"publicEligibility":{"reason":"Static export","status":"eligible"},"source":"static-export"},"resources":{"content":[],"fonts":[],"icons":[],"sprites":[],"style":[{"path":"/map-assets/styles/contact-map-style-standard-dark.json","sha256":"0000000000000000000000000000000000000000000000000000000000000000"}]},"schemaVersion":1,"sources":[],"update":{"cadence":"static","owner":"export","updatedAt":"1970-01-01T00:00:00.000Z"},"version":"1"},"sources":[]},"style":{"kind":"config","value":{"detailMode":"all","layerVisibility":{"buildings":true,"labels":true,"parks":true,"roads":true,"water":true},"mapKind":"standard","paletteName":"mapcn","theme":"dark","tokens":{"blur":10,"buildings":76,"extrusion":42,"fade":48,"glow":35,"grain":0,"green":82,"majorRoads":96,"minorRoads":90,"roadWidth":100,"water":90}}},"version":1}</script>
      </map-runtime-embed>
      <aside class="map-card" aria-label="Map location">
        <strong>Munich Studio</strong>
        <span>Marienplatz 8, 80331 München</span>
      </aside>
      <footer class="map-attribution"><a href="https://www.openstreetmap.org/copyright" rel="noreferrer">© OpenStreetMap contributors</a></footer>
    </main>
    <script src="./vendor/maplibre-gl.js"></script>
    <script type="module" src="./map-runtime-embed.js"></script>
  </body>
</html>

Named presets

Save studio configurations by name, then load them later without leaving the page.

No saved presets yet.

Import preset JSON

Paste a copied config JSON, or a named preset object with a config field.