leaflet-city-mapper 0.0.2 → 0.0.3

package/src/sources/buildAreaFeature.js

@@ -0,0 +1,41 @@
+import { buildAreaPoint } from './buildAreaPoint.js';
+import { buildAreaPolygon } from './buildAreaPolygon.js';
+import { parseColor } from '../utils/parseColor.js';
+
+export function buildAreaFeature(context, feature) {
+  const { backend, area, map } = context;
+  const coords = area.coords;
+  const geometry = feature?.geometry;
+  const isTree = geometry?.type === 'Point';
+  if (backend.options.nightLight && !isTree) throw new Error('Night lights require Point geometry');
+  const polygons = geometry?.type === 'Polygon' ? [geometry.coordinates] :
+    geometry?.type === 'MultiPolygon' ? geometry.coordinates : null;
+  if (!polygons && !isTree) throw new Error('Unsupported GeoJSON geometry');
+  const [lon, lat] = (isTree ? geometry.coordinates : polygons[0]?.[0]?.[0]) ?? [];
+  if (!Number.isFinite(lon) || !Number.isFinite(lat)) throw new Error('Invalid GeoJSON coordinates');
+  if (coords) {
+    const anchor = map.project(new L.LatLng(lat, lon), coords.z);
+    if (Math.floor(anchor.x / 256) !== coords.x || Math.floor(anchor.y / 256) !== coords.y) return;
+  }
+  const style = backend.options.style(feature);
+  if (style === null) {
+    context.skipped++;
+    return;
+  }
+  if (!style || typeof style !== 'object') throw new Error('style must return an extrusion style or null');
+  const { top, bottom = 0, color = 0xd9b38c } = style;
+  if (!Number.isFinite(top) || !Number.isFinite(bottom) || bottom < 0 || top <= bottom) {
+    throw new Error('Invalid extrusion heights: expected top > bottom >= 0');
+  }
+  const baseColor = parseColor(color);
+  const vertexStart = context.positions.length / 3;
+  if (isTree) buildAreaPoint(context, feature, lon, lat, style, baseColor);
+  let rings;
+  for (rings of polygons || []) buildAreaPolygon(context, rings, top, bottom, baseColor);
+  const vertexEnd = context.positions.length / 3;
+  context.featureFaces.push({
+    id: feature.id ?? feature.properties?.objectid ?? JSON.stringify(geometry),
+    properties: feature.properties, baseColor,
+    faceStart: vertexStart / 3, faceEnd: vertexEnd / 3, vertexStart, vertexEnd,
+  });
+}

package/src/sources/buildAreaPoint.js

@@ -0,0 +1,25 @@
+import { projectedTree } from './projectedTree.js';
+import { generateTreeGeometry } from './generateTreeGeometry.js';
+import { lampPostGeometry } from '../geometry/lampPostGeometry.js';
+import { lightGeometry } from '../geometry/lightGeometry.js';
+import { treeGeometry } from '../geometry/treeGeometry.js';
+
+export function buildAreaPoint(context, feature, lon, lat, style, baseColor) {
+  const { backend } = context;
+  const { top } = style;
+  const projected = projectedTree(context, lon, lat);
+  if (backend.options.nightLight) {
+    if (!Number.isFinite(style.lightFlux) || style.lightFlux <= 0) throw new Error('Invalid light flux');
+    const support = feature.properties?.cod_ouvrag || `${lon},${lat}`;
+    if (style.poleRadius > 0 && !context.supports.has(support)) {
+      generateTreeGeometry(context, lampPostGeometry, projected, style);
+      context.supports.add(support);
+    }
+    generateTreeGeometry(context, lightGeometry, projected, style);
+    context.lights.push({
+      position: [projected.x, projected.ground + top, -projected.y],
+      radius: Math.hypot(top, style.lightRadius), color: [baseColor.r, baseColor.g, baseColor.b],
+      flux: style.lightFlux,
+    });
+  } else generateTreeGeometry(context, treeGeometry, projected, style);
+}

package/src/sources/buildAreaPolygon.js

@@ -0,0 +1,29 @@
+import { projectRing } from './projectRing.js';
+import { triangulate } from '../triangulation/triangulate.js';
+import { addTriangle } from './addTriangle.js';
+import { isClockWise } from '../triangulation/isClockWise.js';
+
+export function buildAreaPolygon(context, rings, top, bottom, baseColor) {
+  if (!rings.length) throw new Error('Empty GeoJSON polygon');
+  const paths = [];
+  let ring, path, point, a, b, c, index, sign, i, length, nx, nz;
+  for (ring of rings) paths.push(projectRing(context, ring));
+  const points = [];
+  for (path of paths) for (point of path) points.push(point);
+  for ([a, b, c] of triangulate(paths[0], paths.slice(1))) {
+    addTriangle(context, points[a], top, points[b], top, points[c], top, 0, 1, 0, baseColor);
+    if (bottom > 0) addTriangle(context, points[a], bottom, points[b], bottom, points[c], bottom, 0, -1, 0, baseColor);
+  }
+  for (index = 0; index < paths.length; index++) {
+    path = paths[index];
+    sign = isClockWise(path) === (index === 0) ? -1 : 1;
+    for (i = 0; i < path.length; i++) {
+      a = path[i], b = path[(i + 1) % path.length];
+      length = Math.hypot(b.x - a.x, b.y - a.y);
+      if (!length) continue;
+      nx = sign * (b.y - a.y) / length, nz = sign * (b.x - a.x) / length;
+      addTriangle(context, a, bottom, b, bottom, b, top, nx, 0, nz, baseColor);
+      addTriangle(context, a, bottom, b, top, a, top, nx, 0, nz, baseColor);
+    }
+  }
+}

package/src/sources/compareAreaDistance.js

@@ -0,0 +1,4 @@
+export function compareAreaDistance(a, b) {
+  return Math.hypot(a[1].x - a[2].x, a[1].y - a[2].y) -
+    Math.hypot(b[1].x - b[2].x, b[1].y - b[2].y);
+}

package/src/sources/generateTreeGeometry.js

@@ -0,0 +1,11 @@
+import { pumpState } from '../constants/pumpState.js';
+import { addGeneratedTriangle } from './addGeneratedTriangle.js';
+
+export function generateTreeGeometry(context, generator, point, style) {
+  pumpState.triangleContexts.push(context);
+  try {
+    generator(point, style, addGeneratedTriangle);
+  } finally {
+    pumpState.triangleContexts.pop();
+  }
+}

package/src/sources/groundOffset.js

@@ -0,0 +1,3 @@
+export function groundOffset(point) {
+  return point.ground || 0;
+}

package/src/sources/initializeGeoJSON.js

@@ -0,0 +1,8 @@
+import { setGeoJSONLayerData } from './setGeoJSONLayerData.js';
+import { init3D } from '../scene/init3D.js';
+
+export function initializeGeoJSON(layer, options) {
+  layer._geojson = true;
+  layer.setData = setGeoJSONLayerData;
+  init3D(layer, options);
+}

package/src/sources/instanceAreaGeometry.js

@@ -0,0 +1,29 @@
+/** Compact repeated features only when reconstructed float32 positions compare equal. */
+export function instanceAreaGeometry(context) {
+  const { positions, normals, colors, featureFaces } = context;
+  if (context.backend.options.nightLight || featureFaces.length < 2) return context;
+  const vertices = featureFaces[0].vertexEnd;
+  const length = vertices * 3;
+  if (!vertices || positions.length !== length * featureFaces.length) return context;
+  const origin = [Math.trunc(positions[0]), Math.trunc(positions[1]), Math.trunc(positions[2])];
+  const template = new Float32Array(length);
+  let i, instance, axis, face, start;
+  for (i = 0; i < length; i++) template[i] = positions[i] - origin[i % 3];
+  const offsets = new Float32Array(featureFaces.length * 4);
+  for (instance = 0; instance < featureFaces.length; instance++) {
+    face = featureFaces[instance];
+    start = instance * length;
+    if (face.vertexStart !== instance * vertices || face.vertexEnd !== (instance + 1) * vertices) return context;
+    for (axis = 0; axis < 3; axis++) offsets[instance * 4 + axis] = origin[axis] + positions[start + axis] - positions[axis];
+    offsets[instance * 4 + 3] = instance * vertices;
+    for (i = 0; i < length; i++) {
+      if (Math.fround(template[i] + offsets[instance * 4 + i % 3]) !== Math.fround(positions[start + i]) ||
+          Math.fround(normals[i]) !== Math.fround(normals[start + i]) ||
+          Math.fround(colors[i]) !== Math.fround(colors[start + i])) return context;
+    }
+  }
+  return {
+    positions: template, normals: normals.slice(0, length), colors: colors.slice(0, length),
+    instanceOffsets: offsets,
+  };
+}

package/src/sources/projectRing.js

@@ -0,0 +1,20 @@
+import { getElevation } from '../terrain/getElevation.js';
+
+export function projectRing(context, ring) {
+  const { backend, crs, origin, metres, map } = context;
+  if (ring.length < 4) throw new Error('Invalid GeoJSON polygon ring');
+  const path = [];
+  let lng, lat, point, elevation;
+  for ([lng, lat] of ring.slice(0, -1)) {
+    if (!Number.isFinite(lng) || !Number.isFinite(lat)) throw new Error('Invalid GeoJSON coordinates');
+    point = crs.project(new L.LatLng(lat, lng));
+    elevation = map._terrain3D ? getElevation(map._terrain3D, [lat, lng]) : undefined;
+    path.push({
+      x: (point.x - origin.x) * metres,
+      y: (point.y - origin.y) * metres,
+      ground: Number.isFinite(elevation) && Number.isFinite(backend.root.position[1])
+        ? elevation - backend.root.position[1] : 0,
+    });
+  }
+  return path;
+}

package/src/sources/projectedTree.js

@@ -0,0 +1,13 @@
+import { getElevation } from '../terrain/getElevation.js';
+
+export function projectedTree(context, lon, lat) {
+  const { backend, crs, origin, metres, map } = context;
+  const point = crs.project(new L.LatLng(lat, lon));
+  const elevation = map._terrain3D ? getElevation(map._terrain3D, [lat, lon]) : undefined;
+  return {
+    x: (point.x - origin.x) * metres,
+    y: (point.y - origin.y) * metres,
+    ground: Number.isFinite(elevation) && Number.isFinite(backend.root.position[1])
+      ? elevation - backend.root.position[1] : 0,
+  };
+}

package/src/sources/pump.js

@@ -0,0 +1,54 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import { emptyNode } from "../scene/emptyNode.js";
+import { isClockWise } from "../triangulation/isClockWise.js";
+import { lampPostGeometry } from "../geometry/lampPostGeometry.js";
+import { lightGeometry } from "../geometry/lightGeometry.js";
+import { parseColor } from "../utils/parseColor.js";
+import { treeGeometry } from "../geometry/treeGeometry.js";
+import { triangulate } from "../triangulation/triangulate.js";
+import { createProgram } from '../rendering/createProgram.js';
+import { updateStatus } from './updateStatus.js';
+import { loadSource } from '../archives/loadSource.js';
+import { setParent } from '../scene/setParent.js';
+import { update } from '../scene/update.js';
+import { getElevation } from "../terrain/getElevation.js";
+import { pumpState } from '../constants/pumpState.js';
+import { compareDistance } from '../utils/compareDistance.js';
+import { buildArea } from './buildArea.js';
+
+pumpState.triangleContexts = [];
+
+/** Share four load/build slots across source layers, nearest ground blocks first. */
+export function pump(backend, map = backend._map) {
+  const shared = map && cityMapper.renderers.get(map);
+  if (!shared) return;
+  const layers = [];
+  let layer, area, center, areaBackend;
+  for (layer of shared._layers) {
+    if (Number.isFinite(layer._inflight) && layer._areas && (layer.url || layer._geojson)) layers.push(layer);
+  }
+  const pending = [];
+  for (layer of layers) {
+    for (area of layer._areas.values()) {
+      if (area.started || area.request.signal.aborted) continue;
+      center = area.coords && map.project(map.getCenter(), area.coords.z).divideBy(256);
+      pending.push({
+        layer, area,
+        distance: center
+          ? Math.hypot(area.coords.x + 0.5 - center.x, area.coords.y + 0.5 - center.y) / 2 ** area.coords.z : 0,
+      });
+    }
+  }
+  pending.sort(compareDistance);
+  let inflight = 0;
+  for (layer of layers) inflight += layer._inflight;
+  for ({ layer: areaBackend, area } of pending) {
+    if (inflight >= 4) break;
+    if (areaBackend._inflight >= 2) continue;
+    area.started = true;
+    areaBackend._inflight++;
+    inflight++;
+    buildArea(areaBackend, area, map);
+  }
+  for (layer of layers) updateStatus(layer);
+}

package/src/sources/releaseArea.js

@@ -0,0 +1,22 @@
+import { setHighlight } from '../picking/setHighlight.js';
+import { showFeature } from '../picking/showFeature.js';
+import { setParent } from '../scene/setParent.js';
+import { update } from '../scene/update.js';
+
+/** Cancel pending work and dispose this block's GPU data, including any hover highlight. */
+export function releaseArea(backend, area) {
+  area.request.abort();
+  let attribute;
+  if (area.mesh) {
+    if (backend.highlightedFeature?.mesh === area.mesh) {
+      setHighlight(backend, null);
+      backend.hoveredFeature = null;
+      showFeature(backend, null);
+    }
+    setParent(area.mesh, null);
+    update(backend);
+    const geometry = area.mesh.geometry;
+    for (attribute of Object.values(geometry.attributes)) attribute.buffer.destroy();
+    area.mesh.program.pipelineCache.clear();
+  }
+}

package/src/sources/setGeoJSONData.js

@@ -0,0 +1,12 @@
+import { releaseArea } from './releaseArea.js';
+import { updateArea } from './updateArea.js';
+
+export function setGeoJSONData(layer, data) {
+  layer.options.data = data;
+  delete layer.options.url;
+  let area;
+  for (area of layer._areas.values()) releaseArea(layer, area);
+  layer._areas.clear();
+  updateArea(layer);
+  return layer;
+}

package/src/sources/setGeoJSONLayerData.js

@@ -0,0 +1,5 @@
+import { setGeoJSONData } from './setGeoJSONData.js';
+
+export function setGeoJSONLayerData(data) {
+  return setGeoJSONData(this, data);
+}

package/src/sources/sourceAreaContext.js

@@ -0,0 +1,9 @@
+export function sourceAreaContext(backend, area, map) {
+  const crs = map.options.crs, origin = crs.project(backend.location);
+  return {
+    backend, area, map, crs, origin,
+    metres: Math.cos(backend.location.lat * Math.PI / 180),
+    positions: [], normals: [], colors: [], uvs: [], featureFaces: [], lights: [],
+    supports: new Set(), skipped: 0,
+  };
+}

package/src/sources/updateArea.js

@@ -0,0 +1,45 @@
+import { pump } from "./pump.js";
+import { releaseArea } from './releaseArea.js';
+import { compareAreaDistance } from './compareAreaDistance.js';
+
+/** Cover the visible ground bounds and one bordering block, clipped to the archive. */
+
+export function updateArea(backend) {
+  if (!backend._map || !backend._shared) return;
+  if (backend._geojson) {
+    if (!backend._areas.has('geojson')) {
+      backend._areas.set('geojson', { request: new AbortController() });
+    }
+    pump(backend);
+    return;
+  }
+  if (!backend.header) return;
+  const z = backend.header.minZoom;
+  const center = backend._map.project(backend._map.getCenter(), z).divideBy(256).floor();
+  const bounds = backend._map.getBounds();
+  const nw = backend._map.project(bounds.getNorthWest(), z).divideBy(256).floor();
+  const se = backend._map.project(bounds.getSouthEast(), z).divideBy(256).floor();
+  const archiveNW = backend._map.project([backend.header.maxLat, backend.header.minLon], z).divideBy(256).floor();
+  const archiveSE = backend._map.project([backend.header.minLat, backend.header.maxLon], z).divideBy(256).floor();
+  const wanted = new Map();
+  let x, y, key, area, coords;
+  for (x = Math.max(0, nw.x - 1, archiveNW.x); x <= Math.min(2 ** z - 1, se.x + 1, archiveSE.x); x++) {
+    for (y = Math.max(0, nw.y - 1, archiveNW.y); y <= Math.min(2 ** z - 1, se.y + 1, archiveSE.y); y++) {
+      wanted.set(`${x}/${y}`, { z, x, y });
+    }
+  }
+  for ([key, area] of backend._areas) {
+    if (!wanted.has(key)) {
+      releaseArea(backend, area);
+      backend._areas.delete(key);
+    }
+  }
+  // Load the nearest new blocks first without rebuilding retained geometry.
+  const areas = [];
+  for ([key, coords] of wanted) areas.push([key, coords, center]);
+  areas.sort(compareAreaDistance);
+  for ([key, coords] of areas) {
+    if (!backend._areas.has(key)) backend._areas.set(key, { coords, request: new AbortController() });
+  }
+  pump(backend);
+}

package/src/sources/updateStatus.js

@@ -0,0 +1,12 @@
+/** Emit a snapshot for consumers; ready does not wait for all neighborhood tasks. */
+export function updateStatus(backend, enabled = true) {
+  const progress = { enabled, loaded: 0, skipped: 0, pending: 0, errors: [] };
+  let area;
+  for (area of backend._areas.values()) {
+    if (area.error) progress.errors.push(area.error);
+    else if (!area.done) progress.pending++;
+    progress.loaded += area.buildings ?? 0;
+    progress.skipped += area.skipped ?? 0;
+  }
+  backend.fire('progress', progress);
+}

package/src/sunlight/addTimeLayer.js

@@ -0,0 +1,3 @@
+export function addTimeLayer(map) {
+  return this.control.addTo(map);
+}

package/src/sunlight/addTo.js

@@ -0,0 +1,10 @@
+import { underEntry } from '../scene/underEntry.js';
+import { styleTimeControl } from './styleTimeControl.js';
+
+export function addTo(map) {
+  L.Control.prototype.addTo.call(this, map);
+  const container = this.getContainer();
+  if (this.layer._map === map) underEntry(this.layer, container, styleTimeControl.bind(null, container));
+  else styleTimeControl(container, false);
+  return this;
+}

package/src/sunlight/atmosphere.js

@@ -0,0 +1,28 @@
+
+import { mix } from './mix.js';
+import { rgb } from './rgb.js';
+
+export function atmosphere(altitude) {
+  if (!Number.isFinite(altitude)) {
+    throw new Error('Invalid solar altitude');
+  }
+  const stops = [
+    [-18, [3, 7, 20], [17, 28, 54], [0.025, 0.04, 0.09]],
+    [-6, [37, 53, 84], [182, 106, 86], [0.12, 0.10, 0.14]],
+    [0, [101, 131, 171], [246, 170, 115], [0.38, 0.24, 0.18]],
+    [10, [74, 147, 208], [197, 221, 237], [0.80, 0.75, 0.68]],
+    [25, [53, 144, 213], [223, 238, 250], [1, 1, 1]],
+  ];
+  let upper = -1;
+  let i;
+  for (i = 0; i < stops.length; i++) {
+    if (stops[i][0] >= altitude) { upper = i; break; }
+  }
+  const b = stops[upper < 0 ? stops.length - 1 : upper],
+        a = stops[Math.max(0, upper - 1)];
+  const t = a === b || upper < 0 ? 1 : (altitude - a[0]) / (b[0] - a[0]);
+  return {
+    background: `linear-gradient(${rgb(mix(a[1], b[1], t))}, ${rgb(mix(a[2], b[2], t))})`,
+    tint: mix(a[3], b[3], t),
+  };
+}

package/src/sunlight/initSunlight.js

@@ -0,0 +1,14 @@
+import { onAddSun } from './onAddSun.js';
+import { underEntry } from '../scene/underEntry.js';
+import { initialize } from './initialize.js';
+import { onAdd } from './onAdd.js';
+import { addTo } from './addTo.js';
+import { remove } from './remove.js';
+
+L.Control.Time = L.Control.extend({
+  options: { position: 'bottomright' },
+  initialize,
+  onAdd,
+  addTo,
+  remove,
+});

package/src/sunlight/initialize.js

@@ -0,0 +1,11 @@
+import { addTimeLayer } from './addTimeLayer.js';
+import { removeTimeLayer } from './removeTimeLayer.js';
+
+export function initialize(options) {
+  L.Util.setOptions(this, options);
+  this.live = true;
+  this.layer = new L.Layer();
+  this.layer.control = this;
+  this.layer.onAdd = addTimeLayer;
+  this.layer.onRemove = removeTimeLayer;
+}

package/src/sunlight/mix.js

@@ -0,0 +1,6 @@
+export function mix(a, b, t) {
+  const values = [];
+  let i;
+  for (i = 0; i < a.length; i++) values.push(a[i] + (b[i] - a[i]) * t);
+  return values;
+}

package/src/sunlight/onAdd.js

@@ -0,0 +1,5 @@
+import { onAddSun } from './onAddSun.js';
+
+export function onAdd(map) {
+  return onAddSun(this, map);
+}

package/src/sunlight/onAddSun.js

@@ -0,0 +1,66 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import { update as updateScene } from '../scene/update.js';
+import { atmosphere } from './atmosphere.js';
+import { moonPosition } from './moonPosition.js';
+import { projectCelestialBody } from './projectCelestialBody.js';
+import { solarPosition } from './solarPosition.js';
+import { updateSky } from './updateSky.js';
+import { render } from './render.js';
+import { updateSun } from './updateSun.js';
+import { useLiveTime } from './useLiveTime.js';
+import { useSelectedTime } from './useSelectedTime.js';
+import { tickSun } from './tickSun.js';
+import { removeSun } from './removeSun.js';
+
+export function onAddSun(control, map) {
+  map._timeControl = control;
+  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 container = L.DomUtil.create('div', 'sunlight-control');
+  container.style.cssText = 'color:#222;width:min(200px,calc(100vw - 60px));font:12px/1.4 sans-serif;';
+  const date = document.createElement('input');
+  date.type = 'date';
+  date.style.cssText = 'width:100%;box-sizing:border-box;';
+  date.setAttribute('aria-label', 'Solar date (UTC)');
+  const 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)');
+  const 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';
+  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);
+  const 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);
+  const state = { control, map, originalSky, sunDisc, moonDisc, date, slider, output, status };
+  state.update = updateSun.bind(null, state);
+  state.updateSky = updateSky.bind(null, state);
+  now.onclick = useLiveTime.bind(null, state);
+  date.onchange = slider.oninput = useSelectedTime.bind(null, state);
+  L.DomEvent.disableClickPropagation(container);
+  L.DomEvent.disableScrollPropagation(container);
+  state.update();
+  state.timer = setInterval(tickSun, 60000, state);
+  map.on('moveend', state.update);
+  map.on('move rotate pitch resize', state.updateSky);
+  control.onRemove = removeSun.bind(null, state);
+  return container;
+}

package/src/sunlight/remove.js

@@ -0,0 +1,7 @@
+export function remove() {
+  if (this._map?.hasLayer(this.layer)) {
+    this._map.removeLayer(this.layer);
+    return this;
+  }
+  return L.Control.prototype.remove.call(this);
+}

package/src/sunlight/removeSun.js

@@ -0,0 +1,15 @@
+import { render } from './render.js';
+import { updateSky } from './updateSky.js';
+
+export function removeSun(state) {
+  const { map, timer, sunDisc, moonDisc } = state;
+  clearInterval(timer);
+  delete map._timeControl;
+  map.fire('simulationtimechange', { time: null, live: false });
+  map.off('moveend', state.update);
+  map.off('move rotate pitch resize', state.updateSky);
+  delete map._sunlight;
+  updateSky(state);
+  sunDisc.remove(); moonDisc.remove();
+  render(map);
+}

package/src/sunlight/removeTimeLayer.js

@@ -0,0 +1,3 @@
+export function removeTimeLayer() {
+  return L.Control.prototype.remove.call(this.control);
+}

package/src/sunlight/render.js

@@ -0,0 +1,7 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import { update as updateScene } from '../scene/update.js';
+
+export function render(map) {
+  const renderer = cityMapper.renderers.get(map);
+  if (renderer) updateScene(renderer);
+}

package/src/sunlight/rgb.js

@@ -0,0 +1,6 @@
+export function rgb(values) {
+  const rounded = [];
+  let value;
+  for (value of values) rounded.push(Math.round(value));
+  return `rgb(${rounded.join(', ')})`;
+}

package/src/sunlight/styleTimeControl.js

@@ -0,0 +1,7 @@
+export function styleTimeControl(container, nested) {
+  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/sunlight/tickSun.js

@@ -0,0 +1,5 @@
+import { updateSun } from './updateSun.js';
+
+export function tickSun(state) {
+  if (state.control.live) updateSun(state);
+}

package/src/sunlight/updateSky.js

@@ -0,0 +1,20 @@
+import { projectCelestialBody } from './projectCelestialBody.js';
+
+export function updateSky({ map, originalSky, sunDisc, moonDisc }) {
+  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;
+  let disc, body, point, left, top;
+  for ([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);
+    point = projectCelestialBody(body.direction, size, pitch, bearing);
+    if (!point) continue;
+    ({ 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`;
+  }
+}

package/src/sunlight/updateSun.js

@@ -0,0 +1,34 @@
+import { atmosphere } from './atmosphere.js';
+import { moonPosition } from './moonPosition.js';
+import { solarPosition } from './solarPosition.js';
+import { render } from './render.js';
+import { updateSky } from './updateSky.js';
+
+export function updateSun(state) {
+  const { control, map, date, slider, output, status } = state;
+  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(state);
+    render(map);
+  } catch (error) {
+    delete map._sunlight;
+    updateSky(state);
+    render(map);
+    status.textContent = `Error: ${error.message}`;
+    console.error('Solar simulation', error);
+  }
+}

package/src/sunlight/useLiveTime.js

@@ -0,0 +1,6 @@
+import { updateSun } from './updateSun.js';
+
+export function useLiveTime(state) {
+  state.control.live = true;
+  updateSun(state);
+}