leaflet-city-mapper 0.0.9 → 0.1.1

package/src/core/layerMergeOptions.js

@@ -1,7 +1,14 @@
-import { L } from '../globals/L.js';
-import { leafletLayer } from '../globals/leafletLayer.js';
-
-export function layerMergeOptions(options) {
-  leafletLayer.mergeOptions.call(this === L.Layer ? leafletLayer : this, options);
-  return this;
-}
+import { L } from '../globals/L.js';
+import { leafletLayer } from '../globals/leafletLayer.js';
+
+/**
+ * Merge options into the appropriate Leaflet layer class.
+ *
+ * @param {Object} options Default options to merge.
+ *
+ * @returns {Function} This layer class.
+ */
+export function layerMergeOptions(options) {
+  leafletLayer.mergeOptions.call(this === L.Layer ? leafletLayer : this, options);
+  return this;
+}

package/src/core/markerGetEvents.js

@@ -1,7 +1,10 @@
 import { markerMethods } from '../globals/markerMethods.js';
 
-
-
+/**
+ * Extend this marker's map events with camera movement updates.
+ *
+ * @returns {Object} Map event handlers.
+ */
 export function markerGetEvents() {
   const events = markerMethods.value.getEvents.call(this);
   events.rotate = events.pitch = events.move = this.update;

package/src/core/markerInitInteraction.js

@@ -1,10 +1,13 @@
 import { markerMethods } from '../globals/markerMethods.js';
-
-
 import { cameraMarkerDrag } from './cameraMarkerDrag.js';
 
+/**
+ * Initialize this marker's Leaflet interaction and camera-aware dragging.
+ *
+ * @returns {*} Original interaction initializer result.
+ */
 export function markerInitInteraction() {
-  const result = markerMethods.value._initInteraction.call(this);
-  cameraMarkerDrag.call(this);
+  const result = markerMethods.value._initInteraction.call(this);
+  cameraMarkerDrag.call(this);
   return result;
 }

package/src/core/markerSetIcon.js

@@ -1,12 +1,17 @@
 import { L } from '../globals/L.js';
 import { markerMethods } from '../globals/markerMethods.js';
-
-
 import { initNativeGPU } from '../native/initNativeGPU.js';
 
+/**
+ * Set this marker's icon and initialize GPU rendering for mapped non-DivIcon images.
+ *
+ * @param {L.Icon} icon New marker icon.
+ *
+ * @returns {*} Original Leaflet setter result.
+ */
 export function markerSetIcon(icon) {
-  if (!(icon instanceof L.DivIcon)) icon.options.crossOrigin ||= true;
-  const result = markerMethods.value.setIcon.call(this, icon);
-  if (this._map && !(icon instanceof L.DivIcon)) initNativeGPU(this, this._map);
+  if (!(icon instanceof L.DivIcon)) icon.options.crossOrigin ||= true;
+  const result = markerMethods.value.setIcon.call(this, icon);
+  if (this._map && !(icon instanceof L.DivIcon)) initNativeGPU(this, this._map);
   return result;
 }

package/src/core/markerSetPos.js

@@ -1,9 +1,12 @@
 import { markerMethods } from '../globals/markerMethods.js';
-
 import { markerCameraIconPoint } from '../projections/markerCameraIconPoint.js';
-
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
+/**
+ * Position and orient this marker's icon and shadow under the current camera.
+ *
+ * @param {L.Point} point Marker layer point.
+ */
 export function markerSetPos(point) {
   markerMethods.value._setPos.call(this, displayPoint(this._map, point, this.getLatLng()));
   let i, element, key, direction, options, anchor;

package/src/core/markerSetRotation.js

@@ -1,9 +1,19 @@
-import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';
-
-export function markerSetRotation(marker, rotation) {
-  if (!Number.isFinite(rotation)) throw /* alloc */ new TypeError('Marker rotation must be finite');
-  marker.options.rotation = rotation;
-  marker.update();
-  refreshNativeLayerContract(marker);
-  return marker;
-}
+import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';
+
+/**
+ * Set a marker's rotation and refresh its display and native GPU state.
+ *
+ * @param {L.Marker} marker Marker to update.
+ * @param {number} rotation Rotation value.
+ *
+ * @returns {L.Marker} The updated marker.
+ *
+ * @throws {TypeError} If the rotation is not finite.
+ */
+export function markerSetRotation(marker, rotation) {
+  if (!Number.isFinite(rotation)) throw /* alloc */ new TypeError('Marker rotation must be finite');
+  marker.options.rotation = rotation;
+  marker.update();
+  refreshNativeLayerContract(marker);
+  return marker;
+}

package/src/core/markerUpdateZIndex.js

@@ -1,13 +1,15 @@
 import { cameraZIndexOffsetByLayer } from '../weakmaps/cameraZIndexOffsetByLayer.js';
-
 import { markerMethods } from '../globals/markerMethods.js';
+import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';
 
-
-
+/**
+ * Update this marker's Leaflet z-index and refresh native state when its offset changes.
+ *
+ * @param {number} offset Z-index offset.
+ */
 export function markerUpdateZIndex(offset) {
   markerMethods.value._updateZIndex.call(this, offset);
   const changed = cameraZIndexOffsetByLayer.get(this) !== offset;
   cameraZIndexOffsetByLayer.set(this, offset);
   if (changed) refreshNativeLayerContract(this);
 }
-import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';

package/src/core/popupAdjustPan.js

@@ -1,10 +1,13 @@
 import { popupPan } from '../globals/popupPan.js';
-
 import { mapGetPitch } from '../camera/mapGetPitch.js';
 import { mapGetBearing } from '../camera/mapGetBearing.js';
-
 import { pointOf } from '../projections/toPoint.js';
 
+/**
+ * Auto-pan this popup into the padded viewport under the current camera.
+ *
+ * @returns {*} Original Leaflet handler result when the camera is untransformed.
+ */
 export function popupAdjustPan() {
   const map = this._map;
   if (!mapGetPitch(map) && !mapGetBearing(map)) return popupPan.value.call(this);

package/src/core/popupGetEvents.js

@@ -1,6 +1,10 @@
 import { popupEvents } from '../globals/popupEvents.js';
 
-
+/**
+ * Extend this popup's map events with camera and terrain position updates.
+ *
+ * @returns {Object} Map event handlers.
+ */
 export function popupGetEvents() {
   const events = popupEvents.value.call(this);
   events.rotate = events.pitch = events.move = events.terrainchange = this._updatePosition;

package/src/core/popupUpdatePosition.js

@@ -1,9 +1,8 @@
 import { L } from '../globals/L.js';
 import { popupPosition } from '../globals/popupPosition.js';
-
-
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
+/** Update this popup's position and apply the camera display offset. */
 export function popupUpdatePosition() {
   popupPosition.value.call(this);
   if (!this._map) return;

package/src/core/projectNativePath.js

@@ -1,23 +1,30 @@
-import { L } from '../globals/L.js';
-import { pathProjectionByMap } from '../weakmaps/pathProjectionByMap.js';
-
-export function projectNativePath(source) {
-  if (!L.version.startsWith('2.')) return source._project();
-  const map = source._map, renderer = source._renderer;
-  let projection = pathProjectionByMap.get(map);
-  if (!projection) {
-    // Leaflet 2 projects against a renderer view, even when no DOM renderer is mounted.
-    projection = Object.create(L.Renderer.prototype);
-    projection._map = map;
-    pathProjectionByMap.set(map, projection);
-  }
-  projection._pathZoom = map.getZoom();
-  projection._pathOrigin = map.getPixelOrigin();
-  source._renderer = projection;
-  try {
-    source._project();
-  } finally {
-    if (renderer) source._renderer = renderer;
-    else delete source._renderer;
-  }
-}
+import { L } from '../globals/L.js';
+import { pathProjectionByMap } from '../weakmaps/pathProjectionByMap.js';
+
+/**
+ * Project a native path using a temporary renderer view when required by Leaflet 2.
+ *
+ * @param {L.Path} source Path to project.
+ *
+ * @returns {*} Original projection result on Leaflet 1.
+ */
+export function projectNativePath(source) {
+  if (!L.version.startsWith('2.')) return source._project();
+  const map = source._map, renderer = source._renderer;
+  let projection = pathProjectionByMap.get(map);
+  if (!projection) {
+    // Leaflet 2 projects against a renderer view, even when no DOM renderer is mounted.
+    projection = Object.create(L.Renderer.prototype);
+    projection._map = map;
+    pathProjectionByMap.set(map, projection);
+  }
+  projection._pathZoom = map.getZoom();
+  projection._pathOrigin = map.getPixelOrigin();
+  source._renderer = projection;
+  try {
+    source._project();
+  } finally {
+    if (renderer) source._renderer = renderer;
+    else delete source._renderer;
+  }
+}

package/src/core/redrawPath.js

@@ -1,6 +1,11 @@
-import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';
-
-export function redrawPath() {
-  refreshNativeLayerContract(this);
-  return this;
-}
+import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';
+
+/**
+ * Refresh this native path's GPU rendering.
+ *
+ * @returns {L.Path} This path.
+ */
+export function redrawPath() {
+  refreshNativeLayerContract(this);
+  return this;
+}

package/src/core/removeLayer.js

@@ -1,23 +1,26 @@
 import { kindByLayer } from '../weakmaps/kindByLayer.js';
-
 import { L } from '../globals/L.js';
 import { removeLayer as sharedRemoveLayer } from '../globals/removeLayer.js';
-
-import { removeSceneLayer } from '../scene/removeSceneLayer.js';
-
-
-
-export function removeLayer(layer) {
-  const id = L.Util.stamp(layer);
-  if (!this._layers[id]) return this;
-
-  if (!kindByLayer.get(layer)) return sharedRemoveLayer.value.call(this, layer);
-  if (this._loaded) removeSceneLayer(layer, this);
-  delete this._layers[id];
-  if (this._loaded) {
-    this.fire('layerremove', /* alloc */ { layer });
-    layer.fire('remove');
-  }
-  layer._map = layer._mapToAdd = null;
-  return this;
-}
+import { removeSceneLayer } from '../scene/removeSceneLayer.js';
+
+/**
+ * Remove a scene layer from this map, delegating ordinary layers to Leaflet.
+ *
+ * @param {L.Layer} layer Layer to remove.
+ *
+ * @returns {L.Map} This map.
+ */
+export function removeLayer(layer) {
+  const id = L.Util.stamp(layer);
+  if (!this._layers[id]) return this;
+
+  if (!kindByLayer.get(layer)) return sharedRemoveLayer.value.call(this, layer);
+  if (this._loaded) removeSceneLayer(layer, this);
+  delete this._layers[id];
+  if (this._loaded) {
+    this.fire('layerremove', /* alloc */ { layer });
+    layer.fire('remove');
+  }
+  layer._map = layer._mapToAdd = null;
+  return this;
+}

package/src/core/setRotation.js

@@ -1,5 +1,12 @@
-import { markerSetRotation } from './markerSetRotation.js';
-
-export function setRotation(rotation) {
-  return markerSetRotation(this, rotation);
-}
+import { markerSetRotation } from './markerSetRotation.js';
+
+/**
+ * Set this marker's rotation.
+ *
+ * @param {number} rotation Rotation value.
+ *
+ * @returns {L.Marker} This marker.
+ */
+export function setRotation(rotation) {
+  return markerSetRotation(this, rotation);
+}

package/src/core/tooltipGetEvents.js

@@ -1,6 +1,10 @@
 import { tooltipEvents } from '../globals/tooltipEvents.js';
 
-
+/**
+ * Extend this tooltip's map events with camera and terrain position updates.
+ *
+ * @returns {Object} Map event handlers.
+ */
 export function tooltipGetEvents() {
   const events = tooltipEvents.value.call(this);
   events.rotate = events.pitch = events.move = events.terrainchange = this._updatePosition;

package/src/core/tooltipSetPosition.js

@@ -1,9 +1,12 @@
 import { L } from '../globals/L.js';
 import { tooltipPosition } from '../globals/tooltipPosition.js';
-
-
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
+/**
+ * Set this tooltip's position and apply the camera display offset.
+ *
+ * @param {L.Point} point Tooltip layer point.
+ */
 export function tooltipSetPosition(point) {
   tooltipPosition.value.call(this, point);
   const delta = displayPoint(this._map, point, this._latlng).subtract(point);

package/src/core/updateGridOpacity.js

@@ -1,7 +1,9 @@
 
 import { cancelGridFade } from '../animations/cancelGridFade.js';
 import { scheduleGridFade } from '../animations/scheduleGridFade.js';
+import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';
 
+/** Update this grid layer's GPU tile fades and schedule further frames when needed. */
 export function updateGridOpacity() {
   if (!this._map) return;
   const layer = this, now = Date.now();
@@ -24,4 +26,3 @@ export function updateGridOpacity() {
   cancelGridFade(layer);
   if (fading) scheduleGridFade(layer);
 }
-import { refreshNativeLayerContract } from '../native/refreshNativeLayerContract.js';

package/src/core/whenReady.js

@@ -1,11 +1,14 @@
 import { readyByLayer } from '../weakmaps/readyByLayer.js';
 import { cameraReadyByMap } from '../weakmaps/cameraReadyByMap.js';
 
-
-
-
-
-export function ready(instance) {
-  return readyByLayer.get(instance) ||
-    cameraReadyByMap.get(instance) || Promise.resolve(instance);
-}
+/**
+ * Get a layer or map's readiness promise, or resolve immediately if none is registered.
+ *
+ * @param {L.Layer|L.Map} instance Layer or map to inspect.
+ *
+ * @returns {Promise} Readiness promise.
+ */
+export function ready(instance) {
+  return readyByLayer.get(instance) ||
+    cameraReadyByMap.get(instance) || Promise.resolve(instance);
+}

package/src/geometry/README.md

@@ -0,0 +1,29 @@
+# Geometry
+
+[Source guide](../README.md) | [Project README](../../README.md)
+
+Builds mesh data for source features, terrain, native layers, models and traffic.
+Geometry routines use the dedicated projection and triangulation modules.
+
+## Feature geometry pipeline
+
+```mermaid
+flowchart LR
+  Feature["Styled + projected features"] --> Jobs["Area geometry jobs"]
+  Jobs --> Assemble["Worker assembly"]
+  Assemble --> Buffers["Typed attributes + bounds"]
+  Assemble --> Ranges["Feature face ranges"]
+  Ranges --> Picking["Picking"]
+  Parts["Procedural part tuples"] --> Build["buildGeometryParts"]
+  Build --> Arrays["Position / normal / color arrays"]
+```
+
+Half-open ranges identify features without one mesh per triangle; instancing
+is used where suitable. Polygon triangulation lives in
+[triangulation](../triangulation/README.md); native paths use a separate path.
+
+- [assembleAreaGeometry.js](./assembleAreaGeometry.js): assemble source area geometry.
+- [computeBounds.js](./computeBounds.js): compute bounds and radius for geometry.
+- [nativeGeometry.js](./nativeGeometry.js): build geometry from native Leaflet paths.
+
+Related: [triangulation](../triangulation/README.md), [projections](../projections/README.md), [rendering](../rendering/README.md).

package/src/geometry/addBridges.js

@@ -3,32 +3,34 @@ import { bridgesByLayer } from '../weakmaps/bridgesByLayer.js';
 import { locationByLayer } from '../weakmaps/locationByLayer.js';
 import { rootByLayer } from '../weakmaps/rootByLayer.js';
 import { terrainZoomByLayer } from '../weakmaps/terrainZoomByLayer.js';
+import { radians } from '../globals/radians.js';
+import { createMesh } from '../rendering/createMesh.js';
+import { bridgePolygon } from './bridgePolygon.js';
 
-import { radians } from '../globals/radians.js';
-import { createMesh } from '../rendering/createMesh.js';
-import { bridgePolygon } from './bridgePolygon.js';
-
-/**
- * Bare-earth DEMs drop bridges: `getElevation` returns the deck height inside these polygons (GeoJSON
- * Polygon/MultiPolygon with Z, e.g. IGN BD TOPO), and one mesh draws the 1.2 m thick decks.
- * ponytail: anything under a deck (quays, boats asking `getElevation`) also gets the deck height.
- */
-export function addBridges(layer, geojson) {
-  const map = layer._map, crs = map.options.crs, zoom = terrainZoomByLayer.get(layer);
-  const origin = crs.project(locationByLayer.get(layer)), metres = Math.cos(locationByLayer.get(layer).lat * radians);
-  const base = rootByLayer.get(layer).position[1];
-  const position = /* alloc */ [], normal = /* alloc */ [], color = /* alloc */ [];
-  bridgesByLayer.set(layer, /* alloc */ new Map());
-  const context = /* alloc */ { backend: layer, map, crs, zoom, origin, metres, base, position, normal, color };
-  let geometry, polygons, polygonIndex;
-  for ({ geometry } of geojson.features) {
-    if (geometry.type !== 'Polygon' && geometry.type !== 'MultiPolygon') continue;
-    polygons = geometry.coordinates;
-    for (polygonIndex = 0; polygonIndex < (geometry.type === 'Polygon' ? 1 : polygons.length); polygonIndex++) {
-      bridgePolygon(context, geometry.type === 'Polygon' ? polygons : polygons[polygonIndex]);
-    }
-  }
-  if (position.length) {
-    bridgeMeshByLayer.set(layer, createMesh(layer, /* alloc */ { position, normal, color }));
-  }
-}
+/**
+ * Bare-earth DEMs drop bridges: `getElevation` returns the deck height inside these polygons (GeoJSON
+ * Polygon/MultiPolygon with Z, e.g. IGN BD TOPO), and one mesh draws the 1.2 m thick decks.
+ * ponytail: anything under a deck (quays, boats asking `getElevation`) also gets the deck height.
+ *
+ * @param {L.Layer} layer Terrain layer owning bridge geometry.
+ * @param {Object} geojson Feature collection of bridge polygons.
+ */
+export function addBridges(layer, geojson) {
+  const map = layer._map, crs = map.options.crs, zoom = terrainZoomByLayer.get(layer);
+  const origin = crs.project(locationByLayer.get(layer)), metres = Math.cos(locationByLayer.get(layer).lat * radians);
+  const base = rootByLayer.get(layer).position[1];
+  const position = /* alloc */ [], normal = /* alloc */ [], color = /* alloc */ [];
+  bridgesByLayer.set(layer, /* alloc */ new Map());
+  const context = /* alloc */ { backend: layer, map, crs, zoom, origin, metres, base, position, normal, color };
+  let geometry, polygons, polygonIndex;
+  for ({ geometry } of geojson.features) {
+    if (geometry.type !== 'Polygon' && geometry.type !== 'MultiPolygon') continue;
+    polygons = geometry.coordinates;
+    for (polygonIndex = 0; polygonIndex < (geometry.type === 'Polygon' ? 1 : polygons.length); polygonIndex++) {
+      bridgePolygon(context, geometry.type === 'Polygon' ? polygons : polygons[polygonIndex]);
+    }
+  }
+  if (position.length) {
+    bridgeMeshByLayer.set(layer, createMesh(layer, /* alloc */ { position, normal, color }));
+  }
+}

package/src/geometry/addGeneratedTriangle.js

@@ -1,7 +1,11 @@
 import { triangleContexts } from '../globals/triangleContexts.js';
-
 import { addTriangle } from './appendAreaTriangle.js';
 
-export function addGeneratedTriangle(...args) {
-  addTriangle(triangleContexts[triangleContexts.length - 1], ...args);
+/**
+ * Append a generated triangle to the current geometry context.
+ *
+ * @param {...*} args Triangle vertices, heights, normal and color.
+ */
+export function addGeneratedTriangle(...args) {
+  addTriangle(triangleContexts[triangleContexts.length - 1], ...args);
 }

package/src/geometry/appendAreaTriangle.js

@@ -1,17 +1,32 @@
-import { groundOffset } from '../sources/groundOffset.js';
-
-export function addTriangle(context, a, ah, b, bh, c, ch, nx, ny, nz, color) {
-  const { backend: layer, positions, normals, colors, uvs } = context;
-  const ux = b.x - a.x, uy = bh - ah, uz = a.y - b.y;
-  const vx = c.x - a.x, vy = ch - ah, vz = a.y - c.y;
-  if ((uy * vz - uz * vy) * nx + (uz * vx - ux * vz) * ny + (ux * vy - uy * vx) * nz < 0) {
-    const point = b, height = bh;
-    b = c; bh = ch; c = point; ch = height;
-  }
-  positions.push(a.x, ah + groundOffset(a), -a.y,
-    b.x, bh + groundOffset(b), -b.y,
-    c.x, ch + groundOffset(c), -c.y);
-  normals.push(nx, ny, nz, nx, ny, nz, nx, ny, nz);
-  colors.push(color.r, color.g, color.b, color.r, color.g, color.b, color.r, color.g, color.b);
-  if (layer.options.nightLight) uvs.push(...a.uv, ...b.uv, ...c.uv);
-}
+import { groundOffset } from '../sources/groundOffset.js';
+
+/**
+ * Append an oriented triangle and its normals, colors and optional UVs to an area.
+ *
+ * @param {Object} context Area geometry buffers and options.
+ * @param {Object} a First projected vertex.
+ * @param {number} ah First vertex height.
+ * @param {Object} b Second projected vertex.
+ * @param {number} bh Second vertex height.
+ * @param {Object} c Third projected vertex.
+ * @param {number} ch Third vertex height.
+ * @param {number} nx Normal x component.
+ * @param {number} ny Normal y component.
+ * @param {number} nz Normal z component.
+ * @param {Object} color RGB color.
+ */
+export function addTriangle(context, a, ah, b, bh, c, ch, nx, ny, nz, color) {
+  const { backend: layer, positions, normals, colors, uvs } = context;
+  const ux = b.x - a.x, uy = bh - ah, uz = a.y - b.y;
+  const vx = c.x - a.x, vy = ch - ah, vz = a.y - c.y;
+  if ((uy * vz - uz * vy) * nx + (uz * vx - ux * vz) * ny + (ux * vy - uy * vx) * nz < 0) {
+    const point = b, height = bh;
+    b = c; bh = ch; c = point; ch = height;
+  }
+  positions.push(a.x, ah + groundOffset(a), -a.y,
+    b.x, bh + groundOffset(b), -b.y,
+    c.x, ch + groundOffset(c), -c.y);
+  normals.push(nx, ny, nz, nx, ny, nz, nx, ny, nz);
+  colors.push(color.r, color.g, color.b, color.r, color.g, color.b, color.r, color.g, color.b);
+  if (layer.options.nightLight) uvs.push(...a.uv, ...b.uv, ...c.uv);
+}

package/src/geometry/appendNativeTriangle.js

@@ -1,3 +1,17 @@
-export function triangle(point, target, a, b, c, anchorA, anchorB, anchorC) {
-  return target.push(...point(a, anchorA), ...point(b, anchorB), ...point(c, anchorC));
-}
+/**
+ * Project three native vertices and append them to a destination array.
+ *
+ * @param {Function} point Vertex projection function.
+ * @param {Array<number>} target Destination array.
+ * @param {L.Point} a First vertex.
+ * @param {L.Point} b Second vertex.
+ * @param {L.Point} c Third vertex.
+ * @param {L.Point} [anchorA] First vertex anchor.
+ * @param {L.Point} [anchorB] Second vertex anchor.
+ * @param {L.Point} [anchorC] Third vertex anchor.
+ *
+ * @returns {number} New destination length.
+ */
+export function triangle(point, target, a, b, c, anchorA, anchorB, anchorC) {
+  return target.push(...point(a, anchorA), ...point(b, anchorB), ...point(c, anchorC));
+}

package/src/geometry/appendRouteDash.js

@@ -1,15 +1,33 @@
-export function appendRouteDash(position, normal, color, a, b, dx, dz, x, z, start, end, r, g, blue) {
-  const px = a[0] + dx * start, pz = a[1] + dz * start;
-  const py = a[2] + (b[2] - a[2]) * start + 0.4;
-  const qx = a[0] + dx * end, qz = a[1] + dz * end;
-  const qy = a[2] + (b[2] - a[2]) * end + 0.4;
-  let vertex;
-  for (vertex = 0; vertex < 6; vertex++) {
-    if (vertex === 0 || vertex === 3) position.push(px - x, py, pz - z);
-    else if (vertex === 1) position.push(px + x, py, pz + z);
-    else if (vertex === 5) position.push(qx - x, qy, qz - z);
-    else position.push(qx + x, qy, qz + z);
-    normal.push(0, 1, 0);
-    color.push(r, g, blue);
-  }
-}
+/**
+ * Append a raised route dash as two colored triangles.
+ *
+ * @param {Array<number>} position Destination positions.
+ * @param {Array<number>} normal Destination normals.
+ * @param {Array<number>} color Destination colors.
+ * @param {Array<number>} a Segment start.
+ * @param {Array<number>} b Segment end.
+ * @param {number} dx Segment x displacement.
+ * @param {number} dz Segment z displacement.
+ * @param {number} x Dash half-width x offset.
+ * @param {number} z Dash half-width z offset.
+ * @param {number} start Start fraction along the segment.
+ * @param {number} end End fraction along the segment.
+ * @param {number} r Red component.
+ * @param {number} g Green component.
+ * @param {number} blue Blue component.
+ */
+export function appendRouteDash(position, normal, color, a, b, dx, dz, x, z, start, end, r, g, blue) {
+  const px = a[0] + dx * start, pz = a[1] + dz * start;
+  const py = a[2] + (b[2] - a[2]) * start + 0.4;
+  const qx = a[0] + dx * end, qz = a[1] + dz * end;
+  const qy = a[2] + (b[2] - a[2]) * end + 0.4;
+  let vertex;
+  for (vertex = 0; vertex < 6; vertex++) {
+    if (vertex === 0 || vertex === 3) position.push(px - x, py, pz - z);
+    else if (vertex === 1) position.push(px + x, py, pz + z);
+    else if (vertex === 5) position.push(qx - x, qy, qz - z);
+    else position.push(qx + x, qy, qz + z);
+    normal.push(0, 1, 0);
+    color.push(r, g, blue);
+  }
+}