leaflet-city-mapper 0.0.6 → 0.0.8

package/src/scene/layerInitialize.js

@@ -12,6 +12,9 @@ import { loading } from '../globals/loading.js';
 
 
 import { init3D } from './init3D.js';
+import { initializeGeoJSON } from '../sources/initializeGeoJSON.js';
+import { isVectorTileSource } from '../sources/isVectorTileSource.js';
+import { initVectorTiles } from '../sources/initVectorTiles.js';
 import { noOperation } from '../utils/noOperation.js';
 import { resolveNextInitialization } from './resolveNextInitialization.js';
 import { initializeLayer } from './initializeLayer.js';
@@ -25,21 +28,20 @@ export function layerInitialize(options = sceneEmptyOptions) {
     L.Util.setOptions(this, options);
     return;
   }
-  const {
-    source: {
-      type = options.source.data?.type === 'FeatureCollection'
-        ? 'geojson'
-        : /\.pmtiles(?:[?#]|$)/i.test(options.source.url) ? 'pmtiles'
-        : /\.tiff?(?:[?#]|$)/i.test(options.source.url) ? 'cog' : '3d',
-      ...source
-    },
-    ...core
-  } = options;
+  const { source: { type = /\.pmtiles(?:[?#]|$)|\.tiff?(?:[?#]|$)/i.test(options.source.url)
+    ? 'raster' : 'vector', ...source }, ...core } = options;
   const settings = /* alloc */ { ...source, ...core };
   L.Util.setOptions(this, core);
   typeByLayer.set(this, type);
-  if (type === '3d') {
-    init3D(this, settings);
+  if (type === 'vector') {
+    if (isVectorTileSource(settings)) {
+      initVectorTiles(this, settings);
+    } else if (settings.data !== undefined || settings.style !== undefined && !settings.url ||
+        settings.url && !/\.(?:pmtiles|glb|gltf)(?:[?#]|$)/i.test(settings.url)) {
+      initializeGeoJSON(this, settings);
+    } else {
+      init3D(this, settings);
+    }
     return;
   }
   kindByLayer.set(this, 'pending');

package/src/scene/resolveNextInitialization.js

@@ -5,7 +5,7 @@ import { initializerFor } from './initializerFor.js';
 
 export function resolveNextInitialization() {
   const task = pendingInitializations.shift();
-  task.initialize = initializerFor(task.type);
+  task.initialize = initializerFor(task.type, task.settings);
   if (!task.initialize) {
     task.error = /* alloc */ new Error(`Unknown layer type: ${task.type}`);
   }

package/src/shaders/materialShaders.js

@@ -30,6 +30,7 @@ export function materialShaders(material = defaultMaterial, sparkle = false, ele
       terrain: vec4<f32>,
       highlight: vec4<f32>,
       cutout: vec4<f32>,
+      nativeStroke: vec4<f32>,
     };
     struct Frame {
       viewMatrix: mat4x4<f32>,

package/src/shaders/materialVertexShader.js

@@ -1,7 +1,9 @@
 import { roofVertexShader } from './roofVertexShader.js';
+import { nativeStrokeShader } from './nativeStrokeShader.js';
 
 export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrain, textured, hasRoof) {
   const instanceOffset = material.instanced ? ' + input.instanceOffset.xyz' : '';
+  const stroke = nativeStrokeShader(material);
   return /* wgsl */ `
     struct Mesh {
       worldMatrix: mat4x4<f32>,
@@ -11,6 +13,7 @@ export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrai
       terrain: vec4<f32>,
       highlight: vec4<f32>,
       cutout: vec4<f32>,
+      nativeStroke: vec4<f32>,
     };
     struct Frame {
       viewMatrix: mat4x4<f32>,
@@ -46,6 +49,7 @@ export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrai
     @vertex fn vertexMain(input: VertexInput, @builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
       var output: VertexOutput;
       var position = input.position${instanceOffset};
+      ${stroke.position}
       ${hasTerrain ? 'position.y = elevation(u.terrain.xy + input.uv * u.terrain.z, u.terrain.w) - u.terrain.w;' : ''}
       let featureVertex = f32(vertexIndex)${material.instanced ? ' + input.instanceOffset.w' : ''};
       let highlighted = featureVertex >= u.highlight.x && featureVertex < u.highlight.y;
@@ -54,8 +58,9 @@ export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrai
       : 'u.baseColor.rgb'};
       // Inverse-transpose from cofactors; the camera view matrix is orthonormal.
       let m = mat3x3<f32>(u.worldMatrix[0].xyz, u.worldMatrix[1].xyz, u.worldMatrix[2].xyz);
-      let normal = (cross(m[1], m[2]) * input.normal.x + cross(m[2], m[0]) * input.normal.y +
-        cross(m[0], m[1]) * input.normal.z) / determinant(m);
+      ${stroke.normal}
+      let normal = (cross(m[1], m[2]) * sourceNormal.x + cross(m[2], m[0]) * sourceNormal.y +
+        cross(m[0], m[1]) * sourceNormal.z) / determinant(m);
       output.normal = (frame.viewMatrix * vec4<f32>(normal, 0.0)).xyz;
       let world = u.worldMatrix * vec4<f32>(position, 1.0);
       output.shadowPosition = solar.matrix * world;

package/src/shaders/nativeStrokeShader.js

@@ -0,0 +1,6 @@
+export function nativeStrokeShader(material) {
+  return /* alloc */ {
+    position: material.nativeStroke ? 'position = input.normal + (input.position - input.normal) * u.nativeStroke.x;' : '',
+    normal: material.nativeStroke ? 'let sourceNormal = vec3<f32>(0.0, 1.0, 0.0);' : 'let sourceNormal = input.normal;',
+  };
+}

package/src/shadows/drawShadowMeshes.js

@@ -15,9 +15,10 @@ export function drawShadowMeshes(layer, encoder, meshes) {
   let pipeline = sun.pipeline;
   pass.setPipeline(pipeline);
   pass.setBindGroup(1, sun.depthBindGroup);
-  let mesh, instances, nextPipeline, offset, attribute, index, range;
+  let mesh, attributes, instances, nextPipeline, offset, attribute, index, range;
   for (mesh of meshes) {
-    instances = mesh.geometry.attributes.instanceOffset;
+    attributes = mesh.geometry.attributes;
+    instances = attributes.instanceOffset;
     nextPipeline = instances ? sun.instancePipeline : sun.pipeline;
     if (nextPipeline !== pipeline) {
       pipeline = nextPipeline;
@@ -36,7 +37,7 @@ export function drawShadowMeshes(layer, encoder, meshes) {
       shadowBindGroup.layout = null;
       shadowBindGroup.entries[0].resource.buffer = null;
     }
-    for (attribute of Object.values(mesh.geometry.attributes)) {
+    for (attribute of Object.values(attributes)) {
       if (attribute.needsUpdate) {
         device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
         attribute.needsUpdate = false;
@@ -47,9 +48,9 @@ export function drawShadowMeshes(layer, encoder, meshes) {
       shadowOffsets
     ));
 
-    pass.setVertexBuffer(0, mesh.geometry.attributes.position.buffer);
+    pass.setVertexBuffer(0, attributes.position.buffer);
     if (instances) pass.setVertexBuffer(1, instances.buffer);
-    index = mesh.geometry.attributes.index, range = mesh.geometry.drawRange;
+    index = attributes.index, range = mesh.geometry.drawRange;
     if (index) {
       pass.setIndexBuffer(index.buffer, index.indexFormat);
       pass.drawIndexed(range.count, instances?.count ?? 1, range.start, 0, 0);

package/src/sources/attachAreaMesh.js

@@ -9,7 +9,6 @@ import { createProgram } from '../materials/createProgram.js';
 
 import { setParent } from '../scene/setParent.js';
 import { update } from '../scene/scheduleSceneUpdate.js';
-import { instanceAreaGeometry } from '../geometry/instanceAreaGeometry.js';
 
 export function attachAreaMesh(context) {
   const { backend: layer, area } = context;
@@ -18,15 +17,15 @@ export function attachAreaMesh(context) {
     return;
   }
   const device = rendererByLayer.get(layer).device;
-  const data = context.preparedGeometry || instanceAreaGeometry(context);
+  const data = context.preparedGeometry;
   const attributes = /* alloc */ {
-    position: /* alloc */ { size: 3, data: data.positions instanceof Float32Array ? data.positions : /* alloc */ new Float32Array(data.positions) },
-    normal: /* alloc */ { size: 3, data: data.normals instanceof Float32Array ? data.normals : /* alloc */ new Float32Array(data.normals) },
-    color: /* alloc */ { size: 3, data: data.colors instanceof Float32Array ? data.colors : /* alloc */ new Float32Array(data.colors) },
+    position: /* alloc */ { size: 3, data: data.positions },
+    normal: /* alloc */ { size: 3, data: data.normals },
+    color: /* alloc */ { size: 3, data: data.colors },
   };
   if (data.instanceOffsets) attributes.instanceOffset = /* alloc */ { size: 4, data: data.instanceOffsets };
   if (layer.options.nightLight) attributes.uv = /* alloc */ {
-    size: 2, data: context.uvs instanceof Float32Array ? context.uvs : /* alloc */ new Float32Array(context.uvs),
+    size: 2, data: data.uvs,
   };
   let name, attribute;
   for (name in attributes) {

package/src/sources/buildArea.js

@@ -23,14 +23,13 @@ export async function buildArea(layer, area, map) {
     if (geojsonByLayer.get(layer) && typeof layer.options.style !== 'function') {
       throw /* alloc */ new Error('style must be a function');
     }
-    const context = sourceAreaContext(layer, area, map);
-    // ponytail: feature-count cutoff avoids startup overhead; count vertices if giant single polygons matter.
-    if (layer.options.worker !== false && typeof Worker !== 'undefined' && data.features.length >= 64) {
-      context.jobs = /* alloc */ [];
+    if (layer.options.worker === false) {
+      throw /* alloc */ new Error('worker: false is no longer supported; GeoJSON geometry requires Web Workers');
     }
+    const context = sourceAreaContext(layer, area, map);
     await buildAreaFeatures(context, area, data.features);
     if (area.request.signal.aborted) return;
-    if (context.jobs) await buildAreaInWorker(context, area.request.signal);
+    await buildAreaInWorker(context, area.request.signal);
     if (area.request.signal.aborted) return;
     attachAreaMesh(context);
   } catch (error) {

package/src/sources/buildAreaFeature.js

@@ -1,5 +1,3 @@
-import { buildAreaPoint } from './buildAreaPoint.js';
-import { buildAreaPolygon } from '../geometry/buildExtrudedPolygon.js';
 import { parseColor } from '../colors/parseColor.js';
 import { featureAnchor } from './featureAnchor.js';
 import { extrusionStyle } from './extrusionStyle.js';
@@ -10,7 +8,7 @@ export function buildAreaFeature(context, feature) {
   const { backend: layer, area, map } = context;
   const coords = area.coords;
   const coordinates = featureAnchor(feature, layer.options.nightLight);
-  const geometry = feature.geometry, isTree = geometry.type === 'Point';
+  const geometry = feature.geometry;
   const lon = coordinates[0], lat = coordinates[1];
   if (!matchesAreaTile(map, coords, lon, lat)) return;
   const style = extrusionStyle(layer, feature);
@@ -18,25 +16,11 @@ export function buildAreaFeature(context, feature) {
     context.skipped++;
     return;
   }
-  const { top, bottom = 0, color = 0xd9b38c } = style;
+  const { color = 0xd9b38c } = style;
   const baseColor = parseColor(color);
-  if (context.jobs) {
-    prepareAreaGeometryJob(context, feature, lon, lat, style, baseColor);
-    context.featureFaces.push(/* alloc */ {
-      id: feature.id ?? feature.properties?.objectid ?? JSON.stringify(geometry),
-      properties: feature.properties, baseColor,
-    });
-    return;
-  }
-  const vertexStart = context.positions.length / 3;
-  if (isTree) buildAreaPoint(context, feature, lon, lat, style, baseColor);
-  let polygon;
-  if (geometry.type === 'Polygon') buildAreaPolygon(context, geometry.coordinates, top, bottom, baseColor);
-  else if (geometry.type === 'MultiPolygon') for (polygon of geometry.coordinates) buildAreaPolygon(context, polygon, top, bottom, baseColor);
-  const vertexEnd = context.positions.length / 3;
+  prepareAreaGeometryJob(context, feature, lon, lat, style, baseColor);
   context.featureFaces.push(/* alloc */ {
     id: feature.id ?? feature.properties?.objectid ?? JSON.stringify(geometry),
     properties: feature.properties, baseColor,
-    faceStart: vertexStart / 3, faceEnd: vertexEnd / 3, vertexStart, vertexEnd,
   });
 }

package/src/sources/initVectorTiles.js

@@ -0,0 +1,15 @@
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+import { readyByLayer } from '../weakmaps/readyByLayer.js';
+import { configureVectorTileLayer } from '../vector-tiles/configureVectorTileLayer.js';
+import { readyVectorTiles } from './readyVectorTiles.js';
+import { reportError } from '../raster/reportRasterError.js';
+import { noOperation } from '../utils/noOperation.js';
+
+export function initVectorTiles(layer, options) {
+  kindByLayer.set(layer, 'pending');
+  const ready = configureVectorTileLayer(layer, options)
+    .then(readyVectorTiles.bind(null, layer))
+    .catch(reportError.bind(null, layer));
+  readyByLayer.set(layer, ready);
+  ready.catch(noOperation);
+}

package/src/sources/isVectorTileSource.js

@@ -0,0 +1,4 @@
+export function isVectorTileSource(options) {
+  return options.data === undefined && (options.tileJSON !== undefined ||
+    typeof options.url === 'string' && /\{[zxy]\}|%7B[zxy]%7D/i.test(options.url));
+}

package/src/sources/pumpSourceAreas.js

@@ -16,7 +16,7 @@ import { pendingSourceAreas } from './pendingSourceAreas.js';
 /** Share four load/build slots across source layers, nearest ground blocks first. */
 export function pump(layer, map = layer._map) {
   const shared = map && renderers.get(map);
-  if (!shared) return;
+  if (!shared || !layersByLayer.has(shared)) return;
   const layers = /* alloc */ [];
   let sourceLayer, area, areaBackend;
   for (sourceLayer of layersByLayer.get(shared)) {

package/src/sources/readyVectorTiles.js

@@ -0,0 +1,10 @@
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+
+export function readyVectorTiles(layer) {
+  const map = layer._map;
+  map?.removeLayer(layer);
+  kindByLayer.delete(layer);
+  map?.addLayer(layer);
+  layer.fire('ready');
+  return layer;
+}

package/src/sources/sourceAreaContext.js

@@ -8,13 +8,8 @@ export function sourceAreaContext(layer, area, map) {
   return /* alloc */ {
     backend: layer, area, map, crs, origin,
     metres: Math.cos(locationByLayer.get(layer).lat * radians),
-    positions: /* alloc */ [],
-    normals: /* alloc */ [],
-    colors: /* alloc */ [],
-    uvs: /* alloc */ [],
+    jobs: /* alloc */ [],
     featureFaces: /* alloc */ [],
-    lights: /* alloc */ [],
-    supports: /* alloc */ new Set(),
     skipped: 0,
   };
 }

package/src/sunlight/createSun.js

@@ -38,7 +38,6 @@ export function createSun(map) {
   status.setAttribute('role', 'status');
   const note = document.createElement('small');
   note.style.color = '#555';
-  note.textContent = 'Indicative · loaded geometry only. Streetlight illumination is estimated, not measured lux.';
   container.append(date, slider, timeRow, status, note);
   const state = /* alloc */ {
     control: null, map, originalSky: '', container, sunDisc, moonDisc, date, slider, output, status,

package/src/sunlight/initSunlight.js

@@ -6,12 +6,23 @@ import { onAdd } from './onAddTimeControl.js';
 import { addTo } from './addTimeControlToMap.js';
 import { remove } from './removeTimeControl.js';
 import { onRemoveSun } from './onRemoveSun.js';
+import { extendLeafletClass } from '../core/extendLeafletClass.js';
 
-L.Control.Time = L.Control.extend({
-  options: { position: 'bottomright' },
-  initialize,
-  onAdd,
-  onRemove: onRemoveSun,
-  addTo,
-  remove,
-});
+class TimeControl extends extendLeafletClass(L.Control) {
+  static initHooks = true;
+  static defaultOptions = { position: 'bottomright' };
+
+  constructor(options) {
+    super(options);
+    if (L.version.startsWith('2.')) {
+      initialize.call(this, options);
+      this.callInitHooks();
+    }
+  }
+}
+Object.assign(TimeControl.prototype, { onAdd, onRemove: onRemoveSun, addTo, remove });
+if (L.version.startsWith('1.')) {
+  TimeControl.prototype.options = Object.assign(Object.create(L.Control.prototype.options), TimeControl.defaultOptions);
+  TimeControl.prototype.initialize = initialize;
+}
+L.Control.Time = TimeControl;

package/src/terrain/initTerrain.js

@@ -3,6 +3,7 @@ import { rasterTilesByLayer } from '../weakmaps/rasterTilesByLayer.js';
 import { terrainReadyByLayer } from '../weakmaps/terrainReadyByLayer.js';
 import { terrainSourceByLayer } from '../weakmaps/terrainSourceByLayer.js';
 import { terrainTilesByLayer } from '../weakmaps/terrainTilesByLayer.js';
+import { streamTerrainByLayer } from '../weakmaps/streamTerrainByLayer.js';
 
 
 
@@ -12,10 +13,14 @@ import { init3D } from '../scene/init3D.js';
 
 /**
  * Renders Float32 DEM tiles and archived raster basemaps in the shared WebGPU scene.
- * Source options: `url` (single-zoom Float32 PMTiles or supported COG DEM);
+ * Source options: `url` (single-zoom Float32 PMTiles or supported COG DEM),
+ * or `getTile(z, x, y, signal)` for streamed 256px Float32 elevations;
  * `bridges` (optional GeoJSON deck polygons with Z, see _addBridges).
  */
 export function initTerrain(layer, options) {
+  if (options.getTile !== undefined && typeof options.getTile !== 'function') {
+    throw /* alloc */ new Error('Streamed terrain requires a getTile function');
+  }
   const terrainSource = options.url;
   const layerOptions = /* alloc */ { ...options };
   delete layerOptions.url;
@@ -24,5 +29,6 @@ export function initTerrain(layer, options) {
   terrainTilesByLayer.set(layer, /* alloc */ new Map());
   rasterTilesByLayer.set(layer, /* alloc */ new Map());
   terrainReadyByLayer.set(layer, false);
+  if (options.getTile) streamTerrainByLayer.set(layer, true);
   kindByLayer.set(layer, 'terrain');
 }

package/src/terrain/loadTerrain.js

@@ -5,6 +5,7 @@ import { terrainControllerByLayer } from '../weakmaps/terrainControllerByLayer.j
 import { terrainLoadingByLayer } from '../weakmaps/terrainLoadingByLayer.js';
 import { terrainReadyByLayer } from '../weakmaps/terrainReadyByLayer.js';
 import { terrainSourceByLayer } from '../weakmaps/terrainSourceByLayer.js';
+import { workerMapByLayer } from '../weakmaps/workerMapByLayer.js';
 
 import { createLayer } from '../scene/createLayer.js';
 
@@ -23,9 +24,11 @@ export async function loadTerrain(layer) {
   try {
     if (!terrainSourceByLayer.get(layer)) throw /* alloc */ new Error('Terrain layer requires a PMTiles or COG elevation archive');
     const archive = createLayer(/* alloc */ { source: /* alloc */ {
-      type: layer.options.asset !== undefined || /\.tiff?(?:[?#]|$)/i.test(terrainSourceByLayer.get(layer)) ? 'cog' : 'pmtiles',
+      type: 'raster',
       url: terrainSourceByLayer.get(layer), archive: layer.options.archive, asset: layer.options.asset,
+      workerUrl: layer.options.workerUrl,
     } });
+    workerMapByLayer.set(archive, layer._map);
     terrainArchiveByLayer.set(layer, archive);
     await readyByLayer.get(archive);
     const header = headerByLayer.get(archive);

package/src/terrain/mapElevationOf.js

@@ -1,7 +1,11 @@
 import { terrain3DByMap } from '../weakmaps/terrain3DByMap.js';
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
 import { getElevation } from './getElevation.js';
+import { gridTerrainElevation } from '../native/gridTerrainElevation.js';
 
 export function mapElevationOf(map, location) {
   const terrain = terrain3DByMap.get(map);
-  return terrain && getElevation(terrain, location);
+  if (terrain) return getElevation(terrain, location);
+  const stream = streamTerrainByMap.get(map);
+  return stream && gridTerrainElevation(stream, location);
 }

package/src/terrain/onTerrainAdd.js

@@ -1,6 +1,8 @@
 import { rootByLayer } from '../weakmaps/rootByLayer.js';
 import { terrainPromiseByLayer } from '../weakmaps/terrainPromiseByLayer.js';
 import { terrain3DByMap } from '../weakmaps/terrain3DByMap.js';
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
+import { streamTerrainByLayer } from '../weakmaps/streamTerrainByLayer.js';
 
 
 
@@ -13,9 +15,17 @@ import { setLayerTerrain } from './setLayerTerrain.js';
 
 export function onTerrainAdd(layer, map) {
 
-  if (terrain3DByMap.get(map) && terrain3DByMap.get(map) !== layer) {
+  if (streamTerrainByMap.get(map) || terrain3DByMap.get(map) && terrain3DByMap.get(map) !== layer) {
     throw /* alloc */ new Error('Only one terrain layer can be active per map');
   }
+  if (streamTerrainByLayer.get(layer)) {
+    streamTerrainByMap.set(map, /* alloc */ {
+      layer, map, terrainCache: /* alloc */ new Map(), terrainController: /* alloc */ new AbortController(),
+    });
+    onAdd3DLayer(layer, map);
+    map.fire('terrainchange');
+    return;
+  }
   terrain3DByMap.set(map, layer);
   onAdd3DLayer(layer, map);
   if (rootByLayer.get(layer)) terrainPromiseByLayer.set(layer, loadTerrain(layer));

package/src/terrain/onTerrainRemove.js

@@ -11,6 +11,7 @@ import { terrainPromiseByLayer } from '../weakmaps/terrainPromiseByLayer.js';
 import { terrainReadyByLayer } from '../weakmaps/terrainReadyByLayer.js';
 import { terrainTilesByLayer } from '../weakmaps/terrainTilesByLayer.js';
 import { terrain3DByMap } from '../weakmaps/terrain3DByMap.js';
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
 
 
 import { renderEmpty } from '../globals/renderEmpty.js';
@@ -25,7 +26,15 @@ import { onRemove3DLayer } from '../scene/onRemove3DLayer.js';
 import { clearLayerTerrain } from './clearLayerTerrain.js';
 
 export function onTerrainRemove(layer, map) {
-
+  const stream = streamTerrainByMap.get(map);
+  if (stream?.layer === layer) {
+    streamTerrainByMap.delete(map);
+    stream.terrainController.abort();
+    stream.terrainCache.clear();
+    map.fire('terrainchange');
+    onRemove3DLayer(layer, map);
+    return;
+  }
   terrainControllerByLayer.get(layer)?.abort();
   terrainLoadingByLayer.set(layer, false);
   terrainReadyByLayer.set(layer, false);

package/src/textures/nativeTextureFor.js

@@ -17,8 +17,7 @@ export function textureFor(state, key, image) {
   const url = image.currentSrc || image.src;
   if (!texture || texture.image !== image || texture.url !== url) {
     if (texture) {
-      const mesh = meshes.get(key);
-      if (mesh) disposeMesh(layer, mesh);
+      disposeMesh(layer, meshes.get(key));
       meshes.delete(key);
       destroyTexture(layer, texture.texture);
       textures.delete(key);
@@ -35,7 +34,7 @@ export function textureFor(state, key, image) {
       sampler: device.createSampler(coreSampler),
     };
     textures.set(key, texture);
-    if (image instanceof HTMLCanvasElement) {
+    if (image instanceof HTMLCanvasElement || url.startsWith('data:image/svg+xml')) {
       texture.pending = true;
       uploadCanvasTexture(state, key, texture, image, device, width, height);
     } else {

package/src/textures/uploadCanvasTexture.js

@@ -2,9 +2,18 @@ import { current } from '../native/isCurrentNativeLayer.js';
 import { refreshNativeLayer } from '../native/refreshNativeLayer.js';
 
 export async function uploadCanvasTexture(state, key, texture, image, device, width, height) {
-  let bitmap;
+  let bitmap, source = image;
   try {
-    bitmap = await createImageBitmap(image);
+    if (image instanceof HTMLImageElement) {
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const context = canvas.getContext('2d');
+      if (!context) throw /* alloc */ new Error('Unable to rasterize SVG image');
+      context.drawImage(image, 0, 0, width, height);
+      source = canvas;
+    }
+    bitmap = await createImageBitmap(source);
     if (!current(state) || state.textures.get(key) !== texture) return;
     device.queue.copyExternalImageToTexture(
       /* alloc */ { source: bitmap },

package/src/utils/yieldTask.js

@@ -0,0 +1,5 @@
+export function yieldTask(delay = 0) {
+  const task = Promise.withResolvers();
+  setTimeout(task.resolve, delay);
+  return task.promise;
+}

package/src/vector-style/appendQuotedStyleCharacter.js

@@ -0,0 +1,22 @@
+export function appendQuotedStyleCharacter(char, state) {
+  if (state.quoted) {
+    if (state.escaped) {
+      state.escaped = false;
+      return char === "'" ? char : '\\' + char;
+    }
+    if (char === '\\') {
+      state.escaped = true;
+      return '';
+    }
+    if (char === state.quoted) {
+      state.quoted = '';
+      return '"';
+    }
+    return char === '"' ? '\\"' : char;
+  }
+  if (char === '"' || char === "'") {
+    state.quoted = char;
+    return '"';
+  }
+  return undefined;
+}

package/src/vector-style/arrayContainsRange.js

@@ -0,0 +1,8 @@
+export function arrayContainsRange(values, start, end, target) {
+  let i = 0, value = null;
+  for (i = start; i < end; i++) {
+    value = values[i];
+    if (value === target || (value !== value && target !== target)) return true;
+  }
+  return false;
+}

package/src/vector-style/evaluateBoolean.js

@@ -0,0 +1,18 @@
+import { evaluateStyle } from './evaluateStyle.js';
+
+export function evaluateBoolean(op, args, properties, zoom, legacy) {
+  let i = 0;
+  if (op === 'all') {
+    for (i = 0; i < args.length; i++) {
+      if (!evaluateStyle(args[i], properties, zoom, legacy)) return false;
+    }
+    return true;
+  }
+  if (op === 'any') {
+    for (i = 0; i < args.length; i++) {
+      if (evaluateStyle(args[i], properties, zoom, legacy)) return true;
+    }
+    return false;
+  }
+  throw /* alloc */ new Error(`Unsupported vector style expression: ${op}`);
+}

package/src/vector-style/evaluateCoalesceOrCase.js

@@ -0,0 +1,21 @@
+import { evaluateStyle } from './evaluateStyle.js';
+
+export function evaluateCoalesceOrCase(op, args, properties, zoom, legacy) {
+  let i = 0, result = null;
+  if (op === 'coalesce') {
+    for (i = 0; i < args.length; i++) {
+      result = evaluateStyle(args[i], properties, zoom);
+      if (result !== null && result !== undefined) return result;
+    }
+    return null;
+  }
+  if (op === 'case') {
+    for (i = 0; i < args.length - 1; i += 2) {
+      if (evaluateStyle(args[i], properties, zoom)) {
+        return evaluateStyle(args[i + 1], properties, zoom);
+      }
+    }
+    return evaluateStyle(args[args.length - 1], properties, zoom);
+  }
+  throw /* alloc */ new Error(`Unsupported vector style expression: ${op}`);
+}

package/src/vector-style/evaluateComparison.js

@@ -0,0 +1,16 @@
+import { evaluateInput } from './evaluateInput.js';
+import { evaluateStyle } from './evaluateStyle.js';
+
+export function evaluateComparison(op, args, properties, zoom, legacy) {
+  const left = evaluateInput(args[0], properties, zoom, legacy);
+  const right = evaluateStyle(args[1], properties, zoom);
+  switch (op) {
+    case '==': return left === right;
+    case '!=': return left !== right;
+    case '<=': return left <= right;
+    case '>=': return left >= right;
+    case '<': return left < right;
+    case '>': return left > right;
+      default: throw /* alloc */ new Error(`Unsupported vector style expression: ${op}`);
+  }
+}

package/src/vector-style/evaluateIExpression.js

@@ -0,0 +1,8 @@
+import { evaluateInterpolate } from './evaluateInterpolate.js';
+import { evaluateMembership } from './evaluateMembership.js';
+
+export function evaluateIExpression(op, args, properties, zoom, legacy) {
+  if (op === 'in') return evaluateMembership(op, args, properties, zoom, legacy);
+  if (op === 'interpolate') return evaluateInterpolate(args, properties, zoom);
+  throw /* alloc */ new Error(`Unsupported vector style expression: ${op}`);
+}

package/src/vector-style/evaluateInput.js

@@ -0,0 +1,6 @@
+import { evaluateStyle } from './evaluateStyle.js';
+
+export function evaluateInput(value, properties, zoom, legacy) {
+  if (legacy && typeof value === 'string') return properties[value];
+  return evaluateStyle(value, properties, zoom);
+}