@map-zero/ol 0.2.0 → 0.3.0

package/README.md

@@ -0,0 +1,8 @@
+# @map-zero/ol
+
+OpenLayers integration helpers for map-zero packages.
+
+See the main repository for documentation, examples, and release notes:
+
+https://github.com/mploscos/map-zero
+

package/package.json

@@ -1,12 +1,29 @@
 {
   "name": "@map-zero/ol",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "OpenLayers integration helper for map-zero packages.",
+  "license": "MIT",
+  "homepage": "https://github.com/mploscos/map-zero#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mploscos/map-zero.git",
+    "directory": "packages/ol"
+  },
+  "bugs": {
+    "url": "https://github.com/mploscos/map-zero/issues"
+  },
   "main": "./src/index.js",
   "exports": {
     ".": "./src/index.js"
   },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "@map-zero/raster": "0.3.0"
+  },
   "peerDependencies": {
     "ol": "^10.9.0",
     "pmtiles": "^4.4.1"

package/src/index.js

@@ -7,6 +7,10 @@ import VectorTileSource from 'ol/source/VectorTile.js';
 import { createXYZ } from 'ol/tilegrid.js';
 import { PMTiles } from 'pmtiles';
 
+import { isAipLayer, layerAlias } from '../../raster/src/shared/layers.js';
+import { pmtilesInfo } from '../../raster/src/shared/manifest.js';
+import { clampInteger, clampNumber } from '../../raster/src/shared/math.js';
+
 import {
   activeLabelLayerIdsForZoom,
   createMapZeroLabelLayer,
@@ -15,6 +19,35 @@ import {
 
 let autoInstanceCounter = 0;
 
+const ROAD_HIGHWAY_DRAW_ORDER = [
+  'platform',
+  'corridor',
+  'steps',
+  'footway',
+  'cycleway',
+  'path',
+  'track',
+  'service',
+  'construction',
+  'proposed',
+  'living_street',
+  'pedestrian',
+  'road',
+  'unclassified',
+  'residential',
+  'busway',
+  'tertiary_link',
+  'tertiary',
+  'secondary_link',
+  'secondary',
+  'primary_link',
+  'primary',
+  'trunk_link',
+  'trunk',
+  'motorway_link',
+  'motorway'
+];
+
 /**
  * @typedef {{
  *   id?: string,
@@ -25,7 +58,6 @@ let autoInstanceCounter = 0;
  *   source?: 'auto' | 'pmtiles' | 'dynamic',
  *   renderMode?: 'vector' | 'raster-worker',
  *   workerUrl?: string | URL,
- *   rasterWorkerUrl?: string | URL,
  *   rasterPixelRatio?: number,
  *   overzoomLevels?: number,
  *   edgeGuardPixels?: number,
@@ -131,7 +163,7 @@ export async function createMapZeroOpenLayersLayers(options) {
   applyLayerZIndex(layer, orderedLayers, styleDocument, options.zIndexBase);
   if (labelController) {
     tagOpenLayersLayer(labelController.layer, instanceId, orderedLayers.map((item) => item.id), 'labels');
-    labelController.layer.setZIndex(layer.getZIndex() + 100);
+    labelController.layer.setZIndex(layer.getZIndex() + 1);
   }
 
   const refresh = () => {
@@ -208,7 +240,7 @@ function createRasterWorkerController(context, options) {
     manifestUrl: context.manifestUrl,
     styleDocument: context.styleDocument,
     layers: context.orderedLayers.map((layer) => layer.id),
-    workerUrl: options.rasterWorkerUrl ?? options.workerUrl ?? new URL('@map-zero/cesium/imagery-worker.js', import.meta.url),
+    workerUrl: options.workerUrl ?? new URL('@map-zero/raster/imagery-worker.js', import.meta.url),
     rasterPixelRatio: options.rasterPixelRatio,
     overzoomLevels: options.overzoomLevels,
     edgeGuardPixels: options.edgeGuardPixels
@@ -244,7 +276,7 @@ function createRasterWorkerController(context, options) {
 
   const refresh = () => {
     worker.setVisibleLayers(context.layerVisibility);
-    source.clear();
+    refreshRasterSource(source);
     layer.changed();
   };
 
@@ -269,13 +301,18 @@ function createRasterWorkerController(context, options) {
       layer.setOpacity(clamp(Number(opacity), 0, 1));
     },
     destroy() {
-      source.clear();
+      refreshRasterSource(source);
       worker.destroy();
       layer.dispose();
     }
   };
 }
 
+function refreshRasterSource(source) {
+  source.clear();
+  source.refresh?.();
+}
+
 class MapZeroRasterTileWorker {
   /**
    * @param {{
@@ -283,10 +320,10 @@ class MapZeroRasterTileWorker {
    *   manifestUrl: string,
    *   styleDocument: Record<string, unknown>,
    *   layers: string[],
- *   workerUrl: string | URL,
- *   rasterPixelRatio?: number,
- *   overzoomLevels?: number,
- *   edgeGuardPixels?: number
+   *   workerUrl: string | URL,
+   *   rasterPixelRatio?: number,
+   *   overzoomLevels?: number,
+   *   edgeGuardPixels?: number
    * }} options
    */
   constructor(options) {
@@ -533,11 +570,7 @@ function createLayerVisibility(orderedLayers, styleDocument, visibleLayers) {
  * @param {number | undefined} zIndexBase
  */
 function applyLayerZIndex(layer, orderedLayers, styleDocument, zIndexBase) {
-  const maxOrder = orderedLayers.reduce((max, item) => {
-    const order = Number(getLayerRule(styleDocument, item).order);
-    return Number.isFinite(order) ? Math.max(max, order) : max;
-  }, 0);
-  layer.setZIndex((Number.isFinite(Number(zIndexBase)) ? Number(zIndexBase) : 0) + maxOrder);
+  layer.setZIndex(Number.isFinite(Number(zIndexBase)) ? Number(zIndexBase) : 0);
 }
 
 /**
@@ -968,11 +1001,54 @@ function createWebGlStyles(context) {
 function createRoadStyleRules(filter, rule, layerOpacity) {
   return [
     ...createRoadSemanticUnderlayRules(filter, rule, layerOpacity),
-    ...createLayerStyleRules(filter, rule, 'line', 'roads', layerOpacity),
+    ...createRoadPriorityStyleRules(filter, rule, layerOpacity),
     ...createRoadSemanticOverlayRules(filter, rule, layerOpacity)
   ];
 }
 
+/**
+ * Draw road classes from least important to most important so local/darker
+ * roads stay below brighter major roads at intersections.
+ *
+ * @param {unknown[]} filter
+ * @param {Record<string, unknown>} rule
+ * @param {Map<string, number>} layerOpacity
+ * @returns {Array<{ filter: unknown[], style: Record<string, unknown> }>}
+ */
+function createRoadPriorityStyleRules(filter, rule, layerOpacity) {
+  const highwayRules = roadHighwayRules(rule);
+  if (!highwayRules) {
+    return createLayerStyleRules(filter, rule, 'line', 'roads', layerOpacity);
+  }
+
+  const entries = [];
+  const orderedHighways = orderedRoadHighwayValues(highwayRules);
+  const baseRule = removeStylePropertyRules(rule, 'highway');
+  const fallbackFilter = ['all', filter, ['!', propertyIn('highway', orderedHighways)]];
+  entries.push({
+    filter: fallbackFilter,
+    rule: baseRule
+  });
+
+  for (const highway of orderedHighways) {
+    const override = highwayRules[highway];
+    if (styleOverrideVisible(override) === false) {
+      continue;
+    }
+
+    const highwayFilter = roadOverrideZoomFilter(
+      ['all', filter, propertyEquals('highway', highway)],
+      override
+    );
+    entries.push({
+      filter: highwayFilter,
+      rule: mergeStyleOverride(baseRule, override)
+    });
+  }
+
+  return createPhasedRoadStyleRules(entries, layerOpacity);
+}
+
 /**
  * @param {unknown[]} filter
  * @param {Record<string, unknown>} rule
@@ -1229,6 +1305,132 @@ function createLayerStyleRules(filter, rule, layerType, layerId, layerOpacity) {
   }));
 }
 
+/**
+ * @param {Array<{ filter: unknown[], rule: Record<string, unknown> }>} entries
+ * @param {Map<string, number>} layerOpacity
+ * @returns {Array<{ filter: unknown[], style: Record<string, unknown> }>}
+ */
+function createPhasedRoadStyleRules(entries, layerOpacity) {
+  const phases = [];
+  for (const entry of entries) {
+    const visibleFilter = createPropertyVisibilityFilter(entry.filter, entry.rule);
+    const parts = createLayerStyleParts(entry.rule, 'line', 'roads', layerOpacity);
+    for (let index = 0; index < parts.length; index += 1) {
+      if (!phases[index]) {
+        phases[index] = [];
+      }
+      phases[index].push({
+        filter: visibleFilter,
+        style: parts[index]
+      });
+    }
+  }
+
+  return phases.flat();
+}
+
+/**
+ * @param {Record<string, unknown>} rule
+ * @returns {Record<string, unknown> | null}
+ */
+function roadHighwayRules(rule) {
+  const byProperty = rule.byProperty && typeof rule.byProperty === 'object'
+    ? /** @type {Record<string, unknown>} */ (rule.byProperty)
+    : null;
+  const highway = byProperty?.highway;
+  return highway && typeof highway === 'object'
+    ? /** @type {Record<string, unknown>} */ (highway)
+    : null;
+}
+
+/**
+ * @param {Record<string, unknown>} values
+ * @returns {string[]}
+ */
+function orderedRoadHighwayValues(values) {
+  const configured = Object.keys(values);
+  const ordered = ROAD_HIGHWAY_DRAW_ORDER.filter((value) => configured.includes(value));
+  return [
+    ...configured.filter((value) => !ROAD_HIGHWAY_DRAW_ORDER.includes(value)),
+    ...ordered
+  ];
+}
+
+/**
+ * @param {Record<string, unknown>} rule
+ * @param {string} property
+ * @returns {Record<string, unknown>}
+ */
+function removeStylePropertyRules(rule, property) {
+  const byProperty = rule.byProperty && typeof rule.byProperty === 'object'
+    ? { .../** @type {Record<string, unknown>} */ (rule.byProperty) }
+    : null;
+  if (!byProperty || !(property in byProperty)) {
+    return rule;
+  }
+
+  delete byProperty[property];
+  const stripped = { ...rule };
+  if (Object.keys(byProperty).length === 0) {
+    delete stripped.byProperty;
+  } else {
+    stripped.byProperty = byProperty;
+  }
+  return stripped;
+}
+
+/**
+ * @param {Record<string, unknown>} rule
+ * @param {unknown} override
+ * @returns {Record<string, unknown>}
+ */
+function mergeStyleOverride(rule, override) {
+  if (!override || typeof override !== 'object') {
+    return rule;
+  }
+
+  const merged = {
+    ...rule,
+    .../** @type {Record<string, unknown>} */ (override)
+  };
+  for (const key of ['body', 'casing', 'center', 'centerLine', 'glow', 'semantics', 'visibility']) {
+    const baseValue = rule[key];
+    const overrideValue = /** @type {Record<string, unknown>} */ (override)[key];
+    if (
+      baseValue && typeof baseValue === 'object' &&
+      overrideValue && typeof overrideValue === 'object'
+    ) {
+      merged[key] = {
+        .../** @type {Record<string, unknown>} */ (baseValue),
+        .../** @type {Record<string, unknown>} */ (overrideValue)
+      };
+    }
+  }
+
+  return normalizeStyleRule(merged);
+}
+
+/**
+ * @param {unknown[]} filter
+ * @param {unknown} override
+ * @returns {unknown[]}
+ */
+function roadOverrideZoomFilter(filter, override) {
+  if (!override || typeof override !== 'object') {
+    return filter;
+  }
+
+  const normalized = normalizeStyleRule(/** @type {Record<string, unknown>} */ (override));
+  let next = filter;
+  if (Number.isFinite(normalized.minZoom)) {
+    next = ['all', next, ['>=', ['zoom'], Number(normalized.minZoom)]];
+  }
+  if (Number.isFinite(normalized.maxZoom)) {
+    next = ['all', next, ['<=', ['zoom'], Number(normalized.maxZoom)]];
+  }
+  return next;
+}
+
 /**
  * @param {unknown[]} filter
  * @param {Record<string, unknown>} rule
@@ -1480,24 +1682,6 @@ function getLayerRule(styleDocument, layer) {
   return normalizeStyleRule(layers[id] || layers[layerAlias(id)] || {});
 }
 
-/**
- * @param {string} layerId
- * @returns {boolean}
- */
-function isAipLayer(layerId) {
-  return layerId === 'aip' || layerId === 'aviation';
-}
-
-/**
- * @param {string} layerId
- * @returns {string}
- */
-function layerAlias(layerId) {
-  if (layerId === 'aip') return 'aviation';
-  if (layerId === 'aviation') return 'aip';
-  return layerId;
-}
-
 /**
  * Normalize the public declarative style schema to the internal style keys.
  *
@@ -1912,15 +2096,6 @@ function isValidTileCoord(z, x, y) {
   return Number.isInteger(x) && Number.isInteger(y) && x >= 0 && y >= 0 && x < maxIndex && y < maxIndex;
 }
 
-/**
- * @param {Record<string, unknown>} manifest
- * @returns {{ url?: string, minZoom?: unknown, maxZoom?: unknown }}
- */
-function pmtilesInfo(manifest) {
-  const tiles = manifest.tiles && typeof manifest.tiles === 'object' ? manifest.tiles : {};
-  return /** @type {{ url?: string, minZoom?: unknown, maxZoom?: unknown }} */ (tiles);
-}
-
 /**
  * @param {number} width
  * @param {number} height
@@ -1953,28 +2128,6 @@ function preferNearestZoomLevel(value, high, low) {
   return value - low * Math.sqrt(high / low);
 }
 
-/**
- * @param {unknown} value
- * @param {number} min
- * @param {number} max
- * @returns {number}
- */
-function clampInteger(value, min, max) {
-  const number = Math.trunc(Number(value));
-  return Number.isFinite(number) ? Math.max(min, Math.min(max, number)) : min;
-}
-
-/**
- * @param {unknown} value
- * @param {number} min
- * @param {number} max
- * @returns {number}
- */
-function clampNumber(value, min, max) {
-  const number = Number(value);
-  return Number.isFinite(number) ? Math.max(min, Math.min(max, number)) : min;
-}
-
 /**
  * @param {number} z
  * @param {number} x

package/src/labels.js

@@ -525,30 +525,38 @@ function aviationLabel(feature, aeroway, zoom) {
   const name = cleanText(feature.get('name'));
 
   if (aeroway === 'aerodrome' || aeroway === 'heliport') {
-    const text = name || aviationRefText(ref) || (aeroway === 'heliport' ? 'H' : '');
-    return isRenderableAviationText(text, aeroway) && zoom >= 11 && zoom < 15
+    const text = name || aviationRefText(ref) || aviationFallbackText(aeroway);
+    return isRenderableAviationText(text, aeroway) && zoom >= 9
       ? { text, placement: 'point', priorityClass: 'critical', zIndex: 980 }
       : null;
   }
 
   if (aeroway === 'runway') {
     const text = aviationRefText(ref) || name || 'RWY';
-    return isRenderableAviationText(text, aeroway) && zoom >= 12 ? { text, placement: 'line', priorityClass: 'important', zIndex: 900 } : null;
+    return isRenderableAviationText(text, aeroway) && zoom >= 11 ? { text, placement: 'line', priorityClass: 'important', zIndex: 900 } : null;
   }
 
   if (aeroway === 'terminal' || aeroway === 'apron') {
-    const text = name || ref;
-    return isMeaningfulLabel(text) && zoom >= 15 ? { text, placement: 'point', priorityClass: 'normal', zIndex: 720 } : null;
+    const text = name || ref || aviationFallbackText(aeroway);
+    return isMeaningfulLabel(text) && zoom >= 14 ? { text, placement: 'point', priorityClass: 'normal', zIndex: 720 } : null;
   }
 
   if (aeroway === 'helipad') {
     const text = aviationRefText(ref) || name || 'H';
-    return isRenderableAviationText(text, aeroway) && zoom >= 14 ? { text, placement: 'point', priorityClass: 'critical', zIndex: 980 } : null;
+    return isRenderableAviationText(text, aeroway) && zoom >= 12 ? { text, placement: 'point', priorityClass: 'critical', zIndex: 980 } : null;
   }
 
   return null;
 }
 
+function aviationFallbackText(aeroway) {
+  if (aeroway === 'aerodrome') return 'Aerodrome';
+  if (aeroway === 'heliport') return 'Heliport';
+  if (aeroway === 'terminal') return 'Terminal';
+  if (aeroway === 'apron') return 'Apron';
+  return cleanText(aeroway).replace(/_/g, ' ');
+}
+
 /**
  * @param {{
  *   cache: Map<string, Style>,
@@ -664,7 +672,81 @@ function poiLabelText(feature) {
     }
   }
 
-  return '';
+  return poiFallbackLabel(feature);
+}
+
+function poiFallbackLabel(feature) {
+  const candidates = [
+    ['military', {
+      airbase: 'Airbase',
+      airfield: 'Airfield',
+      barracks: 'Barracks',
+      bunker: 'Bunker',
+      checkpoint: 'Checkpoint',
+      naval_base: 'Naval base',
+      range: 'Range',
+      training_area: 'Training area',
+      danger_area: 'Danger area',
+      ammunition_dump: 'Ammunition dump',
+      base: 'Base'
+    }],
+    ['emergency', {
+      ambulance_station: 'Ambulance station',
+      siren: 'Siren',
+      assembly_point: 'Assembly point',
+      disaster_response: 'Disaster response'
+    }],
+    ['amenity', {
+      hospital: 'Hospital',
+      police: 'Police',
+      fire_station: 'Fire station',
+      shelter: 'Shelter',
+      bunker: 'Bunker',
+      checkpoint: 'Checkpoint',
+      depot: 'Depot',
+      warehouse: 'Warehouse',
+      prison: 'Prison',
+      courthouse: 'Courthouse',
+      townhall: 'Town hall',
+      bus_station: 'Bus station',
+      ferry_terminal: 'Ferry terminal'
+    }],
+    ['power', {
+      plant: 'Power plant',
+      substation: 'Substation',
+      generator: 'Generator',
+      tower: 'Power tower',
+      transformer: 'Transformer',
+      line: 'Power line'
+    }],
+    ['man_made', {
+      communications_tower: 'Comms tower',
+      mast: 'Mast',
+      antenna: 'Antenna'
+    }],
+    ['boundary', {
+      protected_area: 'Protected area'
+    }],
+    ['landuse', {
+      industrial: 'Industrial'
+    }],
+    ['industrial', {
+      refinery: 'Refinery',
+      depot: 'Depot',
+      storage: 'Storage',
+      logistics: 'Logistics'
+    }]
+  ];
+
+  for (const [property, labels] of candidates) {
+    const value = cleanText(feature.get(property));
+    if (value && labels[value]) {
+      return labels[value];
+    }
+  }
+
+  const category = poiCategoryForFeature(feature);
+  return category === 'consumer' ? '' : titleCase(category);
 }
 
 /**
@@ -804,6 +886,12 @@ function cleanText(value) {
   return String(value ?? '').replace(/\s+/g, ' ').trim();
 }
 
+function titleCase(value) {
+  return cleanText(value)
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
 /**
  * @param {string} text
  * @returns {boolean}