Allow for underzoom on Overture layer.

njhenry · njhenry · commit 5bf475c28f09 · 2026-06-29T12:43:42.000-07:00
diff --git a/.claude/skills/conflate-snapshots/SKILL.md b/.claude/skills/conflate-snapshots/SKILL.md
@@ -112,7 +112,11 @@ upload for web consumption.
 
 ## Next
 
-- Bump the frontend: [skills/update-site](../update-site/SKILL.md).
+- **Always bump the frontend after a successful upload** — the site's PMTiles
+  URLs are pinned to a version folder and do **not** auto-follow new uploads, so
+  a refresh isn't complete until the frontend points at the new
+  `versions.source_coop`. Treat this as a required step of every monthly refresh,
+  not an optional follow-up: [skills/update-site](../update-site/SKILL.md).
 
 ## Key code
 
diff --git a/site/index.html b/site/index.html
@@ -8,7 +8,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/favicon-32x32.png" />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,700,0,0&icon_names=my_location"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,700,0,0&icon_names=my_location,zoom_in"
     />
   </head>
   <body>
diff --git a/site/src/assets/styles.css b/site/src/assets/styles.css
@@ -325,6 +325,31 @@ body,
   text-align: right;
 }
 
+/* Overture "zoom in" hint (Overture tiles are z14-only) */
+.overture-zoom-hint {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #444;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+}
+
+.overture-zoom-hint .material-symbols-outlined {
+  font-size: 20px;
+}
+
 /* Geolocation button */
 .geolocation-btn {
   position: absolute;
diff --git a/site/src/components/MapContainer.vue b/site/src/components/MapContainer.vue
@@ -14,6 +14,13 @@
       v-if="props.activeSource === 'osm' || props.activeSource === 'overture' || props.activeSource === 'conflated'"
     />
 
+    <!-- Overture's archive is z14-only; below the under-zoom floor we prompt
+         the user to zoom in rather than showing an empty map. -->
+    <div v-if="showOvertureZoomHint" class="overture-zoom-hint">
+      <span class="material-symbols-outlined">zoom_in</span>
+      Zoom in to see Overture POIs
+    </div>
+
     <!-- Desktop: native select -->
     <div class="basemap-switcher basemap-switcher-desktop">
       <select v-model="selectedStyle" @change="switchBaseMap">
@@ -60,7 +67,7 @@
 
 <script setup>
 import {
-  ref, shallowRef, watch, onMounted, onBeforeUnmount, nextTick,
+  ref, shallowRef, computed, watch, onMounted, onBeforeUnmount, nextTick,
 } from 'vue'
 import Map from 'ol/Map'
 import View from 'ol/View'
@@ -80,6 +87,7 @@ import {
   getOvertureLayer,
   updateOvertureFilters,
   wrapOvertureFeature,
+  OVERTURE_MIN_ZOOM,
 } from '../layers/overtureLayer.js'
 import {
   getConflatedLayer,
@@ -105,6 +113,13 @@ const popupEl = ref(null)
 const map = shallowRef(null)
 const popupOverlay = shallowRef(null)
 const selectedFeature = shallowRef(null)
+const currentZoom = ref(INITIAL_ZOOM)
+
+// Overture is z14-only and only renders above OVERTURE_MIN_ZOOM (see
+// overtureLayer.js); below the floor, prompt the user to zoom in.
+const showOvertureZoomHint = computed(
+  () => props.activeSource === 'overture' && currentZoom.value <= OVERTURE_MIN_ZOOM
+)
 const selectedStyle = ref('positron')
 const basemapModalOpen = ref(false)
 const baseMapStyles = BASE_MAP_STYLES
@@ -165,6 +180,10 @@ onMounted(async () => {
 
   useMapHash(olMap)
   if (!hashState) handleGeolocate()
+
+  // Track view zoom so the Overture "zoom in" hint can react to it.
+  currentZoom.value = view.getZoom()
+  view.on('change:resolution', () => { currentZoom.value = view.getZoom() })
 })
 
 onBeforeUnmount(() => {
diff --git a/site/src/layers/overtureLayer.js b/site/src/layers/overtureLayer.js
@@ -1,5 +1,7 @@
 import VectorTileLayer from 'ol/layer/VectorTile'
 import { PMTilesVectorSource } from 'ol-pmtiles'
+import { createXYZ } from 'ol/tilegrid'
+import { get as getProjection } from 'ol/proj'
 import { Style, Circle, Fill, Stroke } from 'ol/style'
 import {
   confidenceColor,
@@ -14,14 +16,35 @@ let layer = null
 // Style cache keyed by conf bucket (same discretisation as OSM layer)
 const styleCache = {}
 
+// Overture's hosted PMTiles archive contains tiles at z14 ONLY (unlike our
+// OSM/conflated archives, which carry a z10–z14 pyramid). OpenLayers does not
+// down-sample vector tiles, so without intervention Overture renders nothing
+// below z14. We pin the source tile grid to a single z14 level so OL reuses
+// the z14 tiles at lower view zooms (under-zoom), and floor rendering at
+// OVERTURE_MIN_ZOOM so we don't try to load a metro's worth of z14 tiles when
+// zoomed way out. Below the floor the UI shows a "zoom in" hint instead.
+export const OVERTURE_MIN_ZOOM = 13
+
+const overtureTileGrid = createXYZ({
+  extent: getProjection('EPSG:3857').getExtent(),
+  minZoom: 14,
+  maxZoom: 14,
+  tileSize: 512,
+})
+
 export function getOvertureLayer() {
   if (layer) return layer
 
   layer = new VectorTileLayer({
-    source: new PMTilesVectorSource({ url: OVERTURE_PMTILES_URL }),
+    source: new PMTilesVectorSource({
+      url: OVERTURE_PMTILES_URL,
+      tileGrid: overtureTileGrid,
+    }),
     style: overtureTileStyle,
     zIndex: 10,
     visible: false,
+    // minZoom is exclusive: the layer renders only at view zoom > OVERTURE_MIN_ZOOM.
+    minZoom: OVERTURE_MIN_ZOOM,
   })
   return layer
 }
