leaflet-city-mapper 0.0.3 → 0.0.4

package/src/sources/projectedTree.js

@@ -1,13 +1,19 @@
+import { L } from '../globals/L.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 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,
-  };
+export function projectedTree(context, lon, lat) {
+  const { backend, crs, origin, metres, map } = context;
+  const location = /* alloc */ new L.LatLng(lat, lon);
+  const point = crs.project(location);
+  const elevation = cameraByMap.get(map)._terrain3D ? getElevation(cameraByMap.get(map)._terrain3D, location) : undefined;
+  return /* alloc */ {
+    x: (point.x - origin.x) * metres,
+    y: (point.y - origin.y) * metres,
+    ground: Number.isFinite(elevation) && Number.isFinite(sceneByLayer.get(backend).root.position[1])
+      ? elevation - sceneByLayer.get(backend).root.position[1] : 0,
+  };
 }

package/src/sources/pump.js

@@ -1,4 +1,8 @@
-import { cityMapper } from '../constants/cityMapper.js';
+import { renderers } from '../globals/renderers.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+
 import { emptyNode } from "../scene/emptyNode.js";
 import { isClockWise } from "../triangulation/isClockWise.js";
 import { lampPostGeometry } from "../geometry/lampPostGeometry.js";
@@ -12,41 +16,27 @@ 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 = [];
+import { buildArea } from './buildArea.js';
+import { pendingSourceAreas } from './pendingSourceAreas.js';
 
 /** 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);
+  const shared = map && 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,
-      });
-    }
+  const layers = /* alloc */ [];
+  let layer, area, areaBackend;
+  for (layer of sceneByLayer.get(shared)._layers) {
+    if (Number.isFinite(sceneByLayer.get(layer)._inflight) && sceneByLayer.get(layer)._areas && (sceneByLayer.get(layer).url || sceneByLayer.get(layer)._geojson)) layers.push(layer);
   }
-  pending.sort(compareDistance);
+  const pending = pendingSourceAreas(layers, map);
   let inflight = 0;
-  for (layer of layers) inflight += layer._inflight;
+  for (layer of layers) inflight += sceneByLayer.get(layer)._inflight;
   for ({ layer: areaBackend, area } of pending) {
     if (inflight >= 4) break;
-    if (areaBackend._inflight >= 2) continue;
+    if (sceneByLayer.get(areaBackend)._inflight >= 2) continue;
     area.started = true;
-    areaBackend._inflight++;
+    sceneByLayer.get(areaBackend)._inflight++;
     inflight++;
     buildArea(areaBackend, area, map);
   }

package/src/sources/releaseArea.js

@@ -1,3 +1,6 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { setHighlight } from '../picking/setHighlight.js';
 import { showFeature } from '../picking/showFeature.js';
 import { setParent } from '../scene/setParent.js';
@@ -8,9 +11,9 @@ export function releaseArea(backend, area) {
   area.request.abort();
   let attribute;
   if (area.mesh) {
-    if (backend.highlightedFeature?.mesh === area.mesh) {
+    if (sceneByLayer.get(backend).highlightedFeature?.mesh === area.mesh) {
       setHighlight(backend, null);
-      backend.hoveredFeature = null;
+      sceneByLayer.get(backend).hoveredFeature = null;
       showFeature(backend, null);
     }
     setParent(area.mesh, null);

package/src/sources/setGeoJSONData.js

@@ -1,3 +1,6 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { releaseArea } from './releaseArea.js';
 import { updateArea } from './updateArea.js';
 
@@ -5,8 +8,8 @@ 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();
+  for (area of sceneByLayer.get(layer)._areas.values()) releaseArea(layer, area);
+  sceneByLayer.get(layer)._areas.clear();
   updateArea(layer);
   return layer;
 }

package/src/sources/sourceAreaContext.js

@@ -1,9 +1,19 @@
+import { radians } from '../globals/radians.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 export function sourceAreaContext(backend, area, map) {
-  const crs = map.options.crs, origin = crs.project(backend.location);
-  return {
+  const crs = map.options.crs, origin = crs.project(sceneByLayer.get(backend).location);
+  return /* alloc */ {
     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,
+    metres: Math.cos(sceneByLayer.get(backend).location.lat * radians),
+    positions: /* alloc */ [],
+    normals: /* alloc */ [],
+    colors: /* alloc */ [],
+    uvs: /* alloc */ [],
+    featureFaces: /* alloc */ [],
+    lights: /* alloc */ [],
+    supports: /* alloc */ new Set(),
+    skipped: 0,
   };
-}
+}

package/src/sources/updateArea.js

@@ -1,3 +1,6 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { pump } from "./pump.js";
 import { releaseArea } from './releaseArea.js';
 import { compareAreaDistance } from './compareAreaDistance.js';
@@ -5,41 +8,45 @@ 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() });
+  if (!backend._map || !sceneByLayer.get(backend)._shared) return;
+  if (sceneByLayer.get(backend)._geojson) {
+    if (!sceneByLayer.get(backend)._areas.has('geojson')) {
+      sceneByLayer.get(backend)._areas.set('geojson', /* alloc */ { request: /* alloc */ new AbortController() });
     }
     pump(backend);
     return;
   }
-  if (!backend.header) return;
-  const z = backend.header.minZoom;
+  if (!sceneByLayer.get(backend).header) return;
+  const z = sceneByLayer.get(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();
+  const archiveNW = backend._map.project(/* alloc */ [sceneByLayer.get(backend).header.maxLat, sceneByLayer.get(backend).header.minLon], z).divideBy(256).floor();
+  const archiveSE = backend._map.project(/* alloc */ [sceneByLayer.get(backend).header.minLat, sceneByLayer.get(backend).header.maxLon], z).divideBy(256).floor();
+  const wanted = /* alloc */ 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 });
+      wanted.set(`${x}/${y}`, /* alloc */ { z, x, y });
     }
   }
-  for ([key, area] of backend._areas) {
+  for ([key, area] of sceneByLayer.get(backend)._areas) {
     if (!wanted.has(key)) {
       releaseArea(backend, area);
-      backend._areas.delete(key);
+      sceneByLayer.get(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]);
+  const areas = /* alloc */ [];
+  for ([key, coords] of wanted) {
+    coords.distance = Math.hypot(coords.x + 0.5 - center.x, coords.y + 0.5 - center.y) / 2 ** z;
+    areas.push(coords);
+  }
   areas.sort(compareAreaDistance);
-  for ([key, coords] of areas) {
-    if (!backend._areas.has(key)) backend._areas.set(key, { coords, request: new AbortController() });
+  for (coords of areas) {
+    key = `${coords.x}/${coords.y}`;
+    if (!sceneByLayer.get(backend)._areas.has(key)) sceneByLayer.get(backend)._areas.set(key, /* alloc */ { coords, request: /* alloc */ new AbortController() });
   }
   pump(backend);
 }

package/src/sources/updateStatus.js

@@ -1,8 +1,11 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 /** 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: [] };
+  const progress = /* alloc */ { enabled, loaded: 0, skipped: 0, pending: 0, errors: /* alloc */ [] };
   let area;
-  for (area of backend._areas.values()) {
+  for (area of sceneByLayer.get(backend)._areas.values()) {
     if (area.error) progress.errors.push(area.error);
     else if (!area.done) progress.pending++;
     progress.loaded += area.buildings ?? 0;

package/src/sunlight/addTimeLayer.js

@@ -1,3 +1,6 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 export function addTimeLayer(map) {
-  return this.control.addTo(map);
+  return sceneByLayer.get(this).control.addTo(map);
 }

package/src/sunlight/addTo.js

@@ -1,3 +1,4 @@
+import { L } from '../globals/L.js';
 import { underEntry } from '../scene/underEntry.js';
 import { styleTimeControl } from './styleTimeControl.js';
 

package/src/sunlight/atmosphere.js

@@ -1,18 +1,15 @@
+import { atmosphereStops } from '../globals/atmosphereStops.js';
+import { atmosphereColor } from '../globals/atmosphereColor.js';
 
 import { mix } from './mix.js';
 import { rgb } from './rgb.js';
 
+
 export function atmosphere(altitude) {
   if (!Number.isFinite(altitude)) {
-    throw new Error('Invalid solar altitude');
+    throw /* alloc */ 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]],
-  ];
+  const stops = atmosphereStops;
   let upper = -1;
   let i;
   for (i = 0; i < stops.length; i++) {
@@ -21,8 +18,8 @@ export function atmosphere(altitude) {
   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))})`,
+  return /* alloc */ {
+    background: `linear-gradient(${rgb(mix(a[1], b[1], t, atmosphereColor))}, ${rgb(mix(a[2], b[2], t, atmosphereColor))})`,
     tint: mix(a[3], b[3], t),
   };
 }

package/src/sunlight/createSun.js

@@ -0,0 +1,54 @@
+import { L } from '../globals/L.js';
+import { updateSky } from './updateSky.js';
+import { updateSun } from './updateSun.js';
+import { useLiveTime } from './useLiveTime.js';
+import { useSelectedTime } from './useSelectedTime.js';
+
+export function createSun(map) {
+  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 = /* alloc */ {
+    control: null, map, originalSky: '', container, sunDisc, moonDisc, date, slider, output, status,
+    projection: /* alloc */ { left: 0, top: 0 },
+  };
+  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);
+  return state;
+}

package/src/sunlight/horizontalPosition.js

@@ -1,16 +1,16 @@
+import { radians } from '../globals/radians.js';
 
 export function horizontalPosition(d, lat, lng, ascension, declination) {
-  const rad = Math.PI / 180;
-  const hourAngle = (280.16 + 360.9856235 * d + lng) * rad - ascension;
-  const latitude = lat * rad;
+  const hourAngle = (280.16 + 360.9856235 * d + lng) * radians - ascension;
+  const latitude = lat * radians;
   const altitude = Math.asin(Math.sin(latitude) * Math.sin(declination) +
     Math.cos(latitude) * Math.cos(declination) * Math.cos(hourAngle));
   const southAzimuth = Math.atan2(Math.sin(hourAngle),
     Math.cos(hourAngle) * Math.sin(latitude) - Math.tan(declination) * Math.cos(latitude));
-  const azimuth = (southAzimuth / rad + 180 + 360) % 360;
-  return {
-    altitude: altitude / rad, azimuth,
-    direction: [Math.sin(azimuth * rad) * Math.cos(altitude), Math.sin(altitude),
-    -Math.cos(azimuth * rad) * Math.cos(altitude)]
+  const azimuth = (southAzimuth / radians + 180 + 360) % 360;
+  return /* alloc */ {
+    altitude: altitude / radians, azimuth,
+    direction: /* alloc */ [Math.sin(azimuth * radians) * Math.cos(altitude), Math.sin(altitude),
+    -Math.cos(azimuth * radians) * Math.cos(altitude)]
   };
 }

package/src/sunlight/initSunlight.js

@@ -1,14 +1,17 @@
+import { L } from '../globals/L.js';
 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';
+import { onRemoveSun } from './onRemoveSun.js';
 
 L.Control.Time = L.Control.extend({
   options: { position: 'bottomright' },
   initialize,
   onAdd,
+  onRemove: onRemoveSun,
   addTo,
   remove,
 });

package/src/sunlight/initialize.js

@@ -1,11 +1,14 @@
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 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;
+  this.layer = /* alloc */ new L.Layer();
+  sceneByLayer.get(this.layer).control = this;
+  sceneByLayer.get(this.layer).kind = 'time';
 }

package/src/sunlight/mix.js

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

package/src/sunlight/moonPosition.js

@@ -1,17 +1,18 @@
-import { solarPosition } from "./solarPosition.js";
+import { solarTime } from './solarTime.js';
 import { horizontalPosition } from "./horizontalPosition.js";
+import { radians } from '../globals/radians.js';
+import { sinObliquity } from '../globals/sinObliquity.js';
+import { cosObliquity } from '../globals/cosObliquity.js';
 
 // Low-precision geocentric lunar orbit; no parallax or atmospheric refraction.
 
 export function moonPosition(date, lat, lng) {
-  solarPosition(date, lat, lng);
-  const rad = Math.PI / 180, d = new Date(date).getTime() / 86400000 - 10957.5;
-  const anomaly = (134.963 + 13.064993 * d) * rad;
-  const longitude = (218.316 + 13.176396 * d + 6.289 * Math.sin(anomaly)) * rad;
-  const latitude = 5.128 * Math.sin((93.272 + 13.229350 * d) * rad) * rad;
-  const obliquity = 23.4397 * rad;
+  const d = solarTime(date, lat, lng) / 86400000 - 10957.5;
+  const anomaly = (134.963 + 13.064993 * d) * radians;
+  const longitude = (218.316 + 13.176396 * d + 6.289 * Math.sin(anomaly)) * radians;
+  const latitude = 5.128 * Math.sin((93.272 + 13.229350 * d) * radians) * radians;
   const x = Math.cos(latitude) * Math.cos(longitude);
-  const y = Math.cos(latitude) * Math.sin(longitude) * Math.cos(obliquity) - Math.sin(latitude) * Math.sin(obliquity);
-  const z = Math.cos(latitude) * Math.sin(longitude) * Math.sin(obliquity) + Math.sin(latitude) * Math.cos(obliquity);
+  const y = Math.cos(latitude) * Math.sin(longitude) * cosObliquity - Math.sin(latitude) * sinObliquity;
+  const z = Math.cos(latitude) * Math.sin(longitude) * sinObliquity + Math.sin(latitude) * cosObliquity;
   return horizontalPosition(d, lat, lng, Math.atan2(y, x), Math.asin(z));
 }

package/src/sunlight/onAddSun.js

@@ -1,66 +1,27 @@
-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;
-}
+import { cameraByMap } from '../globals/cameraByMap.js';
+import { sunlightByControl } from '../globals/sunlightByControl.js';
+import { sunByMap } from '../globals/sunByMap.js';
+import { createSun } from './createSun.js';
+import { tickSun } from './tickSun.js';
+
+export function onAddSun(control, map) {
+  let state = sunByMap.get(map);
+  if (state?.control && state.control !== control) {
+    control._map = null;
+    if (control.layer._map === map) map.removeLayer(control.layer);
+    throw /* alloc */ new Error('Only one Time control can be active per map');
+  }
+  if (!state) {
+    state = createSun(map);
+    sunByMap.set(map, state);
+  }
+  state.control = control;
+  state.originalSky = map.getContainer().style.getPropertyValue('--leaflet-sky-background');
+  cameraByMap.get(map)._timeControl = control;
+  sunlightByControl.set(control, state);
+  state.update();
+  state.timer = setInterval(tickSun, 60000, state);
+  map.on('moveend', state.update);
+  map.on('move rotate pitch resize', state.updateSky);
+  return state.container;
+}

package/src/sunlight/onRemoveSun.js

@@ -0,0 +1,10 @@
+import { sunlightByControl } from '../globals/sunlightByControl.js';
+
+import { removeSun } from './removeSun.js';
+
+export function onRemoveSun() {
+  const sunlight = sunlightByControl.get(this);
+  if (!sunlight) return;
+  removeSun(sunlight);
+  sunlightByControl.delete(this);
+}

package/src/sunlight/projectCelestialBody.js

@@ -1,13 +1,13 @@
 /** Perspective projection of a celestial direction; null when behind the camera. */
 
-export function projectCelestialBody(dir, size, pitch, bearing) {
+export function projectCelestialBody(dir, size, pitch, bearing, target) {
   const [x, y, z] = dir;
   const forward = -x * Math.sin(bearing) * Math.sin(pitch) - y * Math.cos(pitch) - z * Math.cos(bearing) * Math.sin(pitch);
   if (forward > 0) {
-    return {
-      left: size.x / 2 + size.y * 1.5 * (x * Math.cos(bearing) - z * Math.sin(bearing)) / forward,
-      top:  size.y / 2 - size.y * 1.5 * (-x * Math.sin(bearing) * Math.cos(pitch) + y * Math.sin(pitch) - z * Math.cos(bearing) * Math.cos(pitch)) / forward
-    };
+    target ||= /* alloc */ {};
+    target.left = size.x / 2 + size.y * 1.5 * (x * Math.cos(bearing) - z * Math.sin(bearing)) / forward;
+    target.top = size.y / 2 - size.y * 1.5 * (-x * Math.sin(bearing) * Math.cos(pitch) + y * Math.sin(pitch) - z * Math.cos(bearing) * Math.cos(pitch)) / forward;
+    return target;
   }
   return null;
 }

package/src/sunlight/remove.js

@@ -1,3 +1,4 @@
+import { L } from '../globals/L.js';
 export function remove() {
   if (this._map?.hasLayer(this.layer)) {
     this._map.removeLayer(this.layer);

package/src/sunlight/removeSun.js

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

package/src/sunlight/removeTimeLayer.js

@@ -1,3 +1,7 @@
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 export function removeTimeLayer() {
-  return L.Control.prototype.remove.call(this.control);
+  return L.Control.prototype.remove.call(sceneByLayer.get(this).control);
 }

package/src/sunlight/render.js

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