leaflet-city-mapper 0.0.3 → 0.0.5

package/src/{core → native}/disposeNativeLayer.js

@@ -1,35 +1,39 @@
+import { nativeRenderByLayer } from '../weakmaps/nativeRenderByLayer.js';
+
+
 import { refreshNativeEvent } from './refreshNativeEvent.js';
 import { updateNativeLayerView } from './updateNativeLayerView.js';
 import { removeNativeEvents } from './removeNativeEvents.js';
 import { disposeMesh } from '../rendering/disposeMesh.js';
-import { destroyTexture } from '../rendering/destroyTexture.js';
-import { nativeImageRefresh } from './nativeImageRefresh.js';
-import { nativeImageError } from './nativeImageError.js';
-import { removeImageState } from './removeImageState.js';
+import { destroyTexture } from '../textures/destroyTexture.js';
+import { nativeImageRefresh } from '../textures/nativeImageRefresh.js';
+import { nativeImageError } from '../textures/nativeImageError.js';
+import { removeImageState } from '../textures/removeImageState.js';
 
 export function disposeNativeLayer() {
   const state = this;
-  const { source, map, backend, meshes, textures, images } = state;
+  if (state.disposed) return;
+  state.disposed = true;
+  const { source, map, backend: layer, meshes, textures, images } = state;
   const events = 'load tileload tileunload move drag';
   source.off(events, refreshNativeEvent, state);
   map.off('zoomend', refreshNativeEvent, state);
   if (state.marker) map.off('move zoom rotate pitch resize viewreset', updateNativeLayerView, state);
   removeNativeEvents(state);
-  state.refresh = state.reorder = null;
   let name, methods, mesh, texture, image;
   for ([name, methods] of state.methods) {
     if (methods.own) Object.defineProperty(source, name, methods.own);
     else delete source[name];
   }
-  for (mesh of meshes.values()) disposeMesh(backend, mesh);
+  for (mesh of meshes.values()) disposeMesh(layer, mesh);
   meshes.clear();
-  for (texture of textures.values()) destroyTexture(backend, texture.texture);
+  for (texture of textures.values()) destroyTexture(layer, texture.texture);
   textures.clear();
   for (image of images) {
     image.removeEventListener('load', nativeImageRefresh);
     image.removeEventListener('error', nativeImageError);
     removeImageState(image, state);
   }
-  backend._beforeRender = null;
-  backend.remove();
+  nativeRenderByLayer.delete(layer);
+  layer.remove();
 }

package/src/native/forwardNativeError.js

@@ -0,0 +1,3 @@
+export function forwardNativeError({ error }) {
+  this.source.fire('error', /* alloc */ { error });
+}

package/src/native/handleNativeMapEvent.js

@@ -0,0 +1,28 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { nativeEventMaps } from '../weakmaps/nativeEventMaps.js';
+import { renderers } from '../weakmaps/renderers.js';
+import { coreEventTypes } from '../globals/coreEventTypes.js';
+
+
+
+import { nativeEventSource } from './nativeEventSource.js';
+import { updateNativeHover } from './updateNativeHover.js';
+import { bypassNativeEvent } from './bypassNativeEvent.js';
+
+export function handleNativeMapEvent(event, type = event.type, targets) {
+  const map = this, context = nativeEventMaps.get(map), fireDOMEvent = context.fireDOMEvent;
+  const owner = renderers.get(map);
+  if (!rendererByLayer.get(owner) || targets || !coreEventTypes.has(type)) {
+    return fireDOMEvent.call(this, event, type, targets);
+  }
+  if (bypassNativeEvent(map, context, event, type)) {
+    return fireDOMEvent.call(this, event, type, targets);
+  }
+  let source = nativeEventSource(context, event, type);
+  if ((type === 'click' || type === 'preclick') && source && map._draggableMoved(source)) source = null;
+  if (type === context.move || type === context.out) {
+    updateNativeHover(map, context, event, source);
+  }
+  return fireDOMEvent.call(this, event, type, source ? /* alloc */ [source] : undefined);
+}

package/src/{core → native}/hideTargets.js

@@ -1,14 +1,16 @@
+import { L } from '../globals/L.js';
 export function hideTargets(state) {
   const { source } = state;
   const htmlIcon = source instanceof L.Marker && source.options.icon instanceof L.DivIcon;
-  const targets = [htmlIcon ? null : source._icon, htmlIcon ? null : source._shadow];
-  let element;
+  const icon = htmlIcon ? null : source._icon, shadow = htmlIcon ? null : source._shadow;
+  let i, element;
   for (element of state.hidden) {
-    if (targets.includes(element)) continue;
+    if (element === icon || element === shadow) continue;
     element.classList.remove('leaflet-webgpu-target');
     state.hidden.delete(element);
   }
-  for (element of targets) {
+  for (i = 0; i < 2; i++) {
+    element = i ? shadow : icon;
     if (!element || state.hidden.has(element)) continue;
     element.classList.add('leaflet-webgpu-target');
     state.hidden.add(element);

package/src/{core → native}/initNativeGPU.js

@@ -1,21 +1,28 @@
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+import { readyByLayer } from '../weakmaps/readyByLayer.js';
+
+
+
 import { nativeLayer } from './nativeLayer.js';
 import { hideTargets } from './hideTargets.js';
 import { removeTargets } from './removeTargets.js';
 import { readyNativeGPU } from './readyNativeGPU.js';
-import { reportError } from '../scene/reportError.js';
+import { reportError } from '../scene/reportLayerError.js';
 
 export function initNativeGPU(source, map) {
-  if (source._nativeGPU) return;
+  if (nativeGPUByLayer.get(source)) return;
   if (!document.getElementById('leaflet-webgpu-targets')) {
     const style = document.createElement('style');
     style.id = 'leaflet-webgpu-targets';
     style.textContent = '.leaflet-webgpu-target{opacity:0!important}';
     document.head.append(style);
   }
-  const state = source._nativeGPU = { source, map, hidden: new Set() };
-  state.hide = hideTargets.bind(null, state);
-  state.hide();
+  const state = /* alloc */ {
+    source, map, hidden: /* alloc */ new Set(),
+  };
+  nativeGPUByLayer.set(source, state);
+  hideTargets(state);
   source.once('remove', removeTargets.bind(null, state));
-  source.ready = Promise.resolve().then(readyNativeGPU.bind(null, state));
-  source.ready.catch(reportError.bind(null, source));
+  readyByLayer.set(source, Promise.resolve().then(readyNativeGPU.bind(null, state)));
+  readyByLayer.get(source).catch(reportError.bind(null, source));
 }

package/src/native/isCurrentNativeLayer.js

@@ -0,0 +1,7 @@
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+
+
+
+export function current(state) {
+  return nativeGPUByLayer.get(state.source) === state && state.map.hasLayer(state.source);
+}

package/src/native/nativeEventSource.js

@@ -0,0 +1,18 @@
+import { L } from '../globals/L.js';
+import { raycast } from '../picking/raycast.js';
+import { compareNativeHits } from './compareNativeHits.js';
+
+export function nativeEventSource(context, event, type) {
+  const hits = /* alloc */ [];
+  let candidate, source, layer;
+  if (type !== context.out) {
+    for (candidate of context.states) {
+      ({ source, backend: layer } = candidate);
+      if (source instanceof L.Marker || source.options.interactive === false ||
+        !(source instanceof L.Path) && !source.options.interactive) continue;
+      hits.push(...raycast(layer, event, candidate.meshes.values(), false));
+    }
+  }
+  hits.sort(compareNativeHits);
+  return hits[0]?.object._nativeSource || null;
+}

package/src/{core → native}/nativeEvents.js

@@ -1,6 +1,9 @@
-import { cityMapper } from '../constants/cityMapper.js';
+import { L } from '../globals/L.js';
+import { nativeEventMaps } from '../weakmaps/nativeEventMaps.js';
+
+
 import { raycast } from '../picking/raycast.js';
-import { nativeEventMaps } from '../constants/nativeEventMaps.js';
+
 import { restoreNativeEvents } from './restoreNativeEvents.js';
 import { handleNativeMapEvent } from './handleNativeMapEvent.js';
 
@@ -9,7 +12,9 @@ export function nativeEvents(state) {
   const { map } = state;
   let context = nativeEventMaps.get(map);
   if (!context) {
-    context = { map, states: new Set(), hovered: null };
+    context = /* alloc */ {
+      map, states: /* alloc */ new Set(), hovered: null,
+    };
     const pointer = L.version.startsWith('2');
     context.move = pointer ? 'pointermove' : 'mousemove';
     context.out = pointer ? 'pointerout' : 'mouseout';

package/src/native/nativeLayer.js

@@ -0,0 +1,79 @@
+import { nativeGPUBackByMap } from '../weakmaps/nativeGPUBackByMap.js';
+import { nativeGPUOrderByMap } from '../weakmaps/nativeGPUOrderByMap.js';
+
+import { L } from '../globals/L.js';
+import { nativeMethodHandlers } from '../globals/nativeMethodHandlers.js';
+import { nativeRenderByLayer } from '../weakmaps/nativeRenderByLayer.js';
+
+import { createLayer } from '../scene/createLayer.js';
+
+
+import { nativeEvents } from './nativeEvents.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
+
+import { current } from './isCurrentNativeLayer.js';
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+import { refreshNativeEvent } from './refreshNativeEvent.js';
+import { disposeNativeLayer } from './disposeNativeLayer.js';
+import { resolveNativeReady } from './resolveNativeReady.js';
+import { rejectNativeReady } from './rejectNativeReady.js';
+import { forwardNativeError } from './forwardNativeError.js';
+import { updateNativeLayerView } from './updateNativeLayerView.js';
+import { synchronizeNativeLayer } from './synchronizeNativeLayer.js';
+
+/** Render from coordinates and detached raster sources; only accessible marker controls remain DOM. */
+export async function nativeLayer(state) {
+  const { source, map } = state;
+  const layer = state.backend = createLayer(/* alloc */ {
+    source: /* alloc */ { type: '3d' },
+  });
+  state.meshes = /* alloc */ new Map();
+  state.textures = /* alloc */ new Map();
+  state.methods = /* alloc */ new Map();
+  state.images = /* alloc */ new Set();
+  if (!nativeGPUOrderByMap.get(map)) nativeGPUOrderByMap.set(map, 0);
+  if (!nativeGPUBackByMap.get(map)) nativeGPUBackByMap.set(map, 0);
+  state.dirty = true;
+  state.viewDirty = true;
+  state.failed = false;
+  state.order = nativeGPUOrderByMap.get(map) + 1;
+  nativeGPUOrderByMap.set(map, state.order);
+  state.marker = source instanceof L.Marker;
+  state.paneOrder = Number(getComputedStyle(source.getPane()).zIndex) || 0;
+  state.disposed = false;
+  const currentEvents = 'load tileload tileunload move drag';
+  source.on(currentEvents, refreshNativeEvent, state);
+  map.on('zoomend', refreshNativeEvent, state);
+  if (state.marker) map.on('move zoom rotate pitch resize viewreset', updateNativeLayerView, state);
+  nativeEvents(state);
+  let name, own, original;
+  for (name in nativeMethodHandlers) {
+    if (typeof source[name] !== 'function') continue;
+    own = Object.getOwnPropertyDescriptor(source, name), original = source[name];
+    state.methods.set(name, /* alloc */ { own, original });
+    source[name] = nativeMethodHandlers[name];
+  }
+  const ready = state.ready = Promise.withResolvers();
+  layer.once('ready', resolveNativeReady, state);
+  layer.once('error', rejectNativeReady, state);
+  layer.on('error', forwardNativeError, state);
+  refreshNativeLayer(state);
+  layer.addTo(map);
+  try {
+    await ready.promise;
+  } catch (error) {
+    disposeNativeLayer.call(state);
+    throw error;
+  }
+  if (!current(state)) return source;
+
+  nativeRenderByLayer.set(layer, state);
+  try {
+    synchronizeNativeLayer(state);
+  } catch (error) {
+    disposeNativeLayer.call(state);
+    throw error;
+  }
+  update(state.backend);
+  return source;
+}

package/src/{core → native}/nativeLayerMethod.js

@@ -1,7 +1,15 @@
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+import { nativeGPUBackByMap } from '../weakmaps/nativeGPUBackByMap.js';
+import { nativeGPUOrderByMap } from '../weakmaps/nativeGPUOrderByMap.js';
+
+
+import { L } from '../globals/L.js';
+
+
 import { refreshNativeLayer } from './refreshNativeLayer.js';
 
 export function nativeLayerMethod(name, source, args) {
-  const state = source._nativeGPU, original = state.originalMethods.get(name);
+  const state = nativeGPUByLayer.get(source), original = state.methods.get(name).original;
   const result = original.apply(source, args);
   let layer, zIndex;
   if ((name === 'bringToFront' || name === 'bringToBack') && source instanceof L.GridLayer) {
@@ -14,8 +22,14 @@ export function nativeLayerMethod(name, source, args) {
     const edge = name === 'bringToFront' ? extreme + 1 : extreme - 1;
     if (Number.isFinite(edge)) source.setZIndex(edge);
   }
-  if (name === 'bringToFront') state.order = ++state.map._nativeGPUOrder;
-  if (name === 'bringToBack') state.order = --state.map._nativeGPUBack;
+  if (name === 'bringToFront') {
+    state.order = nativeGPUOrderByMap.get(state.map) + 1;
+    nativeGPUOrderByMap.set(state.map, state.order);
+  }
+  if (name === 'bringToBack') {
+    state.order = nativeGPUBackByMap.get(state.map) - 1;
+    nativeGPUBackByMap.set(state.map, state.order);
+  }
   refreshNativeLayer(state);
   return result;
 }

package/src/native/pruneNativeResources.js

@@ -0,0 +1,20 @@
+import { disposeMesh } from '../rendering/disposeMesh.js';
+import { destroyTexture } from '../textures/destroyTexture.js';
+
+export function pruneNativeResources(state) {
+  const { meshes, textures, backend: layer } = state;
+  let mesh, texture, key;
+  for ([key, mesh] of meshes) {
+    if (mesh._nativeUsed) continue;
+    disposeMesh(layer, mesh);
+    meshes.delete(key);
+    texture = textures.get(key);
+    if (texture) destroyTexture(layer, texture.texture);
+    textures.delete(key);
+  }
+  for ([key, texture] of textures) {
+    if (texture.used) continue;
+    destroyTexture(layer, texture.texture);
+    textures.delete(key);
+  }
+}

package/src/{core → native}/putNativeMesh.js

@@ -1,22 +1,25 @@
+import { L } from '../globals/L.js';
 import { disposeMesh } from '../rendering/disposeMesh.js';
 import { createMesh } from '../rendering/createMesh.js';
 import { styleNativeMesh } from './styleNativeMesh.js';
 
 export function putNativeMesh(state, key, position, color, opacity, texture, uv) {
-  const { backend, source, meshes } = state;
+  const { backend: layer, source, meshes } = state;
   if (!position.length) return;
   let mesh = meshes.get(key);
-  const normal = [];
-  let index;
-  for (index = 0; index < position.length; index++) normal.push(index % 3 === 1 ? 1 : 0);
-  const data = { position, normal, ...(uv ? { uv } : {}) };
   if (!mesh || mesh.geometry.attributes.position.data.length !== position.length ||
     mesh.program.uniforms.baseTexture?.value !== texture) {
-    if (mesh) disposeMesh(backend, mesh);
-    mesh = createMesh(backend, data, {
+    const normal = /* alloc */ [];
+    let index;
+    for (index = 0; index < position.length; index++) normal.push(index % 3 === 1 ? 1 : 0);
+    const data = /* alloc */ { position, normal };
+    if (uv) data.uv = uv;
+    const material = /* alloc */ {
       vertexColors: false, color, opacity, unlit: true, alphaMode: 'BLEND',
-      ...(texture ? { baseTexture: texture } : {}),
-    }, 0, source instanceof L.GridLayer ? state.rasterProgram : undefined);
+    };
+    if (texture) material.baseTexture = texture;
+    if (mesh) disposeMesh(layer, mesh);
+    mesh = createMesh(layer, data, material, 0, source instanceof L.GridLayer ? state.rasterProgram : undefined);
     if (source instanceof L.GridLayer) {
       state.rasterProgram ||= mesh.program;
       mesh.texture = texture;

package/src/native/quadNativeMesh.js

@@ -0,0 +1,20 @@
+import { coreQuadIndices } from '../globals/coreQuadIndices.js';
+import { coreQuadUV } from '../globals/coreQuadUV.js';
+import { coreWhite } from '../globals/coreWhite.js';
+import { textureFor } from '../textures/nativeTextureFor.js';
+import { putNativeMesh } from './putNativeMesh.js';
+
+
+export function quadNativeMesh(state, key, image, corners, opacity) {
+  const texture = textureFor(state, key, image);
+  if (!texture) return;
+  const indices = coreQuadIndices;
+  const position = /* alloc */ [];
+  const uv = /* alloc */ [];
+  let index;
+  for (index of indices) {
+    position.push(...corners[index]);
+    uv.push(coreQuadUV[index * 2], coreQuadUV[index * 2 + 1]);
+  }
+  return putNativeMesh(state, key, position, coreWhite, opacity, texture, uv);
+}

package/src/native/readyNativeGPU.js

@@ -0,0 +1,10 @@
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+
+
+
+import { nativeLayer } from './nativeLayer.js';
+
+export function readyNativeGPU(state) {
+  if (nativeGPUByLayer.get(state.source) !== state) return state.source;
+  return nativeLayer(state);
+}

package/src/native/refreshNativeLayer.js

@@ -0,0 +1,35 @@
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+
+
+
+import { nativeImageRefresh } from '../textures/nativeImageRefresh.js';
+import { nativeImageError } from '../textures/nativeImageError.js';
+import { removeImageState } from '../textures/removeImageState.js';
+import { addImageState } from '../textures/addImageState.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
+import { hideTargets } from './hideTargets.js';
+
+export function refreshNativeLayer(state = this) {
+  state.dirty = true;
+  state.viewDirty = true;
+  state.failed = false;
+  hideTargets(state);
+  const source = state.source;
+  let i, image;
+  for (image of state.images) {
+    if (image === source._icon || image === source._shadow || image === source._image) continue;
+    image.removeEventListener('load', nativeImageRefresh);
+    image.removeEventListener('error', nativeImageError);
+    removeImageState(image, state);
+    state.images.delete(image);
+  }
+  for (i = 0; i < 3; i++) {
+    image = i === 0 ? source._icon : i === 1 ? source._shadow : source._image;
+    if (!(image instanceof HTMLImageElement) || state.images.has(image)) continue;
+    state.images.add(image);
+    addImageState(image, state);
+    image.addEventListener('load', nativeImageRefresh);
+    image.addEventListener('error', nativeImageError);
+  }
+  if (sharedByLayer.get(state.backend)) update(state.backend);
+}

package/src/native/refreshNativeLayerContract.js

@@ -0,0 +1,9 @@
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+
+
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function refreshNativeLayerContract(layer = this) {
+  const native = nativeGPUByLayer.get(layer);
+  if (native?.backend && !native.disposed) refreshNativeLayer(native);
+}

package/src/{core → native}/rejectNativeReady.js

@@ -1,3 +1,4 @@
+
 export function rejectNativeReady({ error }) {
   this.ready.reject(error);
 }

package/src/{core → native}/removeNativeEvents.js

@@ -1,4 +1,5 @@
-import { nativeEventMaps } from '../constants/nativeEventMaps.js';
+import { nativeEventMaps } from '../weakmaps/nativeEventMaps.js';
+
 
 export function removeNativeEvents(state) {
   const context = state._nativeEventContext;

package/src/native/removeTargets.js

@@ -0,0 +1,13 @@
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+
+
+import { disposeNativeLayer } from './disposeNativeLayer.js';
+
+export function removeTargets(state) {
+  if (nativeGPUByLayer.get(state.source) === state) nativeGPUByLayer.set(state.source, null);
+  if (state.backend) disposeNativeLayer.call(state);
+  let element;
+  for (element of state.hidden) {
+    element.classList.remove('leaflet-webgpu-target');
+  }
+}

package/src/native/reorderNativeLayer.js

@@ -0,0 +1,17 @@
+import { nativeGPUBackByMap } from '../weakmaps/nativeGPUBackByMap.js';
+import { nativeGPUOrderByMap } from '../weakmaps/nativeGPUOrderByMap.js';
+
+
+
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function reorderNativeLayer(front) {
+  if (front) {
+    this.order = nativeGPUOrderByMap.get(this.map) + 1;
+    nativeGPUOrderByMap.set(this.map, this.order);
+  } else {
+    this.order = nativeGPUBackByMap.get(this.map) - 1;
+    nativeGPUBackByMap.set(this.map, this.order);
+  }
+  refreshNativeLayer(this);
+}

package/src/{core → native}/resolveNativeReady.js

@@ -1,3 +1,4 @@
+
 export function resolveNativeReady() {
   this.ready.resolve();
 }

package/src/{core → native}/styleNativeMesh.js

@@ -1,9 +1,14 @@
+import { cameraZIndexOffsetByLayer } from '../weakmaps/cameraZIndexOffsetByLayer.js';
+
+import { L } from '../globals/L.js';
+
+
 export function styleNativeMesh(state, mesh, color, opacity) {
   const { source, marker, paneOrder, order } = state;
   mesh.program.uniforms.baseColor.value = color;
   mesh.program.uniforms.opacity.value = opacity;
   if (source instanceof L.GridLayer) mesh.opacity = opacity;
-  const zIndex = marker ? source._zIndex + (source._cameraZIndexOffset || 0) : source.options.zIndex;
+  const zIndex = marker ? source._zIndex + (cameraZIndexOffsetByLayer.get(source) || 0) : source.options.zIndex;
   mesh.renderOrder = paneOrder * 1e6 + (zIndex || 0) * 1000 + order;
   mesh._nativeSource = source;
   mesh._nativeUsed = true;

package/src/{core → native}/syncGridLayer.js

@@ -1,21 +1,28 @@
+import { L } from '../globals/L.js';
+import { coreWhite } from '../globals/coreWhite.js';
+
 import { styleNativeMesh } from './styleNativeMesh.js';
 import { quadNativeMesh } from './quadNativeMesh.js';
-import { boundsQuad } from './boundsQuad.js';
+import { boundsQuad } from '../geometry/boundsQuad.js';
+
 
 export function syncGridLayer(state) {
   const { source, textures, meshes } = state;
   let key, tile, opacity, retained, mesh, nw, se;
-  for ([key, tile] of Object.entries(source._tiles || {})) {
+  for (key in source._tiles) {
+    if (!Object.hasOwn(source._tiles, key)) continue;
+    tile = source._tiles[key];
     if (!tile.loaded || tile.el instanceof HTMLImageElement && !tile.el.naturalWidth) continue;
     opacity = (source.options.opacity ?? 1) * (tile._gpuOpacity ?? 1);
     retained = textures.get(key);
     mesh = meshes.get(key);
     if (mesh && retained?.image === tile.el && retained.url === (tile.el.currentSrc || tile.el.src)) {
       retained.used = true;
-      styleNativeMesh(state, mesh, [1, 1, 1], opacity);
+      styleNativeMesh(state, mesh, coreWhite, opacity);
     } else {
       [nw, se] = source._tileCoordsToNwSe(tile.coords);
-      mesh = quadNativeMesh(state, key, tile.el, boundsQuad(state, new L.LatLngBounds(nw, se)), opacity);
+      mesh = quadNativeMesh(state, key, tile.el, boundsQuad(state,
+        /* alloc */ new L.LatLngBounds(nw, se)), opacity);
     }
     if (mesh) mesh.renderOrder += tile.coords.z / 100;
   }

package/src/{core → native}/syncImageOverlay.js

@@ -1,5 +1,5 @@
 import { quadNativeMesh } from './quadNativeMesh.js';
-import { boundsQuad } from './boundsQuad.js';
+import { boundsQuad } from '../geometry/boundsQuad.js';
 
 export function syncImageOverlay(state) {
   const { source } = state;

package/src/{core → native}/syncMarker.js

@@ -1,10 +1,12 @@
 import { quadNativeMesh } from './quadNativeMesh.js';
-import { markerQuadCorners } from './markerQuadCorners.js';
+import { markerQuadCorners } from '../geometry/markerQuadCorners.js';
 
 export function syncMarker(state) {
   const { source } = state;
-  let key, image, mesh;
-  for ([key, image] of [['shadow', source._shadow], ['icon', source._icon]]) {
+  let i, key, image, mesh;
+  for (i = 0; i < 2; i++) {
+    key = i ? 'icon' : 'shadow';
+    image = i ? source._icon : source._shadow;
     if (!(image instanceof HTMLImageElement) || !image.complete || !image.naturalWidth) continue;
     mesh = quadNativeMesh(state, key, image, markerQuadCorners(state, key, image), source.options.opacity ?? 1);
     if (key === 'shadow' && mesh) mesh.renderOrder -= 100 * 1e6;

package/src/native/syncVectorLayer.js

@@ -0,0 +1,29 @@
+import { geometryPixelStates } from '../globals/geometryPixelStates.js';
+
+
+import { nativeGeometry } from '../geometry/nativeGeometry.js';
+import { localPixelForGeometry } from '../projections/localPixelForGeometry.js';
+import { parseColor } from '../colors/parseColor.js';
+import { putNativeMesh } from './putNativeMesh.js';
+
+export function syncVectorLayer(state) {
+  const { source } = state;
+  geometryPixelStates.push(state);
+  let geometry;
+  try {
+    geometry = nativeGeometry(source, state.map, localPixelForGeometry);
+  } finally {
+    geometryPixelStates.pop();
+  }
+  const { fill, stroke } = geometry;
+  let i, key, positions, color, opacity, r, g, b;
+  for (i = 0; i < 2; i++) {
+    key = i ? 'stroke' : 'fill';
+    positions = i ? stroke : fill;
+    color = i ? source.options.color : source.options.fillColor || source.options.color;
+    opacity = i ? source.options.opacity : source.options.fillOpacity;
+    if (!positions.length) continue;
+    ({ r, g, b } = parseColor(color));
+    putNativeMesh(state, key, positions, /* alloc */ [r, g, b], opacity ?? 1);
+  }
+}

package/src/{core → native}/synchronizeNativeLayer.js

@@ -1,35 +1,27 @@
-import { current } from './current.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { L } from '../globals/L.js';
+
+
+import { current } from './isCurrentNativeLayer.js';
 import { syncGridLayer } from './syncGridLayer.js';
 import { syncImageOverlay } from './syncImageOverlay.js';
 import { syncMarker } from './syncMarker.js';
 import { syncVectorLayer } from './syncVectorLayer.js';
-import { disposeMesh } from '../rendering/disposeMesh.js';
-import { destroyTexture } from '../rendering/destroyTexture.js';
+import { pruneNativeResources } from './pruneNativeResources.js';
 
 export function synchronizeNativeLayer(state) {
   const { source, meshes, textures } = state;
-  if (!current(state) || !state.backend.renderer || state.failed) return;
+  if (!current(state) || !rendererByLayer.get(state.backend) || state.failed) return;
   if (!state.dirty && (!state.marker || !state.viewDirty)) return;
   state.dirty = false;
   state.viewDirty = false;
-  let mesh, texture, key;
+  let mesh, texture;
   for (mesh of meshes.values()) mesh._nativeUsed = false;
   for (texture of textures.values()) texture.used = false;
   if (source instanceof L.GridLayer) syncGridLayer(state);
   else if (source instanceof L.ImageOverlay) syncImageOverlay(state);
   else if (state.marker) syncMarker(state);
   else syncVectorLayer(state);
-  for ([key, mesh] of meshes) {
-    if (mesh._nativeUsed) continue;
-    disposeMesh(state.backend, mesh);
-    meshes.delete(key);
-    texture = textures.get(key);
-    if (texture) destroyTexture(state.backend, texture.texture);
-    textures.delete(key);
-  }
-  for ([key, texture] of textures) {
-    if (texture.used) continue;
-    destroyTexture(state.backend, texture.texture);
-    textures.delete(key);
-  }
+  pruneNativeResources(state);
 }