leaflet-city-mapper 0.0.1 → 0.0.2

package/src/utils/nativeGeometry.js

@@ -0,0 +1,131 @@
+import { triangulate } from './triangulate.js';
+
+/** Leaflet paths become flat triangles; pixel-sized strokes are rebuilt on zoom. */
+export function nativeGeometry(source, map, point) {
+  const fill = [], stroke = [], options = source.options;
+  const triangle = (target, a, b, c) => target.push(...point(a), ...point(b), ...point(c));
+  const disk = (center, radius, target, radiusY = radius) => {
+    if (!(radius > 0) || !(radiusY > 0)) return;
+    const count = Math.max(12, Math.min(128, Math.ceil(Math.PI * Math.sqrt(radius))));
+    for (let i = 0; i < count; i++) {
+      const at = index => new L.Point(center.x + radius * Math.cos(index * 2 * Math.PI / count),
+        center.y + radiusY * Math.sin(index * 2 * Math.PI / count));
+      triangle(target, center, at(i), at(i + 1));
+    }
+  };
+  const width = Number(options.weight) || 0;
+  const dash = (Array.isArray(options.dashArray) ? options.dashArray :
+    String(options.dashArray || '').trim().split(/[ ,]+/)).map(Number);
+  if (dash.some(value => !Number.isFinite(value) || value < 0)) throw new Error('Invalid Leaflet dashArray');
+  if (dash.every(value => value === 0)) dash.length = 0;
+  if (dash.length % 2) dash.push(...dash);
+  const line = (points, closed) => {
+    if (!options.stroke || width <= 0 || points.length < 2) return;
+    const radius = width / 2;
+    const segment = (a, b, startCap, endCap) => {
+      const length = a.distanceTo(b);
+      if (!length) return;
+      const direction = b.subtract(a).divideBy(length);
+      const normal = new L.Point(-direction.y * radius, direction.x * radius);
+      if (options.lineCap === 'square') {
+        if (startCap) a = a.subtract(direction.multiplyBy(radius));
+        if (endCap) b = b.add(direction.multiplyBy(radius));
+      }
+      triangle(stroke, a.add(normal), a.subtract(normal), b.add(normal));
+      triangle(stroke, b.add(normal), a.subtract(normal), b.subtract(normal));
+      if (options.lineCap === 'round') {
+        if (startCap) disk(a, radius, stroke);
+        if (endCap) disk(b, radius, stroke);
+      }
+    };
+    let distance = Number(options.dashOffset) || 0;
+    const period = dash.reduce((sum, value) => sum + value, 0);
+    for (let i = 0; i < points.length - (closed ? 0 : 1); i++) {
+      const a = points[i], b = points[(i + 1) % points.length], length = a.distanceTo(b);
+      if (!dash.length) {
+        segment(a, b, !closed && i === 0, !closed && i === points.length - 2);
+        if (closed || i > 0) {
+          if (options.lineJoin === 'round') disk(a, radius, stroke);
+          else {
+            const previous = a.subtract(points[(i + points.length - 1) % points.length]);
+            const previousLength = Math.hypot(previous.x, previous.y);
+            if (previousLength && length) {
+              const incoming = previous.divideBy(previousLength);
+              const outgoing = b.subtract(a).divideBy(length);
+              const side = incoming.x * outgoing.y - incoming.y * outgoing.x > 0 ? -1 : 1;
+              const n1 = new L.Point(-incoming.y * side, incoming.x * side);
+              const n2 = new L.Point(-outgoing.y * side, outgoing.x * side);
+              const from = a.add(n1.multiplyBy(radius)), to = a.add(n2.multiplyBy(radius));
+              const denominator = 1 + n1.x * n2.x + n1.y * n2.y;
+              const miter = denominator > 0 ? n1.add(n2).multiplyBy(radius / denominator) : null;
+              triangle(stroke, from, a, to);
+              if (options.lineJoin === 'miter' && miter && Math.hypot(miter.x, miter.y) <= radius * 4) {
+                triangle(stroke, from, a.add(miter), to);
+              }
+            }
+          }
+        }
+      } else {
+        let offset = 0;
+        while (offset < length) {
+          let phase = ((distance + offset) % period + period) % period, index = 0;
+          while (phase >= dash[index]) phase -= dash[index++];
+          const end = Math.min(length, offset + dash[index] - phase);
+          if (index % 2 === 0) {
+            const delta = b.subtract(a).divideBy(length);
+            segment(a.add(delta.multiplyBy(offset)), a.add(delta.multiplyBy(end)), true, true);
+          }
+          offset = end;
+        }
+      }
+      distance += length;
+    }
+  };
+  if (source instanceof L.CircleMarker) {
+    const center = map.project(source.getLatLng());
+    let radius = source.getRadius(), radiusY = radius;
+    if (source instanceof L.Circle) {
+      source._project();
+      const projected = source._point.add(map.getPixelOrigin());
+      center.x = projected.x;
+      center.y = projected.y;
+      radius = source._radius;
+      radiusY = source._radiusY || radius;
+    }
+    if (options.fill) disk(center, radius, fill, radiusY);
+    const count = Math.max(12, Math.min(128, Math.ceil(Math.PI * Math.sqrt(Math.max(radius, radiusY)))));
+    const at = (index, offset = 0) => {
+      const angle = index * Math.PI * 2 / count;
+      return new L.Point(center.x + Math.max(0, radius + offset) * Math.cos(angle),
+        center.y + Math.max(0, radiusY + offset) * Math.sin(angle));
+    };
+    if (dash.length) line(Array.from({ length: count }, (_, index) => at(index)), true);
+    else if (options.stroke && width > 0) {
+      for (let i = 0; i < count; i++) {
+        triangle(stroke, at(i, width / 2), at(i, -width / 2), at(i + 1, width / 2));
+        triangle(stroke, at(i + 1, width / 2), at(i, -width / 2), at(i + 1, -width / 2));
+      }
+    }
+  } else {
+    const closed = source instanceof L.Polygon;
+    const polygon = rings => {
+      const projected = rings.map(ring => ring.map(latlng => map.project(latlng)));
+      if (closed && options.fill && projected[0]?.length >= 3) {
+        const valid = projected.filter(ring => ring.length >= 3);
+        const vertices = valid.flat();
+        for (const indices of triangulate(valid[0], valid.slice(1))) {
+          triangle(fill, vertices[indices[0]], vertices[indices[1]], vertices[indices[2]]);
+        }
+      }
+      for (const ring of projected) line(ring, closed);
+    };
+    const visit = coordinates => {
+      if (!coordinates.length) return;
+      if (coordinates[0] instanceof L.LatLng) polygon([coordinates]);
+      else if (closed && coordinates[0][0] instanceof L.LatLng) polygon(coordinates);
+      else for (const child of coordinates) visit(child);
+    };
+    visit(source.getLatLngs());
+  }
+  return { fill, stroke };
+}

package/src/utils/nativeLayer.js

@@ -0,0 +1,317 @@
+import { createMesh } from './createMesh.js';
+import { destroyTexture } from './destroyTexture.js';
+import { disposeMesh } from './disposeMesh.js';
+import { nativeGeometry } from './nativeGeometry.js';
+import { nativeEvents } from './nativeEvents.js';
+import { parseColor } from './parseColor.js';
+import { update } from './update.js';
+
+/** 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' } });
+  const meshes = state.meshes = new Map(), textures = new Map(), methods = new Map();
+  const images = new Set();
+  map._nativeGPUOrder ||= 0;
+  map._nativeGPUBack ||= 0;
+  let dirty = true, viewDirty = true, failed = false, order = ++map._nativeGPUOrder, rasterProgram;
+  const marker = source instanceof L.Marker;
+  const paneOrder = Number(getComputedStyle(source.getPane()).zIndex) || 0;
+  const current = () => source._nativeGPU === state && map.hasLayer(source);
+  const refresh = () => {
+    dirty = true;
+    viewDirty = true;
+    failed = false;
+    state.hide();
+    const activeImages = [source._icon, source._shadow, source._image];
+    for (const image of images) {
+      if (activeImages.includes(image)) continue;
+      image.removeEventListener('load', refresh);
+      image.removeEventListener('error', imageError);
+      images.delete(image);
+    }
+    for (const image of activeImages) {
+      if (!(image instanceof HTMLImageElement) || images.has(image)) continue;
+      images.add(image);
+      image.addEventListener('load', refresh);
+      image.addEventListener('error', imageError);
+    }
+    if (backend._shared) update(backend);
+  };
+  const imageError = () => source.fire('error', { error: new Error('Unable to load native layer image') });
+  state.refresh = refresh;
+  state.reorder = front => {
+    order = front ? ++map._nativeGPUOrder : --map._nativeGPUBack;
+    refresh();
+  };
+  const view = () => {
+    viewDirty = true;
+    if (backend._shared) update(backend);
+  };
+  const events = 'load tileload tileunload move drag';
+  source.on(events, refresh);
+  // Panning and camera changes never retriangulate paths or re-upload tile geometry.
+  map.on('zoomend', refresh);
+  if (marker) map.on('move zoom rotate pitch resize viewreset', view);
+  const removeEvents = nativeEvents(state);
+  for (const name of ['setLatLng', 'setLatLngs', 'addLatLng', 'setRadius', 'setStyle', 'redraw',
+    'setIcon', 'setUrl', 'setBounds', 'setOpacity', 'setZIndex', 'setZIndexOffset', 'bringToFront', 'bringToBack']) {
+    if (typeof source[name] !== 'function') continue;
+    const own = Object.getOwnPropertyDescriptor(source, name), original = source[name];
+    methods.set(name, own);
+    source[name] = function (...args) {
+      const result = original.apply(this, args);
+      if ((name === 'bringToFront' || name === 'bringToBack') && this instanceof L.GridLayer) {
+        const indices = Object.values(map._layers).filter(layer => layer !== this &&
+          layer instanceof L.GridLayer && layer.getPane() === this.getPane()).map(layer => layer.options.zIndex || 0);
+        const edge = name === 'bringToFront' ? Math.max(...indices) + 1 : Math.min(...indices) - 1;
+        if (Number.isFinite(edge)) this.setZIndex(edge);
+      }
+      if (name === 'bringToFront') order = ++map._nativeGPUOrder;
+      if (name === 'bringToBack') order = --map._nativeGPUBack;
+      refresh();
+      return result;
+    };
+  }
+  state.dispose = () => {
+    source.off(events, refresh);
+    map.off('zoomend', refresh);
+    if (marker) map.off('move zoom rotate pitch resize viewreset', view);
+    removeEvents();
+    state.refresh = state.reorder = null;
+    for (const [name, descriptor] of methods) {
+      if (descriptor) Object.defineProperty(source, name, descriptor);
+      else delete source[name];
+    }
+    for (const mesh of meshes.values()) disposeMesh(backend, mesh);
+    meshes.clear();
+    for (const texture of textures.values()) destroyTexture(backend, texture.texture);
+    textures.clear();
+    for (const image of images) {
+      image.removeEventListener('load', refresh);
+      image.removeEventListener('error', imageError);
+    }
+    backend._beforeRender = null;
+    backend.remove();
+  };
+  const ready = new Promise((resolve, reject) => {
+    backend.once('ready', resolve);
+    backend.once('error', ({ error }) => reject(error));
+  });
+  backend.on('error', ({ error }) => source.fire('error', { error }));
+  refresh();
+  backend.addTo(map);
+  await ready.catch(error => {
+    state.dispose();
+    throw error;
+  });
+  if (!current()) return source;
+
+  const local = latlng => {
+    const crs = map.options.crs, origin = crs.project(backend.location), p = crs.project(latlng);
+    const metres = Math.cos(backend.location.lat * Math.PI / 180);
+    return [(p.x - origin.x) * metres, 0, -(p.y - origin.y) * metres];
+  };
+  const pixel = p => local(map.unproject(p));
+  const styleMesh = (mesh, color, opacity) => {
+    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;
+  };
+  const put = (key, position, color, opacity, texture, uv) => {
+    if (!position.length) return;
+    let mesh = meshes.get(key);
+    const data = {
+      position, normal: position.map((_, index) => index % 3 === 1 ? 1 : 0),
+      ...(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 ? rasterProgram : undefined);
+      if (source instanceof L.GridLayer) {
+        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;
+    }
+    styleMesh(mesh, color, opacity);
+    return mesh;
+  };
+  const textureFor = (key, image) => {
+    if (!(image instanceof HTMLImageElement) && !(image instanceof HTMLCanvasElement)) {
+      throw new Error('WebGPU native raster layers require image or canvas tiles');
+    }
+    let texture = textures.get(key);
+    const url = image.currentSrc || image.src;
+    if (!texture || texture.image !== image || texture.url !== url) {
+      if (texture) {
+        const mesh = meshes.get(key);
+        if (mesh) disposeMesh(backend, mesh);
+        meshes.delete(key);
+        destroyTexture(backend, texture.texture);
+        textures.delete(key);
+      }
+      const width = image.naturalWidth || image.width, height = image.naturalHeight || image.height;
+      if (!width || !height) return;
+      const { device } = backend.renderer;
+      texture = {
+        device, image, url, format: 'rgba8unorm', uploaded: null,
+        texture: device.createTexture({
+          size: [width, height], format: 'rgba8unorm',
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+        }),
+        sampler: device.createSampler({ minFilter: 'linear', magFilter: 'linear' }),
+      };
+      textures.set(key, texture);
+      if (image instanceof HTMLCanvasElement) {
+        texture.pending = true;
+        // Snapshot asynchronously: copying a GPU-backed 2D canvas directly forces a blocking readback in Chromium.
+        createImageBitmap(image).then(bitmap => {
+          try {
+            if (!current() || textures.get(key) !== texture) return;
+            device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: texture.texture }, [width, height]);
+            texture.uploaded = image;
+            texture.pending = false;
+            refresh();
+          } finally {
+            bitmap.close();
+          }
+        }).catch(error => {
+          failed = true;
+          source.fire('error', { error });
+        });
+      } else {
+        // CORS/security failures reject ready or emit error on the owning native layer.
+        try {
+          device.queue.copyExternalImageToTexture({ source: image }, { texture: texture.texture }, [width, height]);
+        } catch (error) {
+          texture.texture.destroy();
+          textures.delete(key);
+          throw error;
+        }
+        texture.uploaded = image;
+      }
+    }
+    texture.used = true;
+    return texture.uploaded === image ? texture : undefined;
+  };
+  const quad = (key, image, corners, opacity) => {
+    const texture = textureFor(key, image);
+    if (!texture) return;
+    const indices = [0, 2, 1, 1, 2, 3];
+    return put(key, indices.flatMap(i => corners[i]), [1, 1, 1], opacity, texture,
+      indices.flatMap(i => [[0, 0], [1, 0], [0, 1], [1, 1]][i]));
+  };
+  const boundsQuad = bounds => [
+    bounds.getNorthWest(), bounds.getNorthEast(), bounds.getSouthWest(), bounds.getSouthEast(),
+  ].map(local);
+  const synchronize = () => {
+    if (!current() || !backend.renderer || failed) return;
+    if (!dirty && (!marker || !viewDirty)) return;
+    dirty = false;
+    viewDirty = false;
+    for (const mesh of meshes.values()) mesh._nativeUsed = false;
+    for (const texture of textures.values()) texture.used = false;
+    if (source instanceof L.GridLayer) {
+      for (const [key, tile] of Object.entries(source._tiles || {})) {
+        if (!tile.loaded || tile.el instanceof HTMLImageElement && !tile.el.naturalWidth) continue;
+        const opacity = (source.options.opacity ?? 1) * (tile._gpuOpacity ?? 1);
+        const retained = textures.get(key);
+        let mesh = meshes.get(key);
+        if (mesh && retained?.image === tile.el && retained.url === (tile.el.currentSrc || tile.el.src)) {
+          retained.used = true;
+          styleMesh(mesh, [1, 1, 1], opacity);
+        } else {
+          const [nw, se] = source._tileCoordsToNwSe(tile.coords);
+          mesh = quad(key, tile.el, boundsQuad(new L.LatLngBounds(nw, se)), opacity);
+        }
+        if (mesh) mesh.renderOrder += tile.coords.z / 100;
+      }
+    } else if (source instanceof L.ImageOverlay) {
+      if (source._image?.complete && source._image.naturalWidth) {
+        quad('image', source._image, boundsQuad(source.getBounds()), source.options.opacity ?? 1);
+      }
+    } else if (marker) {
+      for (const [key, image] of [['shadow', source._shadow], ['icon', source._icon]]) {
+        if (!(image instanceof HTMLImageElement) || !image.complete || !image.naturalWidth) continue;
+        const world = new DOMPoint(...local(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 corners = [[left, top], [left + width, top],
+          [left, top + height], [left + width, top + height]].map(([x, y]) => {
+          const offset = source._cameraIconPoint(x - center.x, y - center.y);
+          x = center.x + offset.x; y = center.y + offset.y;
+          const p = new DOMPoint(x / size.x * 2 - 1,
+            1 - y / size.y * 2, clip.z / clip.w, 1).matrixTransform(inverse);
+          const result = new DOMPoint(p.x / p.w, p.y / p.w, p.z / p.w, 1).matrixTransform(toLocal);
+          return [result.x, result.y, result.z];
+        });
+        const mesh = quad(key, image, corners, source.options.opacity ?? 1);
+        if (key === 'shadow' && mesh) mesh.renderOrder -= 100 * 1e6;
+      }
+    } else {
+      const { fill, stroke } = nativeGeometry(source, map, pixel);
+      for (const [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;
+        const { r, g, b } = parseColor(color);
+        put(key, positions, [r, g, b], opacity ?? 1);
+      }
+    }
+    for (const [key, mesh] of meshes) {
+      if (mesh._nativeUsed) continue;
+      disposeMesh(backend, mesh);
+      meshes.delete(key);
+      const texture = textures.get(key);
+      if (texture) destroyTexture(backend, texture.texture);
+      textures.delete(key);
+    }
+    for (const [key, texture] of textures) {
+      if (texture.used) continue;
+      destroyTexture(backend, texture.texture);
+      textures.delete(key);
+    }
+  };
+  backend._beforeRender = () => {
+    try {
+      synchronize();
+    } catch (error) {
+      failed = true;
+      source.fire('error', { error });
+    }
+  };
+  // ponytail: tessellate pixel-width strokes on zoomend; use shader extrusion for continuous zoom at scale.
+  try {
+    synchronize();
+  } catch (error) {
+    state.dispose();
+    throw error;
+  }
+  update(backend);
+  return source;
+}

package/src/utils/nodeMatrix.js

@@ -0,0 +1,22 @@
+/** glTF quaternion/translation/scale to a column-major matrix. */
+
+export function nodeMatrix(spec) {
+  if (spec.matrix) return Array.from(spec.matrix);
+  // glTF stores quaternions [x,y,z,w]; convert directly to a scaled column-major matrix.
+  const [x, y, z, w] = spec.rotation || [0, 0, 0, 1], [sx, sy, sz] = spec.scale || [1, 1, 1];
+  return [
+    (1 - 2 * (y * y + z * z)) * sx,
+    2 * (x * y + z * w) * sx,
+    2 * (x * z - y * w) * sx,
+    0,
+    2 * (x * y - z * w) * sy,
+    (1 - 2 * (x * x + z * z)) * sy,
+    2 * (y * z + x * w) * sy, 0,
+    2 * (x * z + y * w) * sz,
+    2 * (y * z - x * w) * sz,
+    (1 - 2 * (x * x + y * y)) * sz,
+    0,
+    ...(spec.translation || [0, 0, 0]),
+    1,
+  ];
+}

package/src/utils/onAdd3DLayer.js

@@ -0,0 +1,31 @@
+import * as attach from './attach.js';
+import * as onClick from './onClick.js';
+import * as onPointerLeave from './onPointerLeave.js';
+import * as onPointerMove from './onPointerMove.js';
+
+/** Attach interaction immediately; initialization may finish before or after onAdd. */
+export function onAdd3DLayer(backend, map) {
+  if (!backend.location) {
+    const center = map.getCenter();
+    backend.location = new L.LatLng(center.lat, center.lng);
+  }
+  if (backend.url || backend._geojson || backend.options.tooltip || backend.modelUrl) {
+    backend.container = map.getContainer();
+    backend._pointerEvents ||= {
+      mousemove: event => onPointerMove.onPointerMove(backend, event),
+      click: event => onClick.onClick(backend, event),
+      mouseleave: () => onPointerLeave.onPointerLeave(backend),
+    };
+    if (backend.options.tooltip) {
+      backend._tooltip = L.DomUtil.create('div', 'leaflet-3d-tooltip', backend.container);
+      backend._tooltip.hidden = true;
+      backend._tooltip.setAttribute('role', 'tooltip');
+      backend._tooltip.setAttribute('aria-live', 'polite');
+      backend._tooltip.style.cssText = 'position:absolute;z-index:600;max-width:220px;padding:10px 12px;border:1px solid #6b5140;border-radius:6px;background:#fffaf0;box-shadow:0 3px 12px #0005;color:#30251d;font:13px/1.45 sans-serif;pointer-events:none';
+    }
+    L.DomEvent.on(backend.container, backend._pointerEvents);
+  }
+  if (backend.root) {
+    attach.attach(backend, map).then(() => backend._added.resolve(), error => backend.fire('error', { error }));
+  }
+}

package/src/utils/onAddSun.js

@@ -0,0 +1,147 @@
+import { underEntry } from './underEntry.js';
+import { update as updateScene } from "./update.js";
+import { atmosphere } from './atmosphere.js';
+import { moonPosition } from './moonPosition.js';
+import { projectCelestialBody } from './projectCelestialBody.js';
+import { solarPosition } from './solarPosition.js';
+
+export function onAddSun(layer, map) {
+  if (!layer.control) {
+    const control = new L.Control({ position: 'bottomright' });
+    control.live = true;
+    let date, slider, output, status, timer;
+    const originalSky = map.getContainer().style.getPropertyValue('--leaflet-sky-background');
+    const disc = 'position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;';
+    const sunDisc = L.DomUtil.create('div', 'sunlight-sun');
+    const moonDisc = L.DomUtil.create('div', 'sunlight-moon');
+    sunDisc.style.cssText = disc + 'background:#fff3bd;box-shadow:0 0 18px 7px #ffd27699;';
+    moonDisc.style.cssText = disc + 'background:#dce5f2;box-shadow:0 0 10px 2px #cbdcff55;';
+    sunDisc.setAttribute('role', 'img'); sunDisc.setAttribute('aria-label', 'Sun');
+    moonDisc.setAttribute('role', 'img'); moonDisc.setAttribute('aria-label', 'Moon');
+    const updateSky = () => {
+      const sun = map._sunlight, sky = map._pitchSky;
+      if (sun) map.getContainer().style.setProperty('--leaflet-sky-background', sun.background);
+      else if (originalSky) map.getContainer().style.setProperty('--leaflet-sky-background', originalSky);
+      else map.getContainer().style.removeProperty('--leaflet-sky-background');
+      const size = map.getSize(), pitch = map.getPitch() * Math.PI / 180, bearing = map.getBearing() * Math.PI / 180;
+      for (const [disc, body] of [[sunDisc, sun], [moonDisc, sun?.moon]]) {
+        disc.hidden = true;
+        if (!sky || !body || body.altitude <= 0 || !sun) continue;
+        if (disc.parentNode !== sky) sky.append(disc);
+        const point = projectCelestialBody(body.direction, size, pitch, bearing);
+        if (!point) continue;
+        const { left, top } = point;
+        disc.hidden = left < 0 || left > size.x || top < 0 || top > sky.clientHeight || sky.style.display === 'none';
+        disc.style.left = `${left}px`; disc.style.top = `${top}px`;
+      }
+    };
+    const render = () => {
+      const renderer = L.Layer._renderers.get(map);
+      if (renderer) updateScene(renderer);
+    };
+    const update = () => {
+      try {
+        if (control.live) control.time = new Date();
+        const time = control.time.toISOString();
+        date.value = time.slice(0, 10);
+        slider.value = String(control.time.getUTCHours() * 60 + control.time.getUTCMinutes());
+        output.textContent = `${time.slice(11, 16)} UTC${control.live ? ' · now' : ''}`;
+        const center = map.getCenter();
+        const sun = map._sunlight = solarPosition(control.time, center.lat, center.lng);
+        Object.assign(sun, atmosphere(sun.altitude));
+        sun.moon = moonPosition(control.time, center.lat, center.lng);
+        status.textContent = sun.altitude <= 0
+          ? 'Night · no direct sunlight'
+          : sun.altitude < 3
+            ? 'Low sun · shadows paused'
+            : `Sun altitude ${sun.altitude.toFixed(1)}°`;
+        map.fire('simulationtimechange', { time: new Date(control.time), live: control.live });
+        updateSky();
+        render();
+      } catch (error) {
+        delete map._sunlight;
+        updateSky();
+        render();
+        status.textContent = `Error: ${error.message}`;
+        console.error('Solar simulation', error);
+      }
+    };
+    control.onAdd = () => {
+      const container = L.DomUtil.create('div', 'sunlight-control');
+      container.style.cssText = 'color:#222;width:min(200px,calc(100vw - 60px));font:12px/1.4 sans-serif;';
+      date = document.createElement('input');
+      date.type = 'date';
+      date.style.cssText = 'width:100%;box-sizing:border-box;';
+      date.setAttribute('aria-label', 'Solar date (UTC)');
+      slider = document.createElement('input');
+      slider.type = 'range';
+      slider.style.cssText = 'width:100%;box-sizing:border-box;margin:10px 0 4px;cursor:pointer;';
+      slider.min = '0'; slider.max = '1439'; slider.step = '1';
+      slider.setAttribute('aria-label', 'Time of day (UTC)');
+      output = document.createElement('output');
+      output.style.cssText = 'font-weight:bold;font-variant-numeric:tabular-nums;';
+      output.setAttribute('aria-live', 'off');
+      const now = document.createElement('button');
+      now.type = 'button'; now.textContent = 'Now';
+      now.onclick = () => { control.live = true; update(); };
+      const timeRow = document.createElement('div');
+      timeRow.className = 'sunlight-time';
+      timeRow.style.cssText = 'display:flex;justify-content:space-between;align-items:center;';
+      timeRow.append(output, now);
+      status = document.createElement('div');
+      status.className = 'sunlight-status';
+      status.style.marginTop = '5px';
+      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);
+      date.onchange = slider.oninput = () => {
+        control.live = false;
+        if (!date.value || !date.validity.valid) {
+          control.time = new Date(NaN);
+          map.fire('simulationtimechange', { time: null, live: false });
+          delete map._sunlight;
+          updateSky();
+          render();
+          status.textContent = 'Error: choose a valid solar date';
+          return;
+        }
+        control.time = new Date(`${date.value}T00:00:00Z`);
+        control.time.setUTCMinutes(Number(slider.value));
+        update();
+      };
+      L.DomEvent.disableClickPropagation(container);
+      L.DomEvent.disableScrollPropagation(container);
+      update();
+      timer = setInterval(() => { if (control.live) update(); }, 60000);
+      map.on('moveend', update);
+      map.on('move rotate pitch resize', updateSky);
+      return container;
+    };
+    control.onRemove = () => {
+      clearInterval(timer);
+      map.fire('simulationtimechange', { time: null, live: false });
+      map.off('moveend', update);
+      map.off('move rotate pitch resize', updateSky);
+      delete map._sunlight;
+      updateSky();
+      sunDisc.remove(); moonDisc.remove();
+      render();
+    };
+    layer.control = control;
+  }
+  if (!layer.control._map) {
+    layer.control.addTo(map);
+  }
+  // Shown under this layer's entry in the layers control; a standalone control without one.
+  const container = layer.control.getContainer(), nested = underEntry(layer, container);
+  container.classList.toggle('leaflet-control', !nested);
+  container.classList.toggle('leaflet-bar', !nested);
+  Object.assign(
+    container.style,
+    nested
+      ? { background: '', padding: '2px 0 6px 20px', margin: '0' }
+      : { background: '#fff', padding: '8px', margin: '' }
+  );
+}

package/src/utils/onClick.js

@@ -0,0 +1,13 @@
+import { findFeature } from './findFeature.js';
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+
+/** Emit click without moving the map or pinning the tooltip. */
+
+export function onClick(layer, event) {
+  const feature = findFeature(layer, event);
+  layer.hoveredFeature = feature;
+  setHighlight(layer, feature);
+  showFeature(layer, feature, event);
+  layer.fire('featureclick', { feature, originalEvent: event });
+}