leaflet-city-mapper 0.0.1 → 0.0.3

package/src/controls/rotateButtonKeydown.js

@@ -0,0 +1,11 @@
+export function rotateButtonKeydown(event) {
+  const control = this._rotateControl, map = control._map, step = event.shiftKey ? 15 : 5;
+  if (event.key === 'ArrowLeft') map.setBearing(map.getBearing() - step);
+  else if (event.key === 'ArrowRight') map.setBearing(map.getBearing() + step);
+  else if (event.key === 'ArrowUp' && control.options.visualizePitch) map.setPitch(map.getPitch() + step);
+  else if (event.key === 'ArrowDown' && control.options.visualizePitch) map.setPitch(map.getPitch() - step);
+  else if (event.key === 'Home' || event.key === ' ') this.click();
+  else return;
+  event.preventDefault();
+  event.stopPropagation();
+}

package/src/controls/rotateControl.js

@@ -0,0 +1,3 @@
+export function rotateControl(options) {
+  return new L.Control.Rotate(options);
+}

package/src/controls/rotateOnAdd.js

@@ -0,0 +1,38 @@
+import { rotateButtonClick } from './rotateButtonClick.js';
+import { rotateButtonKeydown } from './rotateButtonKeydown.js';
+import { refreshRotateControl } from './refreshRotateControl.js';
+import { dragCamera } from './dragCamera.js';
+import { acceptRotateDrag } from './acceptRotateDrag.js';
+import { refreshRotateFocus } from './refreshRotateFocus.js';
+
+export function rotateOnAdd(map) {
+  const container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
+  const button = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
+  this._map = map;
+  this._container = container;
+  this._button = button;
+  button._rotateControl = this;
+  button.href = '#';
+  button.draggable = false;
+  button.setAttribute('role', 'button');
+  button.title = this.options.visualizePitch ? 'Reset bearing and pitch' : 'Reset bearing to north';
+  button.setAttribute('aria-label', button.title);
+  button.style.cssText = 'cursor:grab;touch-action:none';
+  const arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow', button);
+  this._arrow = arrow;
+  arrow.setAttribute('aria-hidden', 'true');
+  arrow.style.cssText = 'display:block;width:100%;height:100%;pointer-events:none;background: no-repeat center / 29px 29px';
+  arrow.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 29 29%27%3E%3Cpath fill=%27%23333%27 d=%27M10.5 14 14.5 6 18.5 14Z%27/%3E%3Cpath fill=%27%23ccc%27 d=%27M10.5 16 14.5 24 18.5 16Z%27/%3E%3C/svg%3E")';
+  button.onclick = rotateButtonClick;
+  button.onkeydown = rotateButtonKeydown;
+  this._refresh = refreshRotateControl;
+  map.on('rotate pitch', this._refresh, this);
+  this._refresh();
+  this._dragState = dragCamera(map, button, acceptRotateDrag,
+    [0.8, this.options.visualizePitch ? 0.5 : 0]);
+  button.addEventListener('focusout', refreshRotateFocus);
+  L.DomEvent.on(button, 'dblclick contextmenu', L.DomEvent.stop);
+  L.DomEvent.disableClickPropagation(container);
+  L.DomEvent.disableScrollPropagation(container);
+  return container;
+}

package/src/controls/rotateOnRemove.js

@@ -0,0 +1,6 @@
+import { pitchDragRemoveHooks } from './pitchDragRemoveHooks.js';
+
+export function rotateOnRemove(map) {
+  map.off('rotate pitch', this._refresh, this);
+  pitchDragRemoveHooks.call(this);
+}

package/src/controls/shiftRotateAddHooks.js

@@ -0,0 +1,8 @@
+import { shiftRotateWheel } from './shiftRotateWheel.js';
+
+export function shiftRotateAddHooks() {
+  const container = this._map.getContainer();
+  container._cameraShiftRotate = this;
+  this._wheel = shiftRotateWheel;
+  container.addEventListener('wheel', this._wheel, { passive: false, capture: true });
+}

package/src/controls/shiftRotateRemoveHooks.js

@@ -0,0 +1,5 @@
+export function shiftRotateRemoveHooks() {
+  const container = this._map.getContainer();
+  container.removeEventListener('wheel', this._wheel, true);
+  delete container._cameraShiftRotate;
+}

package/src/controls/shiftRotateWheel.js

@@ -0,0 +1,9 @@
+import { editable } from './editable.js';
+
+export function shiftRotateWheel(event) {
+  const handler = this._cameraShiftRotate;
+  if (!event.shiftKey || editable(event.target) || event.target.closest('.leaflet-control')) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  handler._map.setBearing(handler._map.getBearing() + Math.sign(event.deltaY) * 5);
+}

package/src/controls/startCameraTouch.js

@@ -0,0 +1,23 @@
+export function startCameraTouch(event) {
+  const state = this._cameraTouchState, { map, container } = state;
+  if (state.touch || event.touches.length !== 2 || event.target.closest('.leaflet-control')) return;
+  if (!map.touchRotate.enabled() && !map.touchPitch.enabled()) return;
+  const [a, b] = event.touches;
+  if (Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY) < 1) return;
+  map._stopPitchBearingAnimation();
+  const middle = new L.Point((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2)
+    .subtract(new L.Point(container.getBoundingClientRect().left, container.getBoundingClientRect().top));
+  state.touch = {
+    angle: Math.atan2(b.clientY - a.clientY, b.clientX - a.clientX),
+    distance: Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY), middle,
+    anchor: map.containerPointToLatLng(middle), zoom: map.getZoom(),
+    bearing: map.getBearing(), pitch: map.getPitch(), zooming: map.touchZoom?.enabled(),
+    dragging: map.dragging?.enabled(),
+  };
+  map.dragging?.disable();
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  if (state.nativeZoom !== undefined) state.touch.zooming = state.nativeZoom;
+  state.touch.snap = map.options.zoomSnap;
+  map.options.zoomSnap = 0;
+}

package/src/core/addImageState.js

@@ -0,0 +1,7 @@
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+
+export function addImageState(image, state) {
+  let states = nativeLayerState.imageStates.get(image);
+  if (!states) nativeLayerState.imageStates.set(image, states = new Set());
+  states.add(state);
+}

package/src/core/addRasterImage.js

@@ -0,0 +1,10 @@
+import { indexState } from '../constants/indexState.js';
+import { fireRasterLoad } from './fireRasterLoad.js';
+
+export function addRasterImage() {
+  if (!this._image) this._initImage();
+  if (this._image.complete && this._image.naturalWidth) {
+    indexState.pendingRasterLoads.push(this);
+    queueMicrotask(fireRasterLoad);
+  }
+}

package/src/core/adjustCameraMarkerPan.js

@@ -0,0 +1,22 @@
+import { pointOf } from '../camera/pointOf.js';
+import { scheduleMarkerPan } from './scheduleMarkerPan.js';
+
+export function adjustCameraMarkerPan(event) {
+  const marker = this._marker, map = marker._map;
+  if (!map.getPitch() && !map.getBearing()) return this._cameraOriginalAdjustPan.call(this, event);
+  const screen = L.DomUtil.getPosition(marker._icon).add(map._getMapPanePos());
+  const size = map.getSize(), padding = pointOf(marker.options.autoPanPadding);
+  const speed = marker.options.autoPanSpeed;
+  const movement = new L.Point(
+    (Math.max(0, screen.x - size.x + padding.x) - Math.max(0, padding.x - screen.x)) / Math.max(1, padding.x) * speed,
+    (Math.max(0, screen.y - size.y + padding.y) - Math.max(0, padding.y - screen.y)) / Math.max(1, padding.y) * speed);
+  if (!movement.x && !movement.y) return;
+  const pane = map._getMapPanePos();
+  map.panBy(movement, { animate: false });
+  const shift = pane.subtract(map._getMapPanePos());
+  this._draggable._newPos._add(shift);
+  this._draggable._startPos._add(shift);
+  L.DomUtil.setPosition(marker._icon, this._draggable._newPos);
+  this._onDrag(event);
+  scheduleMarkerPan(this, event);
+}

package/src/core/beforeNativeRender.js

@@ -0,0 +1,10 @@
+import { synchronizeNativeLayer } from './synchronizeNativeLayer.js';
+
+export function beforeNativeRender(state) {
+  try {
+    synchronizeNativeLayer(state);
+  } catch (error) {
+    state.failed = true;
+    state.source.fire('error', { error });
+  }
+}

package/src/core/boundsQuad.js

@@ -0,0 +1,11 @@
+import { localPosition } from './localPosition.js';
+
+export function boundsQuad(state, bounds) {
+  const corners = [
+    bounds.getNorthWest(), bounds.getNorthEast(), bounds.getSouthWest(), bounds.getSouthEast(),
+  ];
+  const positions = [];
+  let corner;
+  for (corner of corners) positions.push(localPosition(state, corner));
+  return positions;
+}

package/src/core/bringNativeLayerToBack.js

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

package/src/core/bringNativeLayerToFront.js

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

package/src/core/cameraCircleBounds.js

@@ -0,0 +1,6 @@
+import { indexState } from '../constants/indexState.js';
+
+export function cameraCircleBounds() {
+  this._project();
+  return indexState.boundsMethods.get(this).call(this);
+}

package/src/core/cameraMarkerDrag.js

@@ -0,0 +1,18 @@
+import { cameraMarkerOnDrag } from './cameraMarkerOnDrag.js';
+import { adjustCameraMarkerPan } from './adjustCameraMarkerPan.js';
+
+export function cameraMarkerDrag() {
+  if (!this.dragging || this.dragging._cameraDrag) return;
+  const drag = this.dragging, original = drag._onDrag, adjustPan = drag._adjustPan;
+  drag._cameraOriginalOnDrag = original;
+  drag._cameraOriginalAdjustPan = adjustPan;
+  drag._onDrag = cameraMarkerOnDrag;
+  drag._adjustPan = adjustCameraMarkerPan;
+  // The handler may already be enabled and listening with its original method.
+  const enabled = drag.enabled();
+  if (enabled) {
+    drag._draggable.off('drag', original, drag);
+    drag._draggable.on('drag', drag._onDrag, drag);
+  }
+  drag._cameraDrag = true;
+}

package/src/core/cameraMarkerOnDrag.js

@@ -0,0 +1,8 @@
+export function cameraMarkerOnDrag(event) {
+  const map = this._marker._map;
+  const screen = L.DomUtil.getPosition(this._marker._icon).add(map._getMapPanePos());
+  const point = map.containerPointToLayerPoint(screen);
+  L.DomUtil.setPosition(this._marker._icon, point);
+  this._cameraOriginalOnDrag.call(this, event);
+  this._marker._setPos(point);
+}

package/src/core/cancelGridFade.js

@@ -0,0 +1,10 @@
+import { indexState } from '../constants/indexState.js';
+
+export function cancelGridFade(layer) {
+  indexState.pendingGridFades.delete(layer);
+  layer._fadeFrame = null;
+  if (!indexState.pendingGridFades.size && indexState.gridFadeFrame !== null) {
+    cancelAnimationFrame(indexState.gridFadeFrame);
+    indexState.gridFadeFrame = null;
+  }
+}

package/src/core/closestCameraLayerPoint.js

@@ -0,0 +1,7 @@
+import { indexState } from '../constants/indexState.js';
+
+export function closestCameraLayerPoint(point) {
+  this._project();
+  this._parts = this._rings;
+  return indexState.closestMethods.get(this).call(this, point);
+}

package/src/core/compareNativeHits.js

@@ -0,0 +1,3 @@
+export function compareNativeHits(a, b) {
+  return b.object.renderOrder - a.object.renderOrder || a.distance - b.distance;
+}

package/src/core/current.js

@@ -0,0 +1,3 @@
+export function current(state) {
+  return state.source._nativeGPU === state && state.map.hasLayer(state.source);
+}

package/src/core/disposeNativeLayer.js

@@ -0,0 +1,35 @@
+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';
+
+export function disposeNativeLayer() {
+  const state = this;
+  const { source, map, backend, 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);
+  meshes.clear();
+  for (texture of textures.values()) destroyTexture(backend, texture.texture);
+  textures.clear();
+  for (image of images) {
+    image.removeEventListener('load', nativeImageRefresh);
+    image.removeEventListener('error', nativeImageError);
+    removeImageState(image, state);
+  }
+  backend._beforeRender = null;
+  backend.remove();
+}

package/src/core/fireRasterLoad.js

@@ -0,0 +1,5 @@
+import { indexState } from '../constants/indexState.js';
+
+export function fireRasterLoad() {
+  indexState.pendingRasterLoads.shift()?.fire('load');
+}

package/src/core/forwardNativeError.js

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

package/src/core/gridlayerGetEvents.js

@@ -0,0 +1,7 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function gridlayerGetEvents() {
+  const events = mapCameraState.gridEvents.call(this);
+  this._cameraGridUpdate ||= L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this);
+  return { ...events, rotate: this._cameraGridUpdate, pitch: this._cameraGridUpdate };
+}

package/src/core/gridlayerGetTiledPixelBounds.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function gridlayerGetTiledPixelBounds(center) {
+  if (!this._map.getBearing() && !this._map.getPitch()) return mapCameraState.tiledBounds.call(this, center);
+  const bounds = this._map.getBounds();
+  return new L.Bounds(this._map.project(bounds.getNorthWest(), this._tileZoom),
+    this._map.project(bounds.getSouthEast(), this._tileZoom));
+}

package/src/core/handleNativeMapEvent.js

@@ -0,0 +1,47 @@
+import { nativeEventMaps } from '../constants/nativeEventMaps.js';
+import { cityMapper } from '../constants/cityMapper.js';
+import { raycast } from '../picking/raycast.js';
+import { compareNativeHits } from './compareNativeHits.js';
+
+export function handleNativeMapEvent(event, type = event.type, targets) {
+  const map = this, context = nativeEventMaps.get(map), fireDOMEvent = context.fireDOMEvent;
+  const owner = cityMapper.renderers.get(map);
+  if (!owner?.renderer || targets || !['click', 'preclick', 'dblclick', 'contextmenu',
+    'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout',
+    'pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout'].includes(type)) {
+    return fireDOMEvent.call(this, event, type, targets);
+  }
+  const target = event.target;
+  const dom = target instanceof Element &&
+    target.closest('.leaflet-marker-icon,.leaflet-popup,.leaflet-tooltip,.leaflet-control');
+  if (dom && context.hovered && (type === context.move || type === context.out)) {
+    fireDOMEvent.call(map, event, context.out, [context.hovered]);
+    context.hovered = null;
+    map.getContainer().style.cursor = '';
+  }
+  if (dom || type === context.move && (map.dragging?.moving() || map._animatingZoom)) {
+    return fireDOMEvent.call(this, event, type, targets);
+  }
+  const hits = [];
+  let candidate, source2, backend;
+  if (type !== context.out) {
+    for (candidate of context.states) {
+      ({ source: source2, backend } = candidate);
+      if (source2 instanceof L.Marker || source2.options.interactive === false ||
+        !(source2 instanceof L.Path) && !source2.options.interactive) continue;
+      hits.push(...raycast(backend, event, candidate.meshes.values(), false));
+    }
+  }
+  hits.sort(compareNativeHits);
+  let source = hits[0]?.object._nativeSource || null;
+  if ((type === 'click' || type === 'preclick') && source && map._draggableMoved(source)) source = null;
+  if (type === context.move || type === context.out) {
+    if (context.hovered !== source) {
+      if (context.hovered) fireDOMEvent.call(map, event, context.out, [context.hovered]);
+      context.hovered = source;
+      if (source) fireDOMEvent.call(map, event, context.over, [source]);
+      map.getContainer().style.cursor = source ? 'pointer' : '';
+    }
+  }
+  return fireDOMEvent.call(this, event, type, source ? [source] : undefined);
+}

package/src/core/hideTargets.js

@@ -0,0 +1,16 @@
+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;
+  for (element of state.hidden) {
+    if (targets.includes(element)) continue;
+    element.classList.remove('leaflet-webgpu-target');
+    state.hidden.delete(element);
+  }
+  for (element of targets) {
+    if (!element || state.hidden.has(element)) continue;
+    element.classList.add('leaflet-webgpu-target');
+    state.hidden.add(element);
+  }
+}

package/src/core/initNativeGPU.js

@@ -0,0 +1,21 @@
+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';
+
+export function initNativeGPU(source, map) {
+  if (source._nativeGPU) 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();
+  source.once('remove', removeTargets.bind(null, state));
+  source.ready = Promise.resolve().then(readyNativeGPU.bind(null, state));
+  source.ready.catch(reportError.bind(null, source));
+}

package/src/core/initializeGridContainer.js

@@ -0,0 +1,6 @@
+import { indexState } from '../constants/indexState.js';
+
+export function initializeGridContainer() {
+  indexState.gridInitializers.get(this).call(this);
+  this._container.remove();
+}

package/src/core/initializeNativeLayer.js

@@ -0,0 +1,42 @@
+import { noOperation } from '../utils/noOperation.js';
+import { emptyEvents } from '../scene/emptyEvents.js';
+import { refreshNativeLayerContract } from './refreshNativeLayerContract.js';
+import { bringNativeLayerToFront } from './bringNativeLayerToFront.js';
+import { bringNativeLayerToBack } from './bringNativeLayerToBack.js';
+import { indexState } from '../constants/indexState.js';
+import { closestCameraLayerPoint } from './closestCameraLayerPoint.js';
+import { cameraCircleBounds } from './cameraCircleBounds.js';
+import { initializeGridContainer } from './initializeGridContainer.js';
+import { updateGridOpacity } from './updateGridOpacity.js';
+import { addRasterImage } from './addRasterImage.js';
+
+export function initializeNativeLayer() {
+  if (this instanceof L.Polyline || this instanceof L.CircleMarker) {
+    this.beforeAdd = this.onAdd = this.onRemove = this._updateBounds = noOperation;
+    this.getEvents = emptyEvents;
+    this._renderer = {
+      options: { tolerance: 0 },
+      _updatePath: refreshNativeLayerContract,
+      _updateStyle: refreshNativeLayerContract,
+      _bringToFront: bringNativeLayerToFront,
+      _bringToBack: bringNativeLayerToBack,
+    };
+    if (this instanceof L.Polyline) {
+      indexState.closestMethods.set(this, this.closestLayerPoint);
+      this.closestLayerPoint = closestCameraLayerPoint;
+    }
+    if (this instanceof L.Circle) {
+      indexState.boundsMethods.set(this, this.getBounds);
+      this.getBounds = cameraCircleBounds;
+    }
+  } else if (this instanceof L.GridLayer) {
+    indexState.gridInitializers.set(this, this._initContainer);
+    this._initContainer = initializeGridContainer;
+    this._updateOpacity = updateGridOpacity;
+  } else if (this instanceof L.ImageOverlay && !(this instanceof L.VideoOverlay) && !(this instanceof L.SVGOverlay)) {
+    this.onAdd = addRasterImage;
+    this.onRemove = noOperation;
+    this.getEvents = emptyEvents;
+    this._reset = refreshNativeLayerContract;
+  }
+}

package/src/core/localPixel.js

@@ -0,0 +1,5 @@
+import { localPosition } from './localPosition.js';
+
+export function localPixel(state, point) {
+  return localPosition(state, state.map.unproject(point));
+}

package/src/core/localPixelForGeometry.js

@@ -0,0 +1,6 @@
+import { localPixel } from './localPixel.js';
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+
+export function localPixelForGeometry(point) {
+  return localPixel(nativeLayerState.geometryPixelStates[nativeLayerState.geometryPixelStates.length - 1], point);
+}

package/src/core/localPosition.js

@@ -0,0 +1,6 @@
+export function localPosition(state, latlng) {
+  const { map, backend } = state, crs = map.options.crs;
+  const origin = crs.project(backend.location), point = crs.project(latlng);
+  const metres = Math.cos(backend.location.lat * Math.PI / 180);
+  return [(point.x - origin.x) * metres, 0, -(point.y - origin.y) * metres];
+}

package/src/core/markerCameraIconPoint.js

@@ -0,0 +1,9 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function markerCameraIconPoint(x, y) {
+  let rotation = this.options.rotation + (this.options.rotateWithView ? this._map.getBearing() * mapCameraState.radians : 0);
+  if (this.options.keepUpright && Math.cos(rotation) < 0) rotation += Math.PI;
+  const scale = this.options.scale;
+  return new L.Point((x * Math.cos(rotation) - y * Math.sin(rotation)) * scale,
+    (x * Math.sin(rotation) + y * Math.cos(rotation)) * scale);
+}

package/src/core/markerGetEvents.js

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

package/src/core/markerInitInteraction.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { cameraMarkerDrag } from './cameraMarkerDrag.js';
+
+export function markerInitInteraction() {
+  const result = mapCameraState.markerMethods._initInteraction.call(this);
+  cameraMarkerDrag.call(this);
+  return result;
+}

package/src/core/markerQuadCorners.js

@@ -0,0 +1,31 @@
+import { localPosition } from './localPosition.js';
+
+export function markerQuadCorners(state, key, image) {
+  const { source, map, backend } = state;
+  const world = new DOMPoint(...localPosition(state, source.getLatLng()), 1)
+    .matrixTransform(new DOMMatrix(backend.root.worldMatrix));
+  const clip = world.matrixTransform(new DOMMatrix(backend.camera.projectionViewMatrix));
+  const inverse = new DOMMatrix(backend.camera.projectionViewMatrix).inverse();
+  const toLocal = new DOMMatrix(backend.root.worldMatrix).inverse();
+  const options = source.options.icon.options, size = map.getSize();
+  const dimensions = options[key === 'shadow' ? 'shadowSize' : 'iconSize'] ||
+    [image.naturalWidth, image.naturalHeight];
+  const width = dimensions.x ?? dimensions[0], height = dimensions.y ?? dimensions[1];
+  const anchor = (key === 'shadow' && options.shadowAnchor) ||
+    options.iconAnchor || [Math.floor(width / 2), Math.floor(height / 2)];
+  const center = new L.Point((clip.x / clip.w + 1) * size.x / 2, (1 - clip.y / clip.w) * size.y / 2);
+  const left = center.x - (anchor.x ?? anchor[0]), top = center.y - (anchor.y ?? anchor[1]);
+  const screenCorners = [[left, top], [left + width, top],
+    [left, top + height], [left + width, top + height]];
+  const corners = [];
+  let pointX, pointY, offset, x, y, p, result;
+  for ([pointX, pointY] of screenCorners) {
+    offset = source._cameraIconPoint(pointX - center.x, pointY - center.y);
+    x = center.x + offset.x, y = center.y + offset.y;
+    p = new DOMPoint(x / size.x * 2 - 1,
+      1 - y / size.y * 2, clip.z / clip.w, 1).matrixTransform(inverse);
+    result = new DOMPoint(p.x / p.w, p.y / p.w, p.z / p.w, 1).matrixTransform(toLocal);
+    corners.push([result.x, result.y, result.z]);
+  }
+  return corners;
+}

package/src/core/markerSetIcon.js

@@ -0,0 +1,9 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { initNativeGPU } from './initNativeGPU.js';
+
+export function markerSetIcon(icon) {
+  if (!(icon instanceof L.DivIcon)) icon.options.crossOrigin ||= true;
+  const result = mapCameraState.markerMethods.setIcon.call(this, icon);
+  if (this._map && !(icon instanceof L.DivIcon)) initNativeGPU(this, this._map);
+  return result;
+}

package/src/core/markerSetPos.js

@@ -0,0 +1,14 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { displayPoint } from '../camera/displayPoint.js';
+
+export function markerSetPos(point) {
+  mapCameraState.markerMethods._setPos.call(this, displayPoint(this._map, point));
+  let element, key, direction, options, anchor;
+  for ([element, key] of [[this._icon, 'iconAnchor'], [this._shadow, 'shadowAnchor']]) {
+    if (!element) continue;
+    direction = this._cameraIconPoint(1, 0), options = this.options.icon.options;
+    anchor = options[key] || options.iconAnchor;
+    element.style.transformOrigin = anchor ? `${anchor.x ?? anchor[0]}px ${anchor.y ?? anchor[1]}px` : 'center';
+    element.style.transform += ` rotate(${Math.atan2(direction.y, direction.x)}rad) scale(${this.options.scale})`;
+  }
+}

package/src/core/markerSetRotation.js

@@ -0,0 +1,7 @@
+export function markerSetRotation(rotation) {
+  if (!Number.isFinite(rotation)) throw new TypeError('Marker rotation must be finite');
+  this.options.rotation = rotation;
+  this.update();
+  this._nativeGPU?.refresh?.();
+  return this;
+}

package/src/core/markerUpdateZIndex.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function markerUpdateZIndex(offset) {
+  mapCameraState.markerMethods._updateZIndex.call(this, offset);
+  const changed = this._cameraZIndexOffset !== offset;
+  this._cameraZIndexOffset = offset;
+  if (changed) this._nativeGPU?.refresh?.();
+}

package/src/core/nativeAddLatLng.js

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

package/src/core/nativeBringToBack.js

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

package/src/core/nativeBringToFront.js

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