New zoom-aware styling for point layers.

Author: njhenry

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 =

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]
 }
 
 /**

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]
 }
 
 /**

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]
 }
 
 /**

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 },
+}