leaflet-city-mapper 0.0.3 → 0.0.5

package/src/vehicles/carModel.js

@@ -1,22 +1,38 @@
+import { paints } from '../globals/paints.js';
+import { tyre } from '../globals/tyre.js';
+import { glass } from '../globals/glass.js';
+import { headlight } from '../globals/headlight.js';
+import { taillight } from '../globals/taillight.js';
+
 import { box } from '../geometry/box.js';
-import { glass } from '../constants/glass.js';
-import { tyre } from '../constants/tyre.js';
-import { mirror } from './mirror.js';
-import { paints } from '../constants/paints.js';
-import { headlight } from '../constants/headlight.js';
-import { taillight } from '../constants/taillight.js';
+
+
+import { mirror } from './mirrorVehiclePart.js';
+
+
+
 
 export function carModel(i) {
   const paint = paints[i % paints.length];
-  return [
+  return /* alloc */ [
     ...mirror(0.7, 0.92, -1.68, -1.02, 0, 0.64, tyre),
     ...mirror(0.7, 0.92, 1.02, 1.68, 0, 0.64, tyre),
-    [[[-0.9, -1.95], [-0.72, -2.25], [0.72, -2.25], [0.9, -1.95], [0.9, 2.05], [0.76, 2.25], [-0.76, 2.25], [-0.9, 2.05]],
+    /* alloc */ [
+      /* alloc */ [
+        /* alloc */ [-0.9, -1.95],
+        /* alloc */ [-0.72, -2.25],
+        /* alloc */ [0.72, -2.25],
+        /* alloc */ [0.9, -1.95],
+        /* alloc */ [0.9, 2.05],
+        /* alloc */ [0.76, 2.25],
+        /* alloc */ [-0.76, 2.25],
+        /* alloc */ [-0.9, 2.05],
+      ],
       0.28, 0.82, paint],
     // Greenhouse: the windscreen leans back, the rear window less.
-    [box(-0.84, 0.84, -0.75, 1.6), 0.82, 1.38, glass, box(-0.7, 0.7, -0.05, 1.3)],
-    [box(-0.71, 0.71, -0.06, 1.31), 1.38, 1.46, paint],
+    /* alloc */ [box(-0.84, 0.84, -0.75, 1.6), 0.82, 1.38, glass, box(-0.7, 0.7, -0.05, 1.3)],
+    /* alloc */ [box(-0.71, 0.71, -0.06, 1.31), 1.38, 1.46, paint],
     ...mirror(0.38, 0.8, -2.3, -2.16, 0.56, 0.76, headlight),
-    [box(-0.78, 0.78, 2.16, 2.3), 0.6, 0.76, taillight],
+    /* alloc */ [box(-0.78, 0.78, 2.16, 2.3), 0.6, 0.76, taillight],
   ];
 }

package/src/vehicles/metroModel.js

@@ -1,8 +1,8 @@
 import { routeColor } from '../traffic/routeColor.js';
-import { carriage } from './carriage.js';
+import { carriage } from './buildCarriage.js';
 
 export function metroModel(index, properties) {
-  const color = routeColor(properties), parts = [];
+  const color = routeColor(properties), parts = /* alloc */ [];
   let car;
   for (car = 0; car < 5; car++) parts.push(...carriage((car - 2) * 15, 14, color));
   return parts;

package/src/vehicles/mirrorVehiclePart.js

@@ -0,0 +1,8 @@
+import { box } from "../geometry/box.js";
+
+export function mirror(x0, x1, z0, z1, ...rest) {
+  return /* alloc */ [
+    /* alloc */ [box(x0, x1, z0, z1), ...rest],
+    /* alloc */ [box(-x1, -x0, z0, z1), ...rest]
+  ];
+}

package/src/vehicles/pedestrianModel.js

@@ -1,17 +1,18 @@
+import { parts } from '../globals/parts.js';
+import { paints } from '../globals/paints.js';
+import { trousers } from '../globals/trousers.js';
+import { skin } from '../globals/skin.js';
+
 import { box } from '../geometry/box.js';
-import { parts } from '../constants/parts.js';
-import { skin } from '../constants/skin.js';
-import { trousers } from '../constants/trousers.js';
-import { paints } from '../constants/paints.js';
 
-export function pedestrianModel(index) {
-  const model = parts.body.slice();
-  model[1] = [model[1][0], model[1][1], model[1][2], paints[index % paints.length]];
-  model.push(
-    [box(-0.16, -0.02, -0.07, 0.07), 0.08, 0.9, trousers],
-    [box(0.02, 0.16, -0.07, 0.07), 0.08, 0.9, trousers],
-    [box(-0.3, -0.2, -0.05, 0.05), 0.76, 1.42, skin],
-    [box(0.2, 0.3, -0.05, 0.05), 0.76, 1.42, skin],
-  );
-  return model;
+export function pedestrianModel(index) {
+  const model = parts.body.slice();
+  model[1] = /* alloc */ [model[1][0], model[1][1], model[1][2], paints[index % paints.length]];
+  model.push(
+    /* alloc */ [box(-0.16, -0.02, -0.07, 0.07), 0.08, 0.9, trousers],
+    /* alloc */ [box(0.02, 0.16, -0.07, 0.07), 0.08, 0.9, trousers],
+    /* alloc */ [box(-0.3, -0.2, -0.05, 0.05), 0.76, 1.42, skin],
+    /* alloc */ [box(0.2, 0.3, -0.05, 0.05), 0.76, 1.42, skin],
+  );
+  return model;
 }

package/src/vehicles/tramModel.js

@@ -1,8 +1,8 @@
 import { routeColor } from '../traffic/routeColor.js';
-import { carriage } from './carriage.js';
+import { carriage } from './buildCarriage.js';
 
 export function tramModel(index, properties) {
-  const color = routeColor(properties), parts = [];
+  const color = routeColor(properties), parts = /* alloc */ [];
   let car;
   for (car = 0; car < 5; car++) parts.push(...carriage((car - 2) * 6.5, 6, color));
   return parts;

package/src/walk/animateWalker.js

@@ -0,0 +1,52 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+
+import { limbs } from '../globals/limbs.js';
+import { parts } from '../globals/parts.js';
+import { moves } from '../globals/moves.js';
+
+
+import * as createMesh from '../rendering/createMesh.js';
+import { build } from '../geometry/buildGeometryParts.js';
+
+import { wrap } from '../utils/wrap.js';
+import { local } from '../projections/walkerLocalPosition.js';
+import { place } from './placeWalker.js';
+import { land } from './landWalker.js';
+import { moveWalker } from './moveWalker.js';
+import { stepWalkerHeight } from './stepWalkerHeight.js';
+import { updateWalkerView } from './updateWalkerView.js';
+import { resolveWalkerPosition } from './resolveWalkerPosition.js';
+
+export function step(now) {
+  const layer = this.layer;
+  this.frame = requestAnimationFrame(this.step);
+  const dt = Math.min(0.1, (now - (this.last ?? now)) / 1000);
+  this.last = now;
+  if (!rendererByLayer.get(layer)) return;
+  let changed = false;
+  let part, key;
+  if (now >= this.nextClearanceCheck) {
+    this.nextClearanceCheck = now + 250;
+    if (resolveWalkerPosition.call(this)) changed = true;
+  }
+  if (!this.meshes) {
+    this.meshes = /* alloc */ [];
+    for ([part] of limbs) this.meshes.push(createMesh.createMesh(layer, build(parts[part])));
+    changed = true;
+  }
+  const previousY = rootByLayer.get(layer).position[1] +
+    local.call(this, this.local)[1] * rootByLayer.get(layer).scale[1];
+  if (stepWalkerHeight.call(this, dt)) changed = true;
+  let forward = 0, turn = 0;
+  for (key of this.keys) { forward += moves[key]?.[0] || 0; turn += moves[key]?.[1] || 0; }
+  forward = Math.sign(forward); turn = Math.sign(turn);
+  if (turn) { this.state.heading = wrap(this.state.heading + turn * 2.5 * dt); changed = true; }
+  if (forward) {
+    moveWalker.call(this, forward, dt);
+    changed = true;
+  }
+  if (changed) land.call(this, previousY);
+  if (updateWalkerView.call(this, forward, turn, dt)) changed = true;
+  if (changed) place.call(this);
+}

package/src/walk/createWalk.js

@@ -1,60 +1,70 @@
-import { init3D } from '../scene/init3D.js';
-import { onBlur } from './onBlur.js';
-import { onKey } from './onKey.js';
-import { onPointer } from './onPointer.js';
-import { onTerrain } from './onTerrain.js';
-import { start } from './start.js';
-import { step } from './step.js';
-import { stop } from './stop.js';
-import { toggle } from './toggle.js';
-
-export function createWalk(control, {
-  speed,
-  distance,
-  ...options
-} = {}) {
-  const layer = new L.Layer();
-  layer._type = 'walk';
-  init3D(layer, options);
-  const keys = new Set();
-  const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
-  container.style.cssText = 'display:flex;align-items:center;background:#fff;';
-  const button = L.DomUtil.create('button', '', container);
-  button.type = 'button';
-  button.title = 'Walk';
-  button.setAttribute('aria-label', 'Walk');
-  button.setAttribute('aria-pressed', 'false');
-  button.textContent = '🚶';
-  button.style.cssText = 'width:30px;height:30px;padding:0;border:0;border-radius:4px;background:#fff;font-size:18px;line-height:30px;cursor:pointer;';
-  const hint = L.DomUtil.create('small', '', container);
-  hint.style.cssText = 'display:none;padding:0 8px;color:#333;white-space:nowrap;';
-  hint.textContent = 'W/S: run · A/D: turn · drag: look around · Esc: exit';
-  L.DomEvent.disableClickPropagation(container);
-
-  const context = {
-    layer,
-    speed,
-    distance,
-    keys,
-    container,
-    button,
-    hint,
-    meshes: null,
-    frame: null,
-    last: undefined,
-    swing: 0,
-    saved: null,
-    drag: null,
-    state: control.walker = layer.walker = { latlng: null, heading: 0, phase: 0 }
-  }
-  context.step = step.bind(context);
-  context.onKey = onKey.bind(context);
-  context.onBlur = onBlur.bind(context);
-  context.onPointer = onPointer.bind(context);
-  context.onTerrain = onTerrain.bind(context);
-  context.start = start.bind(context);
-  context.stop = stop.bind(context);
-  context.toggle = toggle.bind(context);
-  control._walk = context;
-  L.DomEvent.on(button, 'click', context.toggle);
-}
+import { typeByLayer } from '../weakmaps/typeByLayer.js';
+import { walkerByLayer } from '../weakmaps/walkerByLayer.js';
+
+import { L } from '../globals/L.js';
+
+
+import { init3D } from '../scene/init3D.js';
+import { onBlur } from './onWalkBlur.js';
+import { onKey } from './onWalkKey.js';
+import { onPointer } from './onWalkPointer.js';
+import { onTerrain } from './onWalkTerrain.js';
+import { start } from './startWalking.js';
+import { step } from './animateWalker.js';
+import { stop } from './stopWalking.js';
+import { toggle } from './toggleWalking.js';
+
+export function createWalk(control, {
+  speed,
+  distance,
+  ...options
+}) {
+  const layer = /* alloc */ new L.Layer();
+  typeByLayer.set(layer, 'walk');
+  init3D(layer, options);
+  const keys = /* alloc */ new Set();
+  const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+  container.style.cssText = 'display:flex;align-items:center;background:#fff;';
+  const button = L.DomUtil.create('button', '', container);
+  button.type = 'button';
+  button.title = 'Walk';
+  button.setAttribute('aria-label', 'Walk');
+  button.setAttribute('aria-pressed', 'false');
+  button.textContent = '🚶';
+  button.style.cssText = 'width:30px;height:30px;padding:0;border:0;border-radius:4px;background:#fff;font-size:18px;line-height:30px;cursor:pointer;';
+  const hint = L.DomUtil.create('small', '', container);
+  hint.style.cssText = 'display:none;padding:0 8px;color:#333;white-space:nowrap;';
+  hint.textContent = 'W/S: run · A/D: turn · hold Space: ascend · drag: look around · Esc: exit';
+  L.DomEvent.disableClickPropagation(container);
+
+  const context = /* alloc */ {
+    layer,
+    speed,
+    distance,
+    keys,
+    container,
+    button,
+    hint,
+    meshes: null,
+    frame: null,
+    last: undefined,
+    nextClearanceCheck: 0,
+    swing: 0,
+    verticalSpeed: 0,
+    saved: null,
+    hitData: null,
+    local: null,
+    state: control.walker = /* alloc */ { latlng: null, heading: 0, phase: 0, height: 0 }
+  }
+  walkerByLayer.set(layer, context.state);
+  context.step = step.bind(context);
+  context.onKey = onKey.bind(context);
+  context.onBlur = onBlur.bind(context);
+  context.onPointer = onPointer.bind(context);
+  context.onTerrain = onTerrain.bind(context);
+  context.start = start.bind(context);
+  context.stop = stop.bind(context);
+  context.toggle = toggle.bind(context);
+  control._walk = context;
+  L.DomEvent.on(button, 'click', context.toggle);
+}

package/src/walk/initWalk.js

@@ -1,6 +1,7 @@
-import { initialize } from './initialize.js';
-import { onAdd } from './onAdd.js';
-import { onRemove } from './onRemove.js';
+import { L } from '../globals/L.js';
+import { initialize } from './initializeWalkControl.js';
+import { onAdd } from './onAddWalkControl.js';
+import { onRemove } from './onRemoveWalkControl.js';
 
 /**
  * Third-person walk mode, toggled by a map button (and Esc): a pedestrian at the map centre runs with W/S (or ↑/↓) and
@@ -8,7 +9,7 @@ import { onRemove } from './onRemove.js';
  * (bearing, pitch); the wheel changes the camera distance.
  * The walker follows the terrain, bridges included, and `control.walker` exposes `{ latlng, heading, phase }`.
  * Options: `speed` (m/s, default 70), `distance` (camera distance in metres, default 20), `position` (button corner, default 'bottomright').
- * Visible meshes of the other 3D layers (buildings, trees, models, streetlights) are solid; terrain and traffic are not.
+ * Buildings, trees, models, streetlights and traffic block movement; the walker is moved out of newly loaded obstacles.
  */
 L.Control.Walk = L.Control.extend({
   options: { position: 'bottomright', speed: 70, distance: 20 },

package/src/walk/{initialize.js → initializeWalkControl.js}

@@ -1,3 +1,4 @@
+import { L } from '../globals/L.js';
 import { createWalk } from './createWalk.js';
 
 export function initialize(options) {

package/src/walk/{blocked.js → isWalkBlocked.js}

@@ -1,6 +1,6 @@
-import { hit } from '../picking/hit.js';
-
+import { hit } from '../picking/hit.js';
+
 export function blocked(east, north, feet) {
   const length = Math.hypot(east, north);
-  return length > 1e-6 && hit(this.layer, feet[0], feet[1], feet[2], east / length, -north / length, length + 0.3);
-}
+  return length > 1e-6 && hit(this.layer, feet[0], feet[1], feet[2], east / length, -north / length, length + 0.3, this.hitData);
+}

package/src/walk/landWalker.js

@@ -0,0 +1,38 @@
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { raycasterByLayer } from '../weakmaps/raycasterByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { sceneByLayer } from '../weakmaps/sceneByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+
+import { intersectMeshes } from '../collision/intersectMeshes.js';
+import { traverse } from '../scene/traverse.js';
+import { updateWorldMatrix } from '../transforms/updateWorldMatrix.js';
+import { collectVisibleMesh } from '../picking/collectVisibleMesh.js';
+import { shouldSkipOther } from '../picking/shouldSkipOther.js';
+import { local } from '../projections/walkerLocalPosition.js';
+
+export function land(previousY) {
+  const ray = raycasterByLayer.get(this.layer)
+  const feet = local.call(this, this.local), root = rootByLayer.get(this.layer);
+  const x = root.position[0] + feet[0] * root.scale[0];
+  const y = root.position[1] + feet[1] * root.scale[1];
+  const z = root.position[2] + feet[2] * root.scale[2];
+  if (y > previousY || this.verticalSpeed > 0) return;
+  updateWorldMatrix(sceneByLayer.get(this.layer));
+  ray.origin[0] = x; ray.origin[1] = previousY + 0.01; ray.origin[2] = z;
+  ray.direction[0] = 0; ray.direction[1] = -1; ray.direction[2] = 0;
+  ray.meshes.length = 0;
+  let layer, hit;
+  for (layer of layersByLayer.get(sharedByLayer.get(this.layer))) {
+    if (shouldSkipOther(layer, this.layer) || kindByLayer.get(layer) === 'raster' || layer.options.nightLight) continue;
+    traverse(rootByLayer.get(layer), collectVisibleMesh, ray.meshes);
+  }
+  for (hit of intersectMeshes(ray, ray.meshes)) {
+    if (hit.point[1] < y - 0.001) break;
+    this.state.height += (hit.point[1] - y) / root.scale[1];
+    this.verticalSpeed = 0;
+    break;
+  }
+  ray.meshes.length = 0;
+}

package/src/walk/moveWalker.js

@@ -0,0 +1,24 @@
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+
+import { L } from '../globals/L.js';
+import { radians } from '../globals/radians.js';
+import { local } from '../projections/walkerLocalPosition.js';
+import { blocked } from './isWalkBlocked.js';
+
+export function moveWalker(forward, dt) {
+  const metres = forward * this.speed * dt, { lat, lng } = this.state.latlng;
+  const { position, scale } = rootByLayer.get(this.layer);
+  let east = Math.sin(this.state.heading) * metres, north = Math.cos(this.state.heading) * metres;
+  const feet = local.call(this, this.local);
+  let i;
+  for (i = 0; i < feet.length; i++) feet[i] = position[i] + scale[i] * feet[i];
+  // World x is east, z south; keep 0.3 m from walls and slide along them.
+  const wall = blocked.call(this, east, north, feet);
+  if (wall) {
+    const into = east * wall[0] - north * wall[1];
+    east -= into * wall[0]; north += into * wall[1];
+    if (blocked.call(this, east, north, feet)) east = north = 0;
+  }
+  this.state.latlng = /* alloc */ new L.LatLng(lat + north / 111320, lng + east / (111320 * Math.cos(lat * radians)));
+  this.state.phase += Math.hypot(east, north) / 1.6 * Math.PI;
+}

package/src/walk/onAddWalkControl.js

@@ -0,0 +1,31 @@
+import { walkByMap } from '../weakmaps/walkByMap.js';
+
+export function onAdd(map) {
+  let state = walkByMap.get(map);
+  if (state?.control && state.control !== this) {
+    this._map = null;
+    throw /* alloc */ new Error('Only one Walk control can be active per map');
+  }
+  if (!state) {
+    state = /* alloc */ {
+      control: null,
+      hitData: /* alloc */ {
+        x: 0, y: 0, z: 0, dx: 0, dz: 0, reach: 0, best: 0, found: false,
+        seen: /* alloc */ new Set(),
+        intersections: /* alloc */ [],
+        nodes: /* alloc */ [],
+        normal: /* alloc */ [0, 0],
+      },
+      local: /* alloc */ [0, 0, 0],
+    };
+    walkByMap.set(map, state);
+  }
+  state.control = this;
+  state.local.fill(0);
+  state.hitData.seen.clear();
+  state.hitData.normal.fill(0);
+  this._walk.hitData = state.hitData;
+  this._walk.local = state.local;
+  this._walk.layer.addTo(map);
+  return this._walk.container;
+}

package/src/walk/onRemoveWalkControl.js

@@ -0,0 +1,12 @@
+import { walkByMap } from '../weakmaps/walkByMap.js';
+
+export function onRemove(map) {
+  const state = walkByMap.get(map);
+  if (state?.control !== this) return;
+  this._walk.stop();
+  this._walk.layer.remove();
+  state.control = null;
+  state.hitData.seen.clear();
+  this._walk.hitData = null;
+  this._walk.local = null;
+}

package/src/walk/{onKey.js → onWalkKey.js}

@@ -1,12 +1,15 @@
-import { moves } from '../constants/moves.js';
-import { stop } from './stop.js';
+import { moves } from '../globals/moves.js';
 
-export function onKey(event) {
-  // Text fields and sliders keep their keys; buttons and checkboxes don't.
-  if (event.target.closest?.('input:not([type=checkbox], [type=radio]), select, textarea, [contenteditable]') ||
-    event.ctrlKey || event.altKey || event.metaKey) return;
-  if (event.type === 'keydown' && event.code === 'Escape') { this.stop(); return; }
-  if (!moves[event.code]) return;
-  event.preventDefault();
-  if (event.type === 'keydown') this.keys.add(event.code); else this.keys.delete(event.code);
+
+import { stop } from './stopWalking.js';
+
+export function onKey(event) {
+  if (event.type === 'keyup' && event.code === 'Space') this.keys.delete('Space');
+  // Text fields and sliders keep their keys; buttons and checkboxes don't.
+  if (event.target.closest?.('input:not([type=checkbox], [type=radio]), select, textarea, [contenteditable]') ||
+    event.ctrlKey || event.altKey || event.metaKey) return;
+  if (event.type === 'keydown' && event.code === 'Escape') { this.stop(); return; }
+  if (!moves[event.code] && event.code !== 'Space') return;
+  event.preventDefault();
+  if (event.type === 'keydown') this.keys.add(event.code); else this.keys.delete(event.code);
 }

package/src/walk/onWalkPointer.js

@@ -0,0 +1,18 @@
+import { mapSetPitchAndBearing } from '../camera/mapSetPitchAndBearing.js';
+import { mapGetPitch } from '../camera/mapGetPitch.js';
+import { mapGetBearing } from '../camera/mapGetBearing.js';
+export function onPointer(event) {
+  // Dragging only turns the camera around the walker: horizontal = bearing, vertical = pitch.
+  const map = this.layer._map;
+  if (event.type === 'pointerdown') {
+    if (event.button !== 0 || event.target.closest('.leaflet-control')) return;
+    this.dragX = event.clientX;
+    this.dragY = event.clientY;
+    this.dragging = true;
+    map.getContainer().setPointerCapture(event.pointerId);
+  } else if (this.dragging && event.type === 'pointermove') {
+    mapSetPitchAndBearing(map, Math.max(20, Math.min(85, mapGetPitch(map) - (event.clientY - this.dragY) * 0.2)), mapGetBearing(map) - (event.clientX - this.dragX) * 0.25);
+    this.dragX = event.clientX;
+    this.dragY = event.clientY;
+  } else this.dragging = false;
+}

package/src/walk/{onTerrain.js → onWalkTerrain.js}

@@ -1,4 +1,4 @@
-import { place } from './place.js';
+import { place } from './placeWalker.js';
 
 export function onTerrain() {
   if (this.meshes) place.call(this);

package/src/walk/{place.js → placeWalker.js}

@@ -1,9 +1,11 @@
-import { update } from '../scene/update.js';
-import { limbs } from '../constants/limbs.js';
-import { local } from './local.js';
+import { limbs } from '../globals/limbs.js';
+
+import { update } from '../scene/scheduleSceneUpdate.js';
+
+import { local } from '../projections/walkerLocalPosition.js';
 
 export function place() {
-  const [x, y, z] = local.call(this);
+  const [x, y, z] = local.call(this, this.local);
   // Model forward is -z; a yaw of -heading turns it to the compass heading (x east, -z north).
   const yaw = -this.state.heading, cos = Math.cos(yaw), sin = Math.sin(yaw);
   let i, px, py, sign, mesh;

package/src/walk/resolveWalkerPosition.js

@@ -0,0 +1,28 @@
+import { L } from '../globals/L.js';
+import { insideWalker } from '../collision/insideWalker.js';
+
+export function resolveWalkerPosition() {
+  if (!this.saved || !insideWalker(this)) return false;
+  const map = this.layer._map;
+  const origin = this.state.latlng;
+  const height = this.state.height;
+  let distance, angle, candidate;
+  for (distance = 0.5; distance <= 20; distance += 0.5) {
+    for (angle = 0; angle < Math.PI * 2; angle += Math.PI / 4) {
+      candidate = /* alloc */ new L.LatLng(
+        origin.lat + Math.cos(angle) * distance / 111320,
+        origin.lng + Math.sin(angle) * distance / (111320 * Math.cos(origin.lat * Math.PI / 180))
+      );
+      this.state.latlng = candidate;
+      this.state.height = 0;
+      if (!insideWalker(this)) {
+        this.verticalSpeed = 0;
+        map.setView(candidate, map.getZoom(), /* alloc */ { animate: false });
+        return true;
+      }
+    }
+  }
+  this.state.latlng = origin;
+  this.state.height = height;
+  return false;
+}

package/src/walk/startWalking.js

@@ -0,0 +1,49 @@
+import { radians } from '../globals/radians.js';
+import { earthCirc } from '../globals/earthCirc.js';
+import { L } from '../globals/L.js';
+import { sceneWalkHandlers } from '../globals/sceneWalkHandlers.js';
+import { mapGetPitch } from '../camera/mapGetPitch.js';
+import { mapGetBearing } from '../camera/mapGetBearing.js';
+import { mapSetPitch } from '../camera/mapSetPitch.js';
+import { step } from './animateWalker.js';
+import { onKey } from './onWalkKey.js';
+import { onBlur } from './onWalkBlur.js';
+import { onPointer } from './onWalkPointer.js';
+import { onTerrain } from './onWalkTerrain.js';
+import { resolveWalkerPosition } from './resolveWalkerPosition.js';
+
+
+export function start() {
+  const map = this.layer._map;
+  if (this.saved || !map) return;
+  this.state.latlng = map.getCenter();
+  this.state.height = this.verticalSpeed = 0;
+  // Zoom whose camera distance (1.5 viewport heights, as in scene/render.js) is about `distance` metres behind the walker.
+  const pixelsPerMetre = map.getSize().y * 1.5 / this.distance;
+  const zoom = Math.min(map.getMaxZoom(), Math.log2(pixelsPerMetre * earthCirc * Math.cos(this.state.latlng.lat * radians) / 256));
+  let name;
+  this.saved = /* alloc */ {
+    zoom: map.getZoom(), pitch: mapGetPitch(map), scrollWheelZoom: map.options.scrollWheelZoom,
+    handlers: /* alloc */ [],
+  };
+  for (name of sceneWalkHandlers) {
+    if (map[name]?.enabled()) this.saved.handlers.push(name);
+  }
+  for (name of this.saved.handlers) map[name].disable();
+  // Wheel zoom moves the camera closer or farther, keeping the walker centred.
+  map.options.scrollWheelZoom = this.saved.scrollWheelZoom && 'center';
+  this.state.heading = -mapGetBearing(map) * radians;
+  map.setView(this.state.latlng, zoom, /* alloc */ { animate: false });
+  mapSetPitch(map, 75);
+  resolveWalkerPosition.call(this);
+  L.DomEvent.on(document, 'keydown keyup', this.onKey);
+  L.DomEvent.on(window, 'blur', this.onBlur);
+  L.DomEvent.on(map.getContainer(), 'pointerdown pointermove pointerup pointercancel', this.onPointer);
+  map.on('terrainchange', this.onTerrain);
+  this.button.setAttribute('aria-pressed', 'true');
+  this.button.style.background = '#e4e4e4';
+  this.hint.style.display = '';
+  this.last = undefined;
+  this.nextClearanceCheck = 0;
+  this.frame = requestAnimationFrame(this.step);
+}

package/src/walk/stepWalkerHeight.js

@@ -0,0 +1,11 @@
+export function stepWalkerHeight(dt) {
+  if (this.keys.has('Space')) {
+    this.verticalSpeed = 6;
+    this.state.height += this.verticalSpeed * dt;
+    return true;
+  }
+  if (!this.verticalSpeed && !this.state.height) return false;
+  this.state.height = Math.max(0, this.state.height + this.verticalSpeed * dt - 9.81 * dt * dt / 2);
+  this.verticalSpeed = this.state.height > 0 ? this.verticalSpeed - 9.81 * dt : 0;
+  return true;
+}