protomaps · bdon · Jan 5, 2026 · Dec 21, 2025 · Dec 21, 2025 · Dec 22, 2025
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .vscode
+node_modules
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "basemaps-assets"]
+	path = basemaps-assets
+	url = https://github.com/protomaps/basemaps-assets.git
diff --git a/basemaps-assets b/basemaps-assets
diff --git a/examples/local.html b/examples/local.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+
+This example displays a map using Tiles and Styles generated locally.
+Use it to preview basemap changes made in this repository.
+
+Start by building tiles/data/monaco.pmtiles:
+
+    cd tiles
+    docker build -t protomaps/basemaps .
+    docker run -v ./data:/tiles/data --rm -it protomaps/basemaps --output=data/monaco.pmtiles --area=monaco --force
+    cd -
+
+Generate styles/style.json:
+
+    cd styles
+    npm run generate_style style.json https://example.com/tilejson.json light en
+    cd -
+
+Populate basemaps-assets submodule with fonts and sprite sheets:
+
+    git submodule init
+    git submodule update
+
+Run local web server to view http://localhost:8080/examples/local.html:
+
+    npx http-server -p 8080 -c-1
+
+-->
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Local Styles and Tiles - Protomaps Starter</title>
+
+    <!-- MapLibre GL JS -->
+    <script src="https://unpkg.com/maplibre-gl@5.15.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@5.15.0/dist/maplibre-gl.css" rel="stylesheet">
+
+    <!-- PMTiles protocol -->
+    <script src="https://unpkg.com/pmtiles@4.3.0/dist/pmtiles.js"></script>
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script>
+        // Register PMTiles protocol
+        let protocol = new pmtiles.Protocol();
+        maplibregl.addProtocol("pmtiles", protocol.tile);
+
+        // Load and modify the style to use local PMTiles
+        fetch('../styles/style.json')
+            .then(response => response.json())
+            .then(style => {
+                // Replace the source URL with the local PMTiles file
+                style.sources.protomaps = {
+                    type: "vector",
+                    url: "pmtiles://../tiles/monaco.pmtiles",
+                    attribution: style.sources.protomaps.attribution
+                };
+
+                style.glyphs = "http://localhost:8080/basemaps-assets/fonts/{fontstack}/{range}.pbf";
+                style.sprite = "http://localhost:8080/basemaps-assets/sprites/v4/light";
+
+                // Initialize map with modified style
+                const map = new maplibregl.Map({
+                    container: 'map',
+                    style: style,
+                    center: [7.41488, 43.73019], // Monaco [longitude, latitude]
+                    zoom: 16,
+                    hash: true // Allows sharing location via URL hash
+                });
+
+                // Add navigation controls
+                map.addControl(new maplibregl.NavigationControl(), 'top-right');
+
+                // Add scale control
+                map.addControl(new maplibregl.ScaleControl({
+                    maxWidth: 80,
+                    unit: 'metric'
+                }), 'bottom-left');
+            })
+            .catch(error => {
+                console.error('Error loading style:', error);
+            });
+    </script>
+</body>
+</html>