leaflet-city-mapper 0.0.1 → 0.0.3

package/src/core/nativeEvents.js

@@ -0,0 +1,26 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import { raycast } from '../picking/raycast.js';
+import { nativeEventMaps } from '../constants/nativeEventMaps.js';
+import { restoreNativeEvents } from './restoreNativeEvents.js';
+import { handleNativeMapEvent } from './handleNativeMapEvent.js';
+
+/** One GPU hit test per map event, rather than one invisible SVG path per feature. */
+export function nativeEvents(state) {
+  const { map } = state;
+  let context = nativeEventMaps.get(map);
+  if (!context) {
+    context = { map, states: new Set(), hovered: null };
+    const pointer = L.version.startsWith('2');
+    context.move = pointer ? 'pointermove' : 'mousemove';
+    context.out = pointer ? 'pointerout' : 'mouseout';
+    context.over = pointer ? 'pointerover' : 'mouseover';
+    context.descriptor = Object.getOwnPropertyDescriptor(map, '_fireDOMEvent');
+    context.fireDOMEvent = map._fireDOMEvent;
+    context.handle = handleNativeMapEvent;
+    context.restore = restoreNativeEvents;
+    nativeEventMaps.set(map, context);
+    map._fireDOMEvent = handleNativeMapEvent;
+  }
+  context.states.add(state);
+  state._nativeEventContext = context;
+}

package/src/core/nativeImageError.js

@@ -0,0 +1,8 @@
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+
+export function nativeImageError(event) {
+  let state;
+  for (state of nativeLayerState.imageStates.get(event.currentTarget) || []) {
+    state.source.fire('error', { error: new Error('Unable to load native layer image') });
+  }
+}

package/src/core/nativeImageRefresh.js

@@ -0,0 +1,7 @@
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function nativeImageRefresh(event) {
+  let state;
+  for (state of nativeLayerState.imageStates.get(event.currentTarget) || []) refreshNativeLayer(state);
+}

package/src/core/nativeLayer.js

@@ -0,0 +1,97 @@
+import { nativeMethodHandlers } from '../constants/nativeMethodHandlers.js';
+import { createMesh } from '../rendering/createMesh.js';
+import { destroyTexture } from '../rendering/destroyTexture.js';
+import { disposeMesh } from '../rendering/disposeMesh.js';
+import { nativeGeometry } from '../geometry/nativeGeometry.js';
+import { nativeEvents } from './nativeEvents.js';
+import { removeNativeEvents } from './removeNativeEvents.js';
+import { parseColor } from '../utils/parseColor.js';
+import { update } from '../scene/update.js';
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+import { current } from './current.js';
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+import { refreshNativeEvent } from './refreshNativeEvent.js';
+import { reorderNativeLayer } from './reorderNativeLayer.js';
+import { nativeSetLatLng } from './nativeSetLatLng.js';
+import { nativeSetLatLngs } from './nativeSetLatLngs.js';
+import { nativeAddLatLng } from './nativeAddLatLng.js';
+import { nativeSetRadius } from './nativeSetRadius.js';
+import { nativeSetStyle } from './nativeSetStyle.js';
+import { nativeRedraw } from './nativeRedraw.js';
+import { nativeSetIcon } from './nativeSetIcon.js';
+import { nativeSetUrl } from './nativeSetUrl.js';
+import { nativeSetBounds } from './nativeSetBounds.js';
+import { nativeSetOpacity } from './nativeSetOpacity.js';
+import { nativeSetZIndex } from './nativeSetZIndex.js';
+import { nativeSetZIndexOffset } from './nativeSetZIndexOffset.js';
+import { nativeBringToFront } from './nativeBringToFront.js';
+import { nativeBringToBack } from './nativeBringToBack.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';
+import { beforeNativeRender } from './beforeNativeRender.js';
+
+nativeLayerState.imageStates = new WeakMap();
+nativeLayerState.geometryPixelStates = [];
+
+/** Render from coordinates and detached raster sources; only accessible marker controls remain DOM. */
+export async function nativeLayer(state) {
+  const { source, map } = state;
+  const backend = state.backend = new L.Layer({ source: { type: '3d' } });
+  state.meshes = new Map();
+  state.textures = new Map();
+  state.methods = new Map();
+  state.originalMethods = new Map();
+  state.images = new Set();
+  map._nativeGPUOrder ||= 0;
+  map._nativeGPUBack ||= 0;
+  state.dirty = true;
+  state.viewDirty = true;
+  state.failed = false;
+  state.order = ++map._nativeGPUOrder;
+  state.marker = source instanceof L.Marker;
+  state.paneOrder = Number(getComputedStyle(source.getPane()).zIndex) || 0;
+  state.refresh = refreshNativeLayer;
+  state.reorder = reorderNativeLayer;
+  state.dispose = disposeNativeLayer;
+  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 of ['setLatLng', 'setLatLngs', 'addLatLng', 'setRadius', 'setStyle', 'redraw',
+    'setIcon', 'setUrl', 'setBounds', 'setOpacity', 'setZIndex', 'setZIndexOffset', 'bringToFront', 'bringToBack']) {
+    if (typeof source[name] !== 'function') continue;
+    own = Object.getOwnPropertyDescriptor(source, name), original = source[name];
+    state.methods.set(name, { own, original });
+    state.originalMethods.set(name, original);
+    source[name] = nativeMethodHandlers[name];
+  }
+  const ready = state.ready = Promise.withResolvers();
+  backend.once('ready', resolveNativeReady, state);
+  backend.once('error', rejectNativeReady, state);
+  backend.on('error', forwardNativeError, state);
+  refreshNativeLayer(state);
+  backend.addTo(map);
+  try {
+    await ready.promise;
+  } catch (error) {
+    disposeNativeLayer.call(state);
+    throw error;
+  }
+  if (!current(state)) return source;
+
+  backend._beforeRender = beforeNativeRender.bind(null, state);
+  try {
+    synchronizeNativeLayer(state);
+  } catch (error) {
+    disposeNativeLayer.call(state);
+    throw error;
+  }
+  update(state.backend);
+  return source;
+}

package/src/core/nativeLayerMethod.js

@@ -0,0 +1,21 @@
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function nativeLayerMethod(name, source, args) {
+  const state = source._nativeGPU, original = state.originalMethods.get(name);
+  const result = original.apply(source, args);
+  let layer, zIndex;
+  if ((name === 'bringToFront' || name === 'bringToBack') && source instanceof L.GridLayer) {
+    let extreme = name === 'bringToFront' ? -Infinity : Infinity;
+    for (layer of Object.values(state.map._layers)) {
+      if (layer === source || !(layer instanceof L.GridLayer) || layer.getPane() !== source.getPane()) continue;
+      zIndex = layer.options.zIndex || 0;
+      extreme = name === 'bringToFront' ? Math.max(extreme, zIndex) : Math.min(extreme, zIndex);
+    }
+    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;
+  refreshNativeLayer(state);
+  return result;
+}

package/src/core/nativeRedraw.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeRedraw(...args) { return nativeLayerMethod('redraw', this, args); }

package/src/core/nativeSetBounds.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetBounds(...args) { return nativeLayerMethod('setBounds', this, args); }

package/src/core/nativeSetIcon.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetIcon(...args) { return nativeLayerMethod('setIcon', this, args); }

package/src/core/nativeSetLatLng.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetLatLng(...args) { return nativeLayerMethod('setLatLng', this, args); }

package/src/core/nativeSetLatLngs.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetLatLngs(...args) { return nativeLayerMethod('setLatLngs', this, args); }

package/src/core/nativeSetOpacity.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetOpacity(...args) { return nativeLayerMethod('setOpacity', this, args); }

package/src/core/nativeSetRadius.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetRadius(...args) { return nativeLayerMethod('setRadius', this, args); }

package/src/core/nativeSetStyle.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetStyle(...args) { return nativeLayerMethod('setStyle', this, args); }

package/src/core/nativeSetUrl.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetUrl(...args) { return nativeLayerMethod('setUrl', this, args); }

package/src/core/nativeSetZIndex.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetZIndex(...args) { return nativeLayerMethod('setZIndex', this, args); }

package/src/core/nativeSetZIndexOffset.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeSetZIndexOffset(...args) { return nativeLayerMethod('setZIndexOffset', this, args); }

package/src/core/popupAdjustPan.js

@@ -0,0 +1,23 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { pointOf } from '../camera/pointOf.js';
+
+export function popupAdjustPan() {
+  const map = this._map;
+  if (!map.getPitch() && !map.getBearing()) return mapCameraState.popupPan.call(this);
+  if (!this.options.autoPan) return;
+  if (map._panAnim) map._panAnim.stop();
+  if (this._autopanning) { this._autopanning = false; return; }
+  const rect = this._container.getBoundingClientRect(), container = map.getContainer().getBoundingClientRect();
+  const min = pointOf(this.options.autoPanPaddingTopLeft || this.options.autoPanPadding);
+  const max = map.getSize().subtract(pointOf(this.options.autoPanPaddingBottomRight || this.options.autoPanPadding));
+  const left = rect.left - container.left, top = rect.top - container.top;
+  const right = rect.right - container.left, bottom = rect.bottom - container.top;
+  const dx = Math.min(0, left - min.x) || Math.max(0, right - max.x);
+  const dy = Math.min(0, top - min.y) || Math.max(0, bottom - max.y);
+  if (!dx && !dy) return;
+  if (this.options.keepInView) this._autopanning = true;
+  const screen = map.latLngToContainerPoint(this._latlng).subtract(new L.Point(dx, dy));
+  const delta = map.latLngToLayerPoint(this._latlng).subtract(map.containerPointToLayerPoint(screen));
+  map.fire('autopanstart');
+  map.panTo(map.unproject(map.project(map.getCenter()).add(delta)));
+}

package/src/core/popupGetEvents.js

@@ -0,0 +1,5 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function popupGetEvents() {
+  return { ...mapCameraState.popupEvents.call(this), rotate: this._updatePosition, pitch: this._updatePosition, move: this._updatePosition };
+}

package/src/core/popupUpdatePosition.js

@@ -0,0 +1,14 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { displayPoint } from '../camera/displayPoint.js';
+
+export function popupUpdatePosition() {
+  mapCameraState.popupPosition.call(this);
+  if (!this._map) return;
+  const point = this._map.latLngToLayerPoint(this._latlng), delta = displayPoint(this._map, point).subtract(point);
+  if (this._zoomAnimated) {
+    L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
+  } else {
+    this._container.style.left = `${this._containerLeft + delta.x}px`;
+    this._container.style.bottom = `${this._containerBottom - delta.y}px`;
+  }
+}

package/src/core/putNativeMesh.js

@@ -0,0 +1,33 @@
+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;
+  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, {
+      vertexColors: false, color, opacity, unlit: true, alphaMode: 'BLEND',
+      ...(texture ? { baseTexture: texture } : {}),
+    }, 0, source instanceof L.GridLayer ? state.rasterProgram : undefined);
+    if (source instanceof L.GridLayer) {
+      state.rasterProgram ||= mesh.program;
+      mesh.texture = texture;
+    }
+    meshes.set(key, mesh);
+  } else {
+    const attribute = mesh.geometry.attributes.position;
+    attribute.data.set(position);
+    attribute.needsUpdate = true;
+    mesh.geometry.bounds = null;
+  }
+  styleNativeMesh(state, mesh, color, opacity);
+  return mesh;
+}

package/src/core/quadNativeMesh.js

@@ -0,0 +1,15 @@
+import { textureFor } from './textureFor.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 = [0, 2, 1, 1, 2, 3];
+  const position = [], uv = [], textureCoords = [[0, 0], [1, 0], [0, 1], [1, 1]];
+  let index;
+  for (index of indices) {
+    position.push(...corners[index]);
+    uv.push(...textureCoords[index]);
+  }
+  return putNativeMesh(state, key, position, [1, 1, 1], opacity, texture, uv);
+}

package/src/core/readyNativeGPU.js

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

package/src/core/refreshNativeEvent.js

@@ -0,0 +1,5 @@
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function refreshNativeEvent() {
+  refreshNativeLayer(this);
+}

package/src/core/refreshNativeLayer.js

@@ -0,0 +1,29 @@
+import { nativeImageRefresh } from './nativeImageRefresh.js';
+import { nativeImageError } from './nativeImageError.js';
+import { removeImageState } from './removeImageState.js';
+import { addImageState } from './addImageState.js';
+import { update } from '../scene/update.js';
+
+export function refreshNativeLayer(state = this) {
+  state.dirty = true;
+  state.viewDirty = true;
+  state.failed = false;
+  state.hide();
+  const activeImages = [state.source._icon, state.source._shadow, state.source._image];
+  let image;
+  for (image of state.images) {
+    if (activeImages.includes(image)) continue;
+    image.removeEventListener('load', nativeImageRefresh);
+    image.removeEventListener('error', nativeImageError);
+    removeImageState(image, state);
+    state.images.delete(image);
+  }
+  for (image of activeImages) {
+    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 (state.backend._shared) update(state.backend);
+}

package/src/core/refreshNativeLayerContract.js

@@ -0,0 +1,3 @@
+export function refreshNativeLayerContract(layer = this) {
+  layer?._nativeGPU?.refresh?.();
+}

package/src/core/rejectNativeReady.js

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

package/src/core/removeImageState.js

@@ -0,0 +1,8 @@
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+
+export function removeImageState(image, state) {
+  const states = nativeLayerState.imageStates.get(image);
+  if (!states) return;
+  states.delete(state);
+  if (!states.size) nativeLayerState.imageStates.delete(image);
+}

package/src/core/removeNativeEvents.js

@@ -0,0 +1,16 @@
+import { nativeEventMaps } from '../constants/nativeEventMaps.js';
+
+export function removeNativeEvents(state) {
+  const context = state._nativeEventContext;
+  if (!context) return;
+  const { map } = context;
+  context.states.delete(state);
+  if (context.hovered === state.source) {
+    context.hovered = null;
+    map.getContainer().style.cursor = '';
+  }
+  state._nativeEventContext = null;
+  if (context.states.size) return;
+  context.restore();
+  nativeEventMaps.delete(map);
+}

package/src/core/removeTargets.js

@@ -0,0 +1,8 @@
+export function removeTargets(state) {
+  if (state.source._nativeGPU === state) state.source._nativeGPU = null;
+  state.dispose?.();
+  let element;
+  for (element of state.hidden) {
+    element.classList.remove('leaflet-webgpu-target');
+  }
+}

package/src/core/reorderNativeLayer.js

@@ -0,0 +1,6 @@
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function reorderNativeLayer(front) {
+  this.order = front ? ++this.map._nativeGPUOrder : --this.map._nativeGPUBack;
+  refreshNativeLayer(this);
+}

package/src/core/resolveNativeReady.js

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

package/src/core/restoreNativeEvents.js

@@ -0,0 +1,6 @@
+export function restoreNativeEvents() {
+  const { map, descriptor, handle } = this;
+  if (map._fireDOMEvent !== handle) return;
+  if (descriptor) Object.defineProperty(map, '_fireDOMEvent', descriptor);
+  else delete map._fireDOMEvent;
+}

package/src/core/runGridFades.js

@@ -0,0 +1,14 @@
+import { indexState } from '../constants/indexState.js';
+import { updateGridOpacity } from './updateGridOpacity.js';
+
+export function runGridFades() {
+  indexState.gridFadeFrame = null;
+  const layers = [...indexState.pendingGridFades];
+  let layer, version;
+  for ([layer, version] of layers) {
+    if (indexState.pendingGridFades.get(layer) !== version) continue;
+    indexState.pendingGridFades.delete(layer);
+    layer._fadeFrame = null;
+    updateGridOpacity.call(layer);
+  }
+}

package/src/core/runMarkerPanFrame.js

@@ -0,0 +1,12 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function runMarkerPanFrame() {
+  mapCameraState.markerPanFrame = null;
+  const pending = [...mapCameraState.pendingMarkerPan];
+  mapCameraState.pendingMarkerPan.clear();
+  let drag, event;
+  for ([drag, event] of pending) {
+    drag._panRequest = null;
+    drag._adjustPan(event);
+  }
+}

package/src/core/scheduleGridFade.js

@@ -0,0 +1,9 @@
+import { indexState } from '../constants/indexState.js';
+import { runGridFades } from './runGridFades.js';
+
+export function scheduleGridFade(layer) {
+  layer._fadeVersion = (layer._fadeVersion || 0) + 1;
+  indexState.pendingGridFades.set(layer, layer._fadeVersion);
+  if (indexState.gridFadeFrame === null) indexState.gridFadeFrame = requestAnimationFrame(runGridFades);
+  layer._fadeFrame = indexState.gridFadeFrame;
+}

package/src/core/scheduleMarkerPan.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { runMarkerPanFrame } from './runMarkerPanFrame.js';
+
+export function scheduleMarkerPan(drag, event) {
+  mapCameraState.pendingMarkerPan.set(drag, event);
+  if (mapCameraState.markerPanFrame === null) mapCameraState.markerPanFrame = requestAnimationFrame(runMarkerPanFrame);
+  drag._panRequest = mapCameraState.markerPanFrame;
+}

package/src/core/styleNativeMesh.js

@@ -0,0 +1,10 @@
+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;
+  mesh.renderOrder = paneOrder * 1e6 + (zIndex || 0) * 1000 + order;
+  mesh._nativeSource = source;
+  mesh._nativeUsed = true;
+}

package/src/core/syncGridLayer.js

@@ -0,0 +1,22 @@
+import { styleNativeMesh } from './styleNativeMesh.js';
+import { quadNativeMesh } from './quadNativeMesh.js';
+import { boundsQuad } from './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 || {})) {
+    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);
+    } else {
+      [nw, se] = source._tileCoordsToNwSe(tile.coords);
+      mesh = quadNativeMesh(state, key, tile.el, boundsQuad(state, new L.LatLngBounds(nw, se)), opacity);
+    }
+    if (mesh) mesh.renderOrder += tile.coords.z / 100;
+  }
+}

package/src/core/syncImageOverlay.js

@@ -0,0 +1,9 @@
+import { quadNativeMesh } from './quadNativeMesh.js';
+import { boundsQuad } from './boundsQuad.js';
+
+export function syncImageOverlay(state) {
+  const { source } = state;
+  if (source._image?.complete && source._image.naturalWidth) {
+    quadNativeMesh(state, 'image', source._image, boundsQuad(state, source.getBounds()), source.options.opacity ?? 1);
+  }
+}

package/src/core/syncMarker.js

@@ -0,0 +1,12 @@
+import { quadNativeMesh } from './quadNativeMesh.js';
+import { markerQuadCorners } from './markerQuadCorners.js';
+
+export function syncMarker(state) {
+  const { source } = state;
+  let key, image, mesh;
+  for ([key, image] of [['shadow', source._shadow], ['icon', source._icon]]) {
+    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/core/syncVectorLayer.js

@@ -0,0 +1,26 @@
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+import { nativeGeometry } from '../geometry/nativeGeometry.js';
+import { localPixelForGeometry } from './localPixelForGeometry.js';
+import { parseColor } from '../utils/parseColor.js';
+import { putNativeMesh } from './putNativeMesh.js';
+
+export function syncVectorLayer(state) {
+  const { source } = state;
+  nativeLayerState.geometryPixelStates.push(state);
+  let geometry;
+  try {
+    geometry = nativeGeometry(source, state.map, localPixelForGeometry);
+  } finally {
+    nativeLayerState.geometryPixelStates.pop();
+  }
+  const { fill, stroke } = geometry;
+  let key, positions, color, opacity, r, g, b;
+  for ([key, positions, color, opacity] of [
+    ['fill', fill, source.options.fillColor || source.options.color, source.options.fillOpacity],
+    ['stroke', stroke, source.options.color, source.options.opacity],
+  ]) {
+    if (!positions.length) continue;
+    ({ r, g, b } = parseColor(color));
+    putNativeMesh(state, key, positions, [r, g, b], opacity ?? 1);
+  }
+}

package/src/core/synchronizeNativeLayer.js

@@ -0,0 +1,35 @@
+import { current } from './current.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';
+
+export function synchronizeNativeLayer(state) {
+  const { source, meshes, textures } = state;
+  if (!current(state) || !state.backend.renderer || state.failed) return;
+  if (!state.dirty && (!state.marker || !state.viewDirty)) return;
+  state.dirty = false;
+  state.viewDirty = false;
+  let mesh, texture, key;
+  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);
+  }
+}