From 6955e62ac6dda010bb933fc5d2d1c00d44d477bd Mon Sep 17 00:00:00 2001
From: Gordon McDonald <gordon27@gmail.com>
Date: Tue, 10 Mar 2026 10:41:50 +1100
Subject: [PATCH 1/3] Add demo map

---
 map/index.html  | 359 ++++++++++++++++++++++++++++++++++++++++++++++++
 map/viewer.html | 265 +++++++++++++++++++++++++++++++++++
 2 files changed, 624 insertions(+)
 create mode 100644 map/index.html
 create mode 100644 map/viewer.html
diff --git a/map/index.html b/map/index.html
new file mode 100644
index 0000000..91eeb9f
--- /dev/null
+++ b/map/index.html
@@ -0,0 +1,359 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Greater Sydney Trees & Buildings</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link
+    href="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.css"
+    rel="stylesheet"
+  />
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: #111;
+    }
+
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+
+    .controls {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      z-index: 1000;
+      background: rgba(20, 20, 20, 0.92);
+      color: white;
+      padding: 12px 14px;
+      border-radius: 10px;
+      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
+      min-width: 220px;
+    }
+
+    .controls h1 {
+      font-size: 14px;
+      margin: 0 0 10px 0;
+      font-weight: 600;
+    }
+
+    .controls label {
+      display: block;
+      font-size: 14px;
+      margin: 6px 0;
+      cursor: pointer;
+    }
+
+    .controls input[type="checkbox"] {
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+
+    .controls button {
+      margin-top: 10px;
+      width: 100%;
+      padding: 8px 10px;
+      border: 0;
+      border-radius: 8px;
+      background: #2d6cdf;
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .controls button:hover {
+      background: #2459b8;
+    }
+
+    .note {
+      margin-top: 10px;
+      font-size: 12px;
+      line-height: 1.35;
+      color: #cfcfcf;
+    }
+
+    .maplibregl-popup-content {
+      max-width: 320px;
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    .popup-table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-top: 6px;
+    }
+
+    .popup-table td {
+      border-top: 1px solid #ddd;
+      padding: 4px 6px;
+      vertical-align: top;
+      font-size: 12px;
+    }
+
+    .popup-table td:first-child {
+      font-weight: 600;
+      width: 110px;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+
+  <div class="controls">
+    <h1>Greater Sydney Trees & Buildings</h1>
+
+    <label><input type="checkbox" id="imageryToggle" checked /> Imagery</label>
+    <label><input type="checkbox" id="labelsToggle" checked /> Labels</label>
+    <label><input type="checkbox" id="buildingsToggle" checked /> Buildings</label>
+    <label><input type="checkbox" id="treesToggle" checked /> Tree patches</label>
+
+    <button id="fitBtn">Fit to data</button>
+
+    <div class="note">
+      Click a feature to inspect its properties.
+    </div>
+  </div>
+
+  <script type="module">
+    import maplibregl from "https://esm.sh/maplibre-gl@5.3.0";
+    import { Protocol } from "https://esm.sh/pmtiles@4.3.0";
+    import { layers, namedFlavor } from "https://esm.sh/protomaps";
+
+    const PMTILES_URL =
+      "https://huggingface.co/datasets/SIH/Greater-Sydney-Trees-Buildings/resolve/main/greater-sydney-trees-buildings.pmtiles?download=1";
+
+    const protocol = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol.tile);
+
+    const p = new protocol.pmtiles.PMTiles(PMTILES_URL);
+    protocol.add(p);
+
+    const metadata = await p.getMetadata();
+    const header = await p.getHeader();
+
+    const bounds = [
+      [header.minLon, header.minLat],
+      [header.maxLon, header.maxLat]
+    ];
+
+    const labelLayers = layers("labels", namedFlavor("light"), {
+      lang: "en",
+      labelsOnly: true
+    });
+
+    const map = new maplibregl.Map({
+      container: "map",
+      hash: true,
+      attributionControl: true,
+      style: {
+        version: 8,
+        glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
+        sprite: "https://protomaps.github.io/basemaps-assets/sprites/v4/light",
+        sources: {
+          imagery: {
+            type: "raster",
+            tiles: [
+              "https://maps.six.nsw.gov.au/arcgis/rest/services/public/NSW_Imagery/MapServer/tile/{z}/{y}/{x}"
+            ],
+            tileSize: 256,
+            minzoom: 0,
+            maxzoom: 23,
+            attribution: "Imagery © NSW Spatial Services / Department of Customer Service"
+          },
+          labels: {
+            type: "vector",
+            tiles: [
+              "https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f"
+            ],
+            maxzoom: 15,
+            attribution: "Labels/data © OpenStreetMap contributors"
+          },
+          gs: {
+            type: "vector",
+            url: `pmtiles://${PMTILES_URL}`
+          }
+        },
+        layers: [
+          {
+            id: "imagery",
+            type: "raster",
+            source: "imagery",
+            paint: {
+              "raster-resampling": "linear"
+            }
+          },
+
+          {
+            id: "buildings-fill",
+            type: "fill",
+            source: "gs",
+            "source-layer": "buildings",
+            paint: {
+              "fill-color": "#7a7a7a",
+              "fill-opacity": 0.32
+            }
+          },
+          {
+            id: "buildings-line",
+            type: "line",
+            source: "gs",
+            "source-layer": "buildings",
+            paint: {
+              "line-color": "#4f4f4f",
+              "line-width": [
+                "interpolate", ["linear"], ["zoom"],
+                12, 0.2,
+                18, 1.0
+              ],
+              "line-opacity": 0.8
+            }
+          },
+
+          {
+            id: "trees-fill",
+            type: "fill",
+            source: "gs",
+            "source-layer": "tree_patches",
+            paint: {
+              "fill-color": "#2f8f46",
+              "fill-opacity": 0.28
+            }
+          },
+          {
+            id: "trees-line",
+            type: "line",
+            source: "gs",
+            "source-layer": "tree_patches",
+            paint: {
+              "line-color": "#1f6a33",
+              "line-width": [
+                "interpolate", ["linear"], ["zoom"],
+                12, 0.2,
+                18, 0.8
+              ],
+              "line-opacity": 0.7
+            }
+          },
+
+          ...labelLayers
+        ]
+      }
+    });
+
+    map.addControl(new maplibregl.NavigationControl(), "top-right");
+
+    map.on("load", () => {
+      map.fitBounds(bounds, { padding: 30, animate: false });
+
+      // Make label layers identifiable for toggling
+      for (const layer of map.getStyle().layers) {
+        if ("source" in layer && layer.source === "labels") {
+          map.setLayoutProperty(layer.id, "visibility", "visible");
+        }
+      }
+    });
+
+    function setLayerVisibility(layerIds, visible) {
+      const v = visible ? "visible" : "none";
+      for (const id of layerIds) {
+        if (map.getLayer(id)) {
+          map.setLayoutProperty(id, "visibility", v);
+        }
+      }
+    }
+
+    function setSourceVisibility(sourceName, visible) {
+      const v = visible ? "visible" : "none";
+      for (const layer of map.getStyle().layers) {
+        if ("source" in layer && layer.source === sourceName) {
+          map.setLayoutProperty(layer.id, "visibility", v);
+        }
+      }
+    }
+
+    document.getElementById("imageryToggle").addEventListener("change", (e) => {
+      setLayerVisibility(["imagery"], e.target.checked);
+    });
+
+    document.getElementById("labelsToggle").addEventListener("change", (e) => {
+      setSourceVisibility("labels", e.target.checked);
+    });
+
+    document.getElementById("buildingsToggle").addEventListener("change", (e) => {
+      setLayerVisibility(["buildings-fill", "buildings-line"], e.target.checked);
+    });
+
+    document.getElementById("treesToggle").addEventListener("change", (e) => {
+      setLayerVisibility(["trees-fill", "trees-line"], e.target.checked);
+    });
+
+    document.getElementById("fitBtn").addEventListener("click", () => {
+      map.fitBounds(bounds, { padding: 30, animate: true });
+    });
+
+    function popupHtml(feature) {
+      const props = feature.properties || {};
+      const rows = Object.entries(props)
+        .slice(0, 20)
+        .map(([k, v]) => `<tr><td>${escapeHtml(k)}</td><td>${escapeHtml(String(v))}</td></tr>`)
+        .join("");
+
+      const layerName = feature.sourceLayer || "unknown";
+
+      return `
+        <div>
+          <div><strong>Layer:</strong> ${escapeHtml(layerName)}</div>
+          <table class="popup-table">
+            ${rows || "<tr><td colspan='2'>No properties</td></tr>"}
+          </table>
+        </div>
+      `;
+    }
+
+    function escapeHtml(str) {
+      return str
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+    }
+
+    map.on("click", (e) => {
+      const features = map.queryRenderedFeatures(e.point, {
+        layers: ["buildings-fill", "trees-fill", "buildings-line", "trees-line"]
+      });
+
+      if (!features.length) return;
+
+      const feature = features[0];
+      new maplibregl.Popup({ maxWidth: "340px" })
+        .setLngLat(e.lngLat)
+        .setHTML(popupHtml(feature))
+        .addTo(map);
+    });
+
+    map.on("mouseenter", "buildings-fill", () => {
+      map.getCanvas().style.cursor = "pointer";
+    });
+    map.on("mouseleave", "buildings-fill", () => {
+      map.getCanvas().style.cursor = "";
+    });
+    map.on("mouseenter", "trees-fill", () => {
+      map.getCanvas().style.cursor = "pointer";
+    });
+    map.on("mouseleave", "trees-fill", () => {
+      map.getCanvas().style.cursor = "";
+    });
+
+    console.log("PMTiles metadata:", metadata);
+    console.log("PMTiles header:", header);
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/map/viewer.html b/map/viewer.html
new file mode 100644
index 0000000..cb121a3
--- /dev/null
+++ b/map/viewer.html
@@ -0,0 +1,265 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Greater Sydney Trees & Buildings</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link
+    href="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.css"
+    rel="stylesheet"
+  />
+  <style>
+    html, body, #map {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      font-family: system-ui, sans-serif;
+    }
+
+    .panel {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      z-index: 10;
+      background: rgba(255,255,255,0.95);
+      padding: 12px 14px;
+      border-radius: 10px;
+      box-shadow: 0 2px 12px rgba(0,0,0,0.25);
+      min-width: 220px;
+    }
+
+    .panel h1 {
+      margin: 0 0 8px 0;
+      font-size: 15px;
+    }
+
+    .panel label {
+      display: block;
+      margin: 6px 0;
+      font-size: 14px;
+    }
+
+    .panel button {
+      margin-top: 10px;
+      width: 100%;
+      padding: 8px 10px;
+      border: 0;
+      border-radius: 8px;
+      background: #2d6cdf;
+      color: white;
+      cursor: pointer;
+    }
+
+    .popup-table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-top: 6px;
+    }
+
+    .popup-table td {
+      border-top: 1px solid #ddd;
+      padding: 4px 6px;
+      font-size: 12px;
+      vertical-align: top;
+    }
+
+    .popup-table td:first-child {
+      font-weight: 600;
+      width: 120px;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+
+  <div class="panel">
+    <h1>Greater Sydney Trees & Buildings</h1>
+    <label><input type="checkbox" id="imageryToggle" checked> Imagery</label>
+    <label><input type="checkbox" id="buildingsToggle" checked> Buildings</label>
+    <label><input type="checkbox" id="treesToggle" checked> Tree patches</label>
+    <button id="fitBtn">Fit to data</button>
+  </div>
+
+  <script type="module">
+    import maplibregl from "https://esm.sh/maplibre-gl@5.3.0";
+    import { Protocol, PMTiles } from "https://esm.sh/pmtiles@3.2.1";
+
+    const PMTILES_URL =
+      "https://huggingface.co/datasets/SIH/Greater-Sydney-Trees-Buildings/resolve/main/greater-sydney-trees-buildings.pmtiles?download=1";
+
+    const protocol = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol.tile);
+
+    const archive = new PMTiles(PMTILES_URL);
+    protocol.add(archive);
+
+    const header = await archive.getHeader();
+    const bounds = [
+      [header.minLon, header.minLat],
+      [header.maxLon, header.maxLat]
+    ];
+
+    const map = new maplibregl.Map({
+      container: "map",
+      hash: true,
+      attributionControl: true,
+      style: {
+        version: 8,
+        sources: {
+          imagery: {
+            type: "raster",
+            tiles: [
+              "https://maps.six.nsw.gov.au/arcgis/rest/services/public/NSW_Imagery/MapServer/tile/{z}/{y}/{x}"
+            ],
+            tileSize: 256,
+            minzoom: 0,
+            maxzoom: 23,
+            attribution: "Imagery © NSW Spatial Services / Department of Customer Service"
+          },
+          gs: {
+            type: "vector",
+            url: `pmtiles://${PMTILES_URL}`
+          }
+        },
+        layers: [
+          {
+            id: "imagery",
+            type: "raster",
+            source: "imagery",
+            paint: {
+              "raster-resampling": "linear"
+            }
+          },
+          {
+            id: "buildings-fill",
+            type: "fill",
+            source: "gs",
+            "source-layer": "buildings",
+            paint: {
+              "fill-color": "#6e6e6e",
+              "fill-opacity": 0.28
+            }
+          },
+          {
+            id: "buildings-line",
+            type: "line",
+            source: "gs",
+            "source-layer": "buildings",
+            paint: {
+              "line-color": "#4a4a4a",
+              "line-width": [
+                "interpolate", ["linear"], ["zoom"],
+                12, 0.2,
+                18, 1.0
+              ]
+            }
+          },
+          {
+            id: "trees-fill",
+            type: "fill",
+            source: "gs",
+            "source-layer": "tree_patches",
+            paint: {
+              "fill-color": "#2f8f46",
+              "fill-opacity": 0.24
+            }
+          },
+          {
+            id: "trees-line",
+            type: "line",
+            source: "gs",
+            "source-layer": "tree_patches",
+            paint: {
+              "line-color": "#1f6a33",
+              "line-width": [
+                "interpolate", ["linear"], ["zoom"],
+                12, 0.2,
+                18, 0.8
+              ]
+            }
+          }
+        ]
+      }
+    });
+
+    map.addControl(new maplibregl.NavigationControl(), "top-right");
+
+    map.on("load", () => {
+      map.fitBounds(bounds, { padding: 30, animate: false });
+    });
+
+    function setLayerVisibility(ids, visible) {
+      const v = visible ? "visible" : "none";
+      for (const id of ids) {
+        if (map.getLayer(id)) {
+          map.setLayoutProperty(id, "visibility", v);
+        }
+      }
+    }
+
+    document.getElementById("imageryToggle").addEventListener("change", (e) => {
+      setLayerVisibility(["imagery"], e.target.checked);
+    });
+
+    document.getElementById("buildingsToggle").addEventListener("change", (e) => {
+      setLayerVisibility(["buildings-fill", "buildings-line"], e.target.checked);
+    });
+
+    document.getElementById("treesToggle").addEventListener("change", (e) => {
+      setLayerVisibility(["trees-fill", "trees-line"], e.target.checked);
+    });
+
+    document.getElementById("fitBtn").addEventListener("click", () => {
+      map.fitBounds(bounds, { padding: 30, animate: true });
+    });
+
+    function escapeHtml(str) {
+      return String(str)
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+    }
+
+    function popupHtml(feature) {
+      const props = feature.properties || {};
+      const rows = Object.entries(props)
+        .slice(0, 20)
+        .map(([k, v]) => `<tr><td>${escapeHtml(k)}</td><td>${escapeHtml(v)}</td></tr>`)
+        .join("");
+
+      return `
+        <div>
+          <div><strong>Layer:</strong> ${escapeHtml(feature.sourceLayer || "unknown")}</div>
+          <table class="popup-table">
+            ${rows || "<tr><td colspan='2'>No properties</td></tr>"}
+          </table>
+        </div>
+      `;
+    }
+
+    map.on("click", (e) => {
+      const features = map.queryRenderedFeatures(e.point, {
+        layers: ["buildings-fill", "trees-fill", "buildings-line", "trees-line"]
+      });
+      if (!features.length) return;
+
+      new maplibregl.Popup({ maxWidth: "340px" })
+        .setLngLat(e.lngLat)
+        .setHTML(popupHtml(features[0]))
+        .addTo(map);
+    });
+
+    for (const layerId of ["buildings-fill", "trees-fill"]) {
+      map.on("mouseenter", layerId, () => {
+        map.getCanvas().style.cursor = "pointer";
+      });
+      map.on("mouseleave", layerId, () => {
+        map.getCanvas().style.cursor = "";
+      });
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file

From fb3fcc16b175256125f5d45c4fd5ddc3fe4aec2e Mon Sep 17 00:00:00 2001
From: Gordon McDonald <gordon27@gmail.com>
Date: Tue, 10 Mar 2026 10:46:38 +1100
Subject: [PATCH 2/3] Delete map/index.html

---
 map/index.html | 359 -------------------------------------------------
 1 file changed, 359 deletions(-)
 delete mode 100644 map/index.html

diff --git a/map/index.html b/map/index.html
deleted file mode 100644
index 91eeb9f..0000000
--- a/map/index.html
+++ /dev/null
@@ -1,359 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Greater Sydney Trees & Buildings</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link
-    href="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.css"
-    rel="stylesheet"
-  />
-  <style>
-    html, body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background: #111;
-    }
-
-    #map {
-      width: 100%;
-      height: 100%;
-    }
-
-    .controls {
-      position: absolute;
-      top: 12px;
-      left: 12px;
-      z-index: 1000;
-      background: rgba(20, 20, 20, 0.92);
-      color: white;
-      padding: 12px 14px;
-      border-radius: 10px;
-      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
-      min-width: 220px;
-    }
-
-    .controls h1 {
-      font-size: 14px;
-      margin: 0 0 10px 0;
-      font-weight: 600;
-    }
-
-    .controls label {
-      display: block;
-      font-size: 14px;
-      margin: 6px 0;
-      cursor: pointer;
-    }
-
-    .controls input[type="checkbox"] {
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-
-    .controls button {
-      margin-top: 10px;
-      width: 100%;
-      padding: 8px 10px;
-      border: 0;
-      border-radius: 8px;
-      background: #2d6cdf;
-      color: white;
-      cursor: pointer;
-      font-size: 14px;
-    }
-
-    .controls button:hover {
-      background: #2459b8;
-    }
-
-    .note {
-      margin-top: 10px;
-      font-size: 12px;
-      line-height: 1.35;
-      color: #cfcfcf;
-    }
-
-    .maplibregl-popup-content {
-      max-width: 320px;
-      font-size: 13px;
-      line-height: 1.4;
-    }
-
-    .popup-table {
-      border-collapse: collapse;
-      width: 100%;
-      margin-top: 6px;
-    }
-
-    .popup-table td {
-      border-top: 1px solid #ddd;
-      padding: 4px 6px;
-      vertical-align: top;
-      font-size: 12px;
-    }
-
-    .popup-table td:first-child {
-      font-weight: 600;
-      width: 110px;
-    }
-  </style>
-</head>
-<body>
-  <div id="map"></div>
-
-  <div class="controls">
-    <h1>Greater Sydney Trees & Buildings</h1>
-
-    <label><input type="checkbox" id="imageryToggle" checked /> Imagery</label>
-    <label><input type="checkbox" id="labelsToggle" checked /> Labels</label>
-    <label><input type="checkbox" id="buildingsToggle" checked /> Buildings</label>
-    <label><input type="checkbox" id="treesToggle" checked /> Tree patches</label>
-
-    <button id="fitBtn">Fit to data</button>
-
-    <div class="note">
-      Click a feature to inspect its properties.
-    </div>
-  </div>
-
-  <script type="module">
-    import maplibregl from "https://esm.sh/maplibre-gl@5.3.0";
-    import { Protocol } from "https://esm.sh/pmtiles@4.3.0";
-    import { layers, namedFlavor } from "https://esm.sh/protomaps";
-
-    const PMTILES_URL =
-      "https://huggingface.co/datasets/SIH/Greater-Sydney-Trees-Buildings/resolve/main/greater-sydney-trees-buildings.pmtiles?download=1";
-
-    const protocol = new Protocol();
-    maplibregl.addProtocol("pmtiles", protocol.tile);
-
-    const p = new protocol.pmtiles.PMTiles(PMTILES_URL);
-    protocol.add(p);
-
-    const metadata = await p.getMetadata();
-    const header = await p.getHeader();
-
-    const bounds = [
-      [header.minLon, header.minLat],
-      [header.maxLon, header.maxLat]
-    ];
-
-    const labelLayers = layers("labels", namedFlavor("light"), {
-      lang: "en",
-      labelsOnly: true
-    });
-
-    const map = new maplibregl.Map({
-      container: "map",
-      hash: true,
-      attributionControl: true,
-      style: {
-        version: 8,
-        glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
-        sprite: "https://protomaps.github.io/basemaps-assets/sprites/v4/light",
-        sources: {
-          imagery: {
-            type: "raster",
-            tiles: [
-              "https://maps.six.nsw.gov.au/arcgis/rest/services/public/NSW_Imagery/MapServer/tile/{z}/{y}/{x}"
-            ],
-            tileSize: 256,
-            minzoom: 0,
-            maxzoom: 23,
-            attribution: "Imagery © NSW Spatial Services / Department of Customer Service"
-          },
-          labels: {
-            type: "vector",
-            tiles: [
-              "https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f"
-            ],
-            maxzoom: 15,
-            attribution: "Labels/data © OpenStreetMap contributors"
-          },
-          gs: {
-            type: "vector",
-            url: `pmtiles://${PMTILES_URL}`
-          }
-        },
-        layers: [
-          {
-            id: "imagery",
-            type: "raster",
-            source: "imagery",
-            paint: {
-              "raster-resampling": "linear"
-            }
-          },
-
-          {
-            id: "buildings-fill",
-            type: "fill",
-            source: "gs",
-            "source-layer": "buildings",
-            paint: {
-              "fill-color": "#7a7a7a",
-              "fill-opacity": 0.32
-            }
-          },
-          {
-            id: "buildings-line",
-            type: "line",
-            source: "gs",
-            "source-layer": "buildings",
-            paint: {
-              "line-color": "#4f4f4f",
-              "line-width": [
-                "interpolate", ["linear"], ["zoom"],
-                12, 0.2,
-                18, 1.0
-              ],
-              "line-opacity": 0.8
-            }
-          },
-
-          {
-            id: "trees-fill",
-            type: "fill",
-            source: "gs",
-            "source-layer": "tree_patches",
-            paint: {
-              "fill-color": "#2f8f46",
-              "fill-opacity": 0.28
-            }
-          },
-          {
-            id: "trees-line",
-            type: "line",
-            source: "gs",
-            "source-layer": "tree_patches",
-            paint: {
-              "line-color": "#1f6a33",
-              "line-width": [
-                "interpolate", ["linear"], ["zoom"],
-                12, 0.2,
-                18, 0.8
-              ],
-              "line-opacity": 0.7
-            }
-          },
-
-          ...labelLayers
-        ]
-      }
-    });
-
-    map.addControl(new maplibregl.NavigationControl(), "top-right");
-
-    map.on("load", () => {
-      map.fitBounds(bounds, { padding: 30, animate: false });
-
-      // Make label layers identifiable for toggling
-      for (const layer of map.getStyle().layers) {
-        if ("source" in layer && layer.source === "labels") {
-          map.setLayoutProperty(layer.id, "visibility", "visible");
-        }
-      }
-    });
-
-    function setLayerVisibility(layerIds, visible) {
-      const v = visible ? "visible" : "none";
-      for (const id of layerIds) {
-        if (map.getLayer(id)) {
-          map.setLayoutProperty(id, "visibility", v);
-        }
-      }
-    }
-
-    function setSourceVisibility(sourceName, visible) {
-      const v = visible ? "visible" : "none";
-      for (const layer of map.getStyle().layers) {
-        if ("source" in layer && layer.source === sourceName) {
-          map.setLayoutProperty(layer.id, "visibility", v);
-        }
-      }
-    }
-
-    document.getElementById("imageryToggle").addEventListener("change", (e) => {
-      setLayerVisibility(["imagery"], e.target.checked);
-    });
-
-    document.getElementById("labelsToggle").addEventListener("change", (e) => {
-      setSourceVisibility("labels", e.target.checked);
-    });
-
-    document.getElementById("buildingsToggle").addEventListener("change", (e) => {
-      setLayerVisibility(["buildings-fill", "buildings-line"], e.target.checked);
-    });
-
-    document.getElementById("treesToggle").addEventListener("change", (e) => {
-      setLayerVisibility(["trees-fill", "trees-line"], e.target.checked);
-    });
-
-    document.getElementById("fitBtn").addEventListener("click", () => {
-      map.fitBounds(bounds, { padding: 30, animate: true });
-    });
-
-    function popupHtml(feature) {
-      const props = feature.properties || {};
-      const rows = Object.entries(props)
-        .slice(0, 20)
-        .map(([k, v]) => `<tr><td>${escapeHtml(k)}</td><td>${escapeHtml(String(v))}</td></tr>`)
-        .join("");
-
-      const layerName = feature.sourceLayer || "unknown";
-
-      return `
-        <div>
-          <div><strong>Layer:</strong> ${escapeHtml(layerName)}</div>
-          <table class="popup-table">
-            ${rows || "<tr><td colspan='2'>No properties</td></tr>"}
-          </table>
-        </div>
-      `;
-    }
-
-    function escapeHtml(str) {
-      return str
-        .replaceAll("&", "&amp;")
-        .replaceAll("<", "&lt;")
-        .replaceAll(">", "&gt;")
-        .replaceAll('"', "&quot;")
-        .replaceAll("'", "&#039;");
-    }
-
-    map.on("click", (e) => {
-      const features = map.queryRenderedFeatures(e.point, {
-        layers: ["buildings-fill", "trees-fill", "buildings-line", "trees-line"]
-      });
-
-      if (!features.length) return;
-
-      const feature = features[0];
-      new maplibregl.Popup({ maxWidth: "340px" })
-        .setLngLat(e.lngLat)
-        .setHTML(popupHtml(feature))
-        .addTo(map);
-    });
-
-    map.on("mouseenter", "buildings-fill", () => {
-      map.getCanvas().style.cursor = "pointer";
-    });
-    map.on("mouseleave", "buildings-fill", () => {
-      map.getCanvas().style.cursor = "";
-    });
-    map.on("mouseenter", "trees-fill", () => {
-      map.getCanvas().style.cursor = "pointer";
-    });
-    map.on("mouseleave", "trees-fill", () => {
-      map.getCanvas().style.cursor = "";
-    });
-
-    console.log("PMTiles metadata:", metadata);
-    console.log("PMTiles header:", header);
-  </script>
-</body>
-</html>
\ No newline at end of file

From 66ad45570eb9c6cbb6b9968704b16577b7aac5f6 Mon Sep 17 00:00:00 2001
From: Gordon McDonald <gordon27@gmail.com>
Date: Tue, 10 Mar 2026 10:47:00 +1100
Subject: [PATCH 3/3] Rename viewer.html to index.html

---
 map/{viewer.html => index.html} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename map/{viewer.html => index.html} (99%)

diff --git a/map/viewer.html b/map/index.html
similarity index 99%
rename from map/viewer.html
rename to map/index.html
index cb121a3..71c6cc3 100644
--- a/map/viewer.html
+++ b/map/index.html
@@ -262,4 +262,4 @@ <h1>Greater Sydney Trees & Buildings</h1>
     }
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
