map-utils

1import * as turf from "@turf/turf";
2import type { CSSProperties } from "react";
3import type { Feature, FeatureCollection, LineString, Point } from "geojson";
4import type { Map } from "maplibre-gl";
5import maplibregl from "maplibre-gl";
6 
7export type LngLat = [number, number];
8 
9/** Dark basemap aligned with RemotionUI demo palette */
10export const DEFAULT_MAP_STYLE =
11  "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
12 
13export const MAP_THEME = {
14  background: "#080810",
15  route: "#2dd4bf",
16  routeGlow: "rgba(45, 212, 191, 0.42)",
17  routeHead: "#f8fafc",
18  marker: "#e8b86d",
19  markerGlow: "rgba(232, 184, 109, 0.38)",
20  label: "#f8fafc",
21  labelHalo: "#080810",
22  vignette: "rgba(8, 8, 16, 0.55)",
23} as const;
24 
25export const DEMO_ROUTE: { from: LngLat; to: LngLat } = {
26  from: [8.5417, 47.3769],
27  to: [-74.006, 40.7128],
28};
29 
30export const DEMO_MARKERS: Array<{ position: LngLat; name: string }> = [
31  { position: DEMO_ROUTE.from, name: "Zurich" },
32  { position: [-0.1276, 51.5074], name: "London" },
33  { position: DEMO_ROUTE.to, name: "New York" },
34];
35 
36export function clampProgress(progress: number) {
37  return Math.min(1, Math.max(0, progress));
38}
39 
40export function distanceAlong(totalDistance: number, progress: number) {
41  return Math.max(0.001, totalDistance * clampProgress(progress));
42}
43 
44export function greatCircleLine(from: LngLat, to: LngLat) {
45  const route = turf.greatCircle(from, to, { npoints: 120 });
46 
47  if (route.geometry.type === "LineString") {
48    return turf.lineString(route.geometry.coordinates);
49  }
50 
51  const longestSegment = route.geometry.coordinates.reduce((longest, segment) =>
52    segment.length > longest.length ? segment : longest,
53  );
54 
55  return turf.lineString(longestSegment);
56}
57 
58export function sliceRouteByProgress(
59  line: Feature<LineString>,
60  progress: number,
61) {
62  const totalDistance = turf.length(line);
63  return turf.lineSliceAlong(
64    line,
65    0,
66    distanceAlong(totalDistance, progress),
67  );
68}
69 
70export function pointAlongRoute(line: Feature<LineString>, progress: number) {
71  const totalDistance = turf.length(line);
72  return turf.along(line, distanceAlong(totalDistance, progress)).geometry
73    .coordinates as LngLat;
74}
75 
76export function createMarkerCollection(
77  markers: Array<{ position: LngLat; name: string }>,
78): FeatureCollection<Point> {
79  return turf.featureCollection(
80    markers.map((marker) =>
81      turf.point(marker.position, { name: marker.name }),
82    ),
83  );
84}
85 
86export function getCameraOptions(
87  map: Map,
88// … truncated