Merge pull request #33 from henryspatialanalysis/feature/pmtiles-z10

njhenry · web-flow · commit 14d6280eed0d · 2026-05-21T02:07:54.000-07:00
Allow zooms down to Z10
diff --git a/config.yaml b/config.yaml
@@ -322,11 +322,13 @@ publish:
     osm_snapshot_date: "2026-04-17"   # YYYY-MM-DD Geofabrik download date
     overture_release: "2026-04-15.0"  # Overture Maps release ID, https://docs.overturemaps.org/release-calendar/
     model_commit: null                # null → use current git HEAD; set a short SHA to pin
-  # PMTiles generation — single-zoom archive at z14 for both OSM and conflated.
-  # Site's View.minZoom is 14; OpenLayers over-zooms past z14 natively so
-  # z15-20 render as lossless geometric scale-ups of the z14 tile.
+  # PMTiles generation — multi-zoom archive z10–z14 for both OSM and conflated.
+  # Site's View.minZoom is 10 (full-metro view). z10–z14 are served directly
+  # from the PMTiles; z15+ render as lossless OL over-zooms of the z14 tile.
+  # drop-densest-as-needed silently drops features at lower zooms to keep
+  # each tile under ~500 KB; per-zoom point radius scales down on the site.
   pmtiles:
-    min_zoom: 14
+    min_zoom: 10
     max_zoom: 14
     drop_strategy: "drop-densest-as-needed"
     osm_layer_name: "osm_pois"
diff --git a/scripts/conflation/prepare_pmtiles.py b/scripts/conflation/prepare_pmtiles.py
@@ -1,10 +1,11 @@
 """
 Build conflated.pmtiles from the conflated POI dataset.
 
-Output is a single-zoom PMTiles archive (z14) keyed by the config's
-``upload.pmtiles`` block. OpenLayers over-zooms z15-20 natively, and the site
-never renders below z14, so tiling extra zoom levels would just waste disk and
-wall time.
+Output is a multi-zoom PMTiles archive (z10-z14 by default) keyed by the
+config's ``publish.pmtiles`` block. ``drop-densest-as-needed`` silently
+drops features at lower zooms to keep each tile under ~500 KB; the site
+scales the point radius down at lower zooms to match. OpenLayers
+over-zooms z15+ natively as lossless geometric scale-ups of the z14 tile.
 
 Intermediate FlatGeobuf is staged next to the output and deleted on success.
 """
diff --git a/scripts/osm_snapshot/prepare_pmtiles.py b/scripts/osm_snapshot/prepare_pmtiles.py
@@ -1,10 +1,11 @@
 """
 Build osm_snapshot.pmtiles from the rated OSM snapshot.
 
-Output is a single-zoom PMTiles archive (z14) keyed by the config's
-``upload.pmtiles`` block. OpenLayers over-zooms z15-20 natively, and the site
-never renders below z14, so tiling extra zoom levels would just waste disk and
-wall time.
+Output is a multi-zoom PMTiles archive (z10-z14 by default) keyed by the
+config's ``publish.pmtiles`` block. ``drop-densest-as-needed`` silently
+drops features at lower zooms to keep each tile under ~500 KB; the site
+scales the point radius down at lower zooms to match. OpenLayers
+over-zooms z15+ natively as lossless geometric scale-ups of the z14 tile.
 
 Intermediate FlatGeobuf is staged next to the output and deleted on success.
 """
diff --git a/site/src/constants.js b/site/src/constants.js
@@ -92,8 +92,9 @@ export const BASE_MAP_STYLES = [
 export const CONFLATED_LABELS = SHARED_LABELS
 
 // Zoom thresholds — PMTiles min_zoom (site can't zoom out below this).
-// Points above z14 are rendered via ol-pmtiles over-zoom.
-export const MIN_ZOOM = 14
+// PMTiles archives carry z10–z14; z15+ render via ol-pmtiles over-zoom.
+// Per-layer point radius scales down at lower zooms (see utils.js).
+export const MIN_ZOOM = 10
 
 // Stadia Maps Geocoding
 export const STADIA_GEOCODING_URL =
diff --git a/site/src/layers/conflatedLayer.js b/site/src/layers/conflatedLayer.js
@@ -1,7 +1,12 @@
 import VectorTileLayer from 'ol/layer/VectorTile'
 import { PMTilesVectorSource } from 'ol-pmtiles'
 import { Style, Circle, Fill, Stroke } from 'ol/style'
-import { confidenceColor, discretizeConf } from '../utils.js'
+import {
+  confidenceColor,
+  discretizeConf,
+  zoomTierFromResolution,
+  POI_DOT_BY_ZOOM,
+} from '../utils.js'
 import { CONFLATED_PMTILES_URL } from '../constants.js'
 
 let layer = null
@@ -40,25 +45,28 @@ export function updateConflatedFilters(filtersObj) {
   if (layer) layer.changed()
 }
 
-function conflatedTileStyle(feature) {
+function conflatedTileStyle(feature, resolution) {
   if (enabledLabels !== null) {
     const label = feature.get('shared_label')
     if (!enabledLabels.has(label)) return null
   }
 
   const conf = feature.get('conf_mean')
   const bucket = discretizeConf(conf)
-  if (!styleCache[bucket]) {
+  const tier = zoomTierFromResolution(resolution)
+  const key = `${bucket}|${tier}`
+  if (!styleCache[key]) {
     const color = confidenceColor(conf == null || isNaN(conf) ? null : conf)
-    styleCache[bucket] = new Style({
+    const { radius, stroke } = POI_DOT_BY_ZOOM[tier]
+    styleCache[key] = new Style({
       image: new Circle({
-        radius: 5,
+        radius,
         fill: new Fill({ color }),
-        stroke: new Stroke({ color: '#fff', width: 1 }),
+        stroke: new Stroke({ color: '#fff', width: stroke }),
       }),
     })
   }
-  return styleCache[bucket]
+  return styleCache[key]
 }
 
 /**
diff --git a/site/src/layers/osmLayer.js b/site/src/layers/osmLayer.js
@@ -1,7 +1,12 @@
 import VectorTileLayer from 'ol/layer/VectorTile'
 import { PMTilesVectorSource } from 'ol-pmtiles'
 import { Style, Circle, Fill, Stroke } from 'ol/style'
-import { confidenceColor, discretizeConf } from '../utils.js'
+import {
+  confidenceColor,
+  discretizeConf,
+  zoomTierFromResolution,
+  POI_DOT_BY_ZOOM,
+} from '../utils.js'
 import { OSM_PMTILES_URL } from '../constants.js'
 
 // OSM filter keys that drive feature visibility. A feature is visible when at
@@ -39,7 +44,7 @@ export function updateOsmFilters(filtersObj) {
   if (layer) layer.changed()
 }
 
-function osmTileStyle(feature) {
+function osmTileStyle(feature, resolution) {
   if (enabledKeys.size === 0) return null
 
   // Visibility: feature must have at least one enabled key set.
@@ -54,17 +59,20 @@ function osmTileStyle(feature) {
 
   const conf = feature.get('conf_mean')
   const bucket = discretizeConf(conf)
-  if (!styleCache[bucket]) {
+  const tier = zoomTierFromResolution(resolution)
+  const key = `${bucket}|${tier}`
+  if (!styleCache[key]) {
     const color = confidenceColor(conf == null || isNaN(conf) ? null : conf)
-    styleCache[bucket] = new Style({
+    const { radius, stroke } = POI_DOT_BY_ZOOM[tier]
+    styleCache[key] = new Style({
       image: new Circle({
-        radius: 5,
+        radius,
         fill: new Fill({ color }),
-        stroke: new Stroke({ color: '#fff', width: 1 }),
+        stroke: new Stroke({ color: '#fff', width: stroke }),
       }),
     })
   }
-  return styleCache[bucket]
+  return styleCache[key]
 }
 
 /**
diff --git a/site/src/layers/overtureLayer.js b/site/src/layers/overtureLayer.js
@@ -1,7 +1,12 @@
 import VectorTileLayer from 'ol/layer/VectorTile'
 import { PMTilesVectorSource } from 'ol-pmtiles'
 import { Style, Circle, Fill, Stroke } from 'ol/style'
-import { confidenceColor, discretizeConf } from '../utils.js'
+import {
+  confidenceColor,
+  discretizeConf,
+  zoomTierFromResolution,
+  POI_DOT_BY_ZOOM,
+} from '../utils.js'
 import { OVERTURE_PMTILES_URL } from '../constants.js'
 
 let layer = null
@@ -28,23 +33,26 @@ export function getOvertureLayer() {
  */
 export function updateOvertureFilters(_filtersObj) {}
 
-function overtureTileStyle(feature) {
+function overtureTileStyle(feature, resolution) {
   const cats = tryParse(feature.get('categories'))
   if (cats?.primary === 'parking') return null
 
   const conf = feature.get('confidence')
   const bucket = discretizeConf(conf)
-  if (!styleCache[bucket]) {
+  const tier = zoomTierFromResolution(resolution)
+  const key = `${bucket}|${tier}`
+  if (!styleCache[key]) {
     const color = confidenceColor(conf ?? null)
-    styleCache[bucket] = new Style({
+    const { radius, stroke } = POI_DOT_BY_ZOOM[tier]
+    styleCache[key] = new Style({
       image: new Circle({
-        radius: 5,
+        radius,
         fill: new Fill({ color }),
-        stroke: new Stroke({ color: '#fff', width: 1 }),
+        stroke: new Stroke({ color: '#fff', width: stroke }),
       }),
     })
   }
-  return styleCache[bucket]
+  return styleCache[key]
 }
 
 /**
diff --git a/site/src/utils.js b/site/src/utils.js
@@ -42,3 +42,26 @@ export function confidenceColor(value) {
   const b = lerpChannel(lo.b, hi.b, t)
   return `rgb(${r},${g},${b})`
 }
+
+// Spherical-mercator resolution → integer zoom tier in [10, 14].
+// 40075016.6855784 / 256 ≈ 156543.03 m/px at z0; resolution halves per zoom.
+// Clamps to the tile range that prepare_pmtiles emits, so z15+ over-zoom and
+// any sub-z10 view (shouldn't happen — View.minZoom is 10) both fall through.
+export function zoomTierFromResolution(resolution) {
+  const z = Math.log2(156543.03392804097 / resolution)
+  if (z >= 13.5) return 14
+  if (z >= 12.5) return 13
+  if (z >= 11.5) return 12
+  if (z >= 10.5) return 11
+  return 10
+}
+
+// Radius / stroke width by zoom tier. Tuned so dense urban areas stop smearing
+// at low zoom while keeping z14 visually identical to the prior fixed-5 dots.
+export const POI_DOT_BY_ZOOM = {
+  14: { radius: 5,   stroke: 1 },
+  13: { radius: 4,   stroke: 1 },
+  12: { radius: 3,   stroke: 0.75 },
+  11: { radius: 2.5, stroke: 0.5 },
+  10: { radius: 2,   stroke: 0.5 },
+}
