protomaps · bdon · Jan 5, 2026 · Dec 21, 2025 · Dec 21, 2025 · Dec 22, 2025
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 .vscode
+node_modules
+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
+    mvn clean package -DskipTests
+    java -jar target/*-with-deps.jar --download --area=monaco --force
+    cd -
+
+Generate styles/style.json with sprites and fonts in a local basemaps-assets directory:
+
+    cd styles
+    npm run generate_style style.json https://example.com/tilejson.json light en \
+      'http://localhost:8080/basemaps-assets/sprites/v4/light' \
+      'http://localhost:8080/basemaps-assets/fonts/{fontstack}/{range}.pbf'
+    cd -
+
+Populate basemaps-assets directory with fonts and sprite sheets:
+
+    curl -L https://github.com/protomaps/basemaps-assets/archive/refs/heads/main.zip -o /tmp/basemaps-assets-main.zip
+    unzip /tmp/basemaps-assets-main.zip 'basemaps-assets-main/fonts/*' 'basemaps-assets-main/sprites/*' -d /tmp
+    mv /tmp/basemaps-assets-main basemaps-assets
+
+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/[email protected]/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet">
+
+    <!-- PMTiles protocol -->
+    <script src="https://unpkg.com/[email protected]/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
+                };
+
+                // 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>