@12-apps/routing 1.1.1 → 1.2.0

package/README.md

@@ -83,6 +83,8 @@ const { RouteMap } = createWebRouting({
 />;
 ```
 
+- `travelledParts` draws the solid line as separate strokes (a track with a
+  gap that must not be bridged by a straight line); it wins over `travelled`.
 - `maplibre-gl` is an optional peer dependency: install it in the web host.
   It is imported the first time a map mounts, so a page without a map never
   downloads it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/routing",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "sideEffects": false,
   "description": "Road routes through an ordered list of stops, with the routing service chosen by host configuration (openrouteservice, OSRM, Google Routes, or your own adapter) and a straight-line fallback when none answers, plus a MapLibre route map for web hosts that draws markers, stops, a planned and a travelled line.",

package/src/react/map-geometry.ts

@@ -80,3 +80,20 @@ export function addLines(map: MapLike, theme: RouteMapTheme): void {
 export function setLine(map: MapLike, id: string, positions: readonly Position[] | undefined): void {
   map.getSource(id)?.setData(lineFeature(positions ?? []));
 }
+
+/** Several strokes as one MultiLineString; a part under two points is dropped. */
+function partsFeature(parts: readonly (readonly Position[])[]) {
+  const coordinates = parts.filter((part) => part.length > 1).map((part) => part.map((p) => [p[0], p[1]]));
+  return { type: "Feature" as const, properties: {}, geometry: { type: "MultiLineString" as const, coordinates } };
+}
+
+/** The travelled line: its parts when given, else the one line. */
+export function setTravelled(
+  map: MapLike,
+  id: string,
+  line: readonly Position[] | undefined,
+  parts: readonly (readonly Position[])[] | undefined,
+): void {
+  if (parts) map.getSource(id)?.setData(partsFeature(parts));
+  else setLine(map, id, line);
+}

package/src/react/types.ts

@@ -66,6 +66,12 @@ export interface RouteMapProps {
   planned?: readonly Position[];
   /** The solid line, `[lng, lat][]`. */
   travelled?: readonly Position[];
+  /**
+   * The solid line in separate strokes, each `[lng, lat][]` — for a track with
+   * a gap that must not be bridged by a straight line. Wins over `travelled`
+   * when set; a part with fewer than two points draws nothing.
+   */
+  travelledParts?: readonly (readonly Position[])[];
   /** Overrides `theme.travelled` (a status colour). */
   travelledColor?: string;
   /** Change it to refit the viewport to everything drawn. */

package/src/react/use-overlays.ts

@@ -29,7 +29,7 @@ import type { LngLat } from "../core/types";
 
 import type { RouteMapCopy } from "./copy";
 import { groupElement, markerElement, PLACE_LIFT, placeElement, stopElement } from "./map-elements";
-import { boundsOf, groupMarkers, PLANNED_LAYER, pointsOf, setLine, TRAVELLED_LAYER } from "./map-geometry";
+import { boundsOf, groupMarkers, PLANNED_LAYER, pointsOf, setLine, setTravelled, TRAVELLED_LAYER } from "./map-geometry";
 import type { MarkerLike } from "./maplibre-types";
 import { placeTags, type Placed } from "./tag-placement";
 import type { MapHandle } from "./use-map";
@@ -208,9 +208,9 @@ export function useOverlaySync(ready: boolean, handle: Pick<MapHandle, "mapRef">
     const map = handle.mapRef.current;
     if (!ready || !map) return;
     setLine(map, PLANNED_LAYER, props.planned);
-    setLine(map, TRAVELLED_LAYER, props.travelled);
+    setTravelled(map, TRAVELLED_LAYER, props.travelled, props.travelledParts);
     map.setPaintProperty(TRAVELLED_LAYER, "line-color", props.travelledColor ?? theme.travelled);
-  }, [ready, props.planned, props.travelled, props.travelledColor]);
+  }, [ready, props.planned, props.travelled, props.travelledParts, props.travelledColor]);
 
   useEffect(() => {
     if (ready) overlays.draw();