@trackunit/react-map-adapter-shared 0.0.11 → 0.0.16

package/index.cjs.js

@@ -762,6 +762,214 @@ const mercatorCenterFromBounds = (bounds) => {
     return [centerLon, centerLat];
 };
 
+// ============================================================================
+// Unit conversion
+// ============================================================================
+const toRad = (deg) => (deg * Math.PI) / 180;
+const toDeg = (rad) => (rad * 180) / Math.PI;
+// ============================================================================
+// Great-circle math  (sphere model — WGS-84 mean radius)
+// ============================================================================
+/**
+ * Haversine angular distance in radians between two lng/lat points.
+ * Returns a value in [0, π].
+ */
+const angularDistance = (lng1, lat1, lng2, lat2) => {
+    const φ1 = toRad(lat1);
+    const φ2 = toRad(lat2);
+    const Δφ = toRad(lat2 - lat1);
+    const Δλ = toRad(lng2 - lng1);
+    const a = Math.sin(Δφ / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) ** 2;
+    const clampedA = Math.max(0, Math.min(1, a));
+    return 2 * Math.atan2(Math.sqrt(clampedA), Math.sqrt(1 - clampedA));
+};
+/**
+ * Spherical-interpolation intermediate point at fraction `f` (0 = start, 1 = end)
+ * along the great-circle arc defined by `delta` (pre-computed angular distance).
+ *
+ * Formula: http://www.movable-type.co.uk/scripts/latlong.html#intermediate-point
+ *
+ * If `start` carries an altitude the result linearly interpolates it; otherwise
+ * the result is 2-D.
+ */
+const intermediatePoint = (start, end, f, delta) => {
+    const sinDelta = Math.sin(delta);
+    // Degenerate edge (co-located points) — return start unchanged.
+    if (sinDelta === 0)
+        return start;
+    const A = Math.sin((1 - f) * delta) / sinDelta;
+    const B = Math.sin(f * delta) / sinDelta;
+    const φ1 = toRad(start[1]);
+    const λ1 = toRad(start[0]);
+    const φ2 = toRad(end[1]);
+    const λ2 = toRad(end[0]);
+    const x = A * Math.cos(φ1) * Math.cos(λ1) + B * Math.cos(φ2) * Math.cos(λ2);
+    const y = A * Math.cos(φ1) * Math.sin(λ1) + B * Math.cos(φ2) * Math.sin(λ2);
+    const z = A * Math.sin(φ1) + B * Math.sin(φ2);
+    const lat = toDeg(Math.atan2(z, Math.sqrt(x * x + y * y)));
+    const lng = toDeg(Math.atan2(y, x));
+    if (start.length === 3 && end.length === 3) {
+        const alt = start[2] * (1 - f) + end[2] * f;
+        return [lng, lat, alt];
+    }
+    return [lng, lat];
+};
+
+// ============================================================================
+// Constants
+// ============================================================================
+const EARTH_RADIUS_KM = 6371;
+/**
+ * Default maximum arc-segment length used by {@link densifyGeodesicFeatures}.
+ *
+ * At 100 km, a 1 000 km polygon edge gets ~10 intermediate points — enough
+ * for a visually smooth great-circle curve at any map zoom level. Reduce only
+ * if you need sub-100 km accuracy for very large polygons near the poles.
+ */
+const GEODESIC_MAX_SEGMENT_KM = 100;
+// ============================================================================
+// Ring / coordinate-array densification
+// ============================================================================
+/**
+ * Densify an array of positions (polygon ring or line-string coordinates) by
+ * inserting great-circle intermediate points wherever an edge exceeds
+ * `maxSegmentKm`.
+ *
+ * The result preserves the first and last positions exactly (no floating-point
+ * re-computation of the original vertices). Edges shorter than `maxSegmentKm`
+ * are left untouched — for typical urban-scale site polygons this is a no-op.
+ *
+ * Returns the **original array reference** when no intermediate points were
+ * inserted, enabling the caller to cheaply detect no-op cases via reference equality.
+ */
+const densifyPositions = (positions, maxSegmentKm) => {
+    if (positions.length < 2)
+        return positions;
+    let modified = false;
+    const result = [];
+    for (let i = 0; i < positions.length - 1; i++) {
+        const start = positions[i];
+        const end = positions[i + 1];
+        // start is always defined because i < positions.length - 1
+        if (start === undefined || end === undefined)
+            continue;
+        result.push(start);
+        const delta = angularDistance(start[0], start[1], end[0], end[1]);
+        const distKm = delta * EARTH_RADIUS_KM;
+        if (distKm > maxSegmentKm) {
+            modified = true;
+            const nSegments = Math.ceil(distKm / maxSegmentKm);
+            // Insert nSegments-1 intermediate points (the end point is added by the
+            // next iteration, or after the loop for the final edge).
+            for (let s = 1; s < nSegments; s++) {
+                result.push(intermediatePoint(start, end, s / nSegments, delta));
+            }
+        }
+    }
+    // Return the original reference when nothing was inserted — allows callers to
+    // detect no-ops via reference equality without allocating a new array.
+    if (!modified)
+        return positions;
+    // Always preserve the original last position exactly.
+    const last = positions[positions.length - 1];
+    if (last !== undefined)
+        result.push(last);
+    return result;
+};
+// ============================================================================
+// Feature-level densification
+// ============================================================================
+/**
+ * Densify all edge-bearing geometry types in a single GeoJSON feature.
+ * Point and MultiPoint features are returned unchanged.
+ */
+const densifyFeature = (feature, maxSegmentKm) => {
+    const { geometry } = feature;
+    if (geometry === null)
+        return feature;
+    switch (geometry.type) {
+        case "Point":
+        case "MultiPoint":
+            return feature;
+        case "LineString": {
+            const coords = densifyPositions(geometry.coordinates, maxSegmentKm);
+            if (coords === geometry.coordinates)
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: coords } };
+        }
+        case "MultiLineString": {
+            const lines = geometry.coordinates.map(line => densifyPositions(line, maxSegmentKm));
+            if (lines.every((line, i) => line === geometry.coordinates[i]))
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: lines } };
+        }
+        case "Polygon": {
+            const rings = geometry.coordinates.map(ring => densifyPositions(ring, maxSegmentKm));
+            if (rings.every((ring, i) => ring === geometry.coordinates[i]))
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: rings } };
+        }
+        case "MultiPolygon": {
+            const polygons = geometry.coordinates.map(polygon => polygon.map(ring => densifyPositions(ring, maxSegmentKm)));
+            if (polygons.every((polygon, pi) => polygon.every((ring, ri) => ring === geometry.coordinates[pi]?.[ri])))
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: polygons } };
+        }
+        default:
+            return feature;
+    }
+};
+// ============================================================================
+// Public API
+// ============================================================================
+/**
+ * Densify GeoJSON features by inserting great-circle intermediate points along
+ * polygon/line edges that exceed `maxSegmentKm`.
+ *
+ * This is the primary way to achieve geodesic rendering in adapters that lack
+ * native great-circle support (e.g. Mapbox GL). Adapters with native geodesic
+ * support (e.g. Google Maps via `geodesic: true` on `Polygon`/`Polyline`) do
+ * not need this function — they should apply the flag directly to their
+ * geometry objects instead.
+ *
+ * Geodesic eligibility is resolved per-feature:
+ * `featureStyles.get(id)?.geodesic ?? layerGeodesic ?? true`
+ *
+ * Features where geodesic resolves to `false` are passed through unchanged.
+ * Point and MultiPoint features are always passed through unchanged.
+ *
+ * The function returns the original collection reference when no feature is
+ * modified, avoiding unnecessary downstream work.
+ *
+ * Run this **before** `mergeAntimeridianFeatures` — antimeridian-merged
+ * polygons may carry longitudes outside `[-180, 180]`, which would corrupt
+ * the `atan2` result inside {@link intermediatePoint}.
+ *
+ * @param features - Source GeoJSON feature collection (RFC 7946, unmodified).
+ * @param layerGeodesic - Layer-level geodesic flag (default `true`).
+ * @param featureStyles - Per-feature style overrides; `geodesic` is read from each entry.
+ * @param maxSegmentKm - Maximum arc-segment length in kilometres. Default: {@link GEODESIC_MAX_SEGMENT_KM}.
+ */
+const densifyGeodesicFeatures = (features, layerGeodesic, featureStyles, maxSegmentKm = GEODESIC_MAX_SEGMENT_KM) => {
+    const densified = [];
+    let anyModified = false;
+    for (const feature of features.features) {
+        const featureId = feature.id !== undefined ? String(feature.id) : undefined;
+        const featureGeodesic = featureId !== undefined ? (featureStyles?.get(featureId)?.geodesic ?? layerGeodesic) : layerGeodesic;
+        if (!featureGeodesic) {
+            densified.push(feature);
+            continue;
+        }
+        const result = densifyFeature(feature, maxSegmentKm);
+        if (result !== feature)
+            anyModified = true;
+        densified.push(result);
+    }
+    if (!anyModified)
+        return features;
+    return { ...features, features: densified };
+};
+
 const isViewportLike = (value) => {
     return typeof value === "object" && value !== null && "type" in value;
 };
@@ -2314,26 +2522,6 @@ const attachSafeAreaHoverListeners = (el, onEnter, onLeave, state) => {
     });
 };
 
-// TODO (next PR): shapeStyleDefaults computes visual defaults for shapes — a map consumer
-// concern, not an adapter concern. Make these injectable from react-map's createMapComponent
-// so adapters don't need to know about default visual styles.
-const SHAPE_STYLE_DEFAULTS = {
-    polygon: {
-        fillOpacity: 0.05,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    line: {
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    point: {
-        fillOpacity: 0.2,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-        pointRadius: 5,
-    },
-};
 // ============================================================================
 // Interaction style constants
 // ============================================================================
@@ -2402,6 +2590,7 @@ exports.CIRCLE_SYMBOL_DEFAULT_OPACITY = CIRCLE_SYMBOL_DEFAULT_OPACITY;
 exports.DEFAULT_CENTER = DEFAULT_CENTER;
 exports.DEFAULT_MAP_APPEARANCE = DEFAULT_MAP_APPEARANCE;
 exports.DEFAULT_ZOOM = DEFAULT_ZOOM;
+exports.GEODESIC_MAX_SEGMENT_KM = GEODESIC_MAX_SEGMENT_KM;
 exports.HIT_SURFACE_SELECTOR = HIT_SURFACE_SELECTOR;
 exports.INITIAL_CAMERA_STATE = INITIAL_CAMERA_STATE;
 exports.INITIAL_INTERACTION_STATE = INITIAL_INTERACTION_STATE;
@@ -2414,10 +2603,10 @@ exports.MAP_CURSORS = MAP_CURSORS;
 exports.MAX_ZOOM = MAX_ZOOM;
 exports.MIN_ZOOM = MIN_ZOOM;
 exports.SAFE_AREA_DEFAULT_BUFFER_PX = SAFE_AREA_DEFAULT_BUFFER_PX;
-exports.SHAPE_STYLE_DEFAULTS = SHAPE_STYLE_DEFAULTS;
 exports.WORLD_BBOX = WORLD_BBOX;
 exports.allocSafeAreaDebugId = allocSafeAreaDebugId;
 exports.anchorFromBottomCenter = anchorFromBottomCenter;
+exports.angularDistance = angularDistance;
 exports.attachSafeAreaHoverListeners = attachSafeAreaHoverListeners;
 exports.bboxEquals = bboxEquals;
 exports.bufferRectCorners = bufferRectCorners;
@@ -2439,6 +2628,7 @@ exports.createDefaultClusterElement = createDefaultClusterElement;
 exports.createSymbolDotElement = createSymbolDotElement;
 exports.darkenColor = darkenColor;
 exports.defineAdapter = defineAdapter;
+exports.densifyGeodesicFeatures = densifyGeodesicFeatures;
 exports.disableSafeAreaDebug = disableSafeAreaDebug;
 exports.discriminateRenderResult = discriminateRenderResult;
 exports.enableSafeAreaDebug = enableSafeAreaDebug;
@@ -2455,6 +2645,7 @@ exports.getAnchorRect = getAnchorRect;
 exports.getEffectiveRestrictBounds = getEffectiveRestrictBounds;
 exports.getHitSurfaceRect = getHitSurfaceRect;
 exports.hasSameFeatureIds = hasSameFeatureIds;
+exports.intermediatePoint = intermediatePoint;
 exports.isCanvasMarkerMode = isCanvasMarkerMode;
 exports.isEventOfType = isEventOfType;
 exports.isSafeAreaDebugEnabled = isSafeAreaDebugEnabled;
@@ -2477,5 +2668,7 @@ exports.resolveSelectedStyle = resolveSelectedStyle;
 exports.resolveStrokeColors = resolveStrokeColors;
 exports.resolveSymbolDescriptor = resolveSymbolDescriptor;
 exports.safePolygon = safePolygon;
+exports.toDeg = toDeg;
+exports.toRad = toRad;
 exports.validateInitialViewport = validateInitialViewport;
 exports.watchSafeAreaLeave = watchSafeAreaLeave;

package/index.esm.js

@@ -760,6 +760,214 @@ const mercatorCenterFromBounds = (bounds) => {
     return [centerLon, centerLat];
 };
 
+// ============================================================================
+// Unit conversion
+// ============================================================================
+const toRad = (deg) => (deg * Math.PI) / 180;
+const toDeg = (rad) => (rad * 180) / Math.PI;
+// ============================================================================
+// Great-circle math  (sphere model — WGS-84 mean radius)
+// ============================================================================
+/**
+ * Haversine angular distance in radians between two lng/lat points.
+ * Returns a value in [0, π].
+ */
+const angularDistance = (lng1, lat1, lng2, lat2) => {
+    const φ1 = toRad(lat1);
+    const φ2 = toRad(lat2);
+    const Δφ = toRad(lat2 - lat1);
+    const Δλ = toRad(lng2 - lng1);
+    const a = Math.sin(Δφ / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) ** 2;
+    const clampedA = Math.max(0, Math.min(1, a));
+    return 2 * Math.atan2(Math.sqrt(clampedA), Math.sqrt(1 - clampedA));
+};
+/**
+ * Spherical-interpolation intermediate point at fraction `f` (0 = start, 1 = end)
+ * along the great-circle arc defined by `delta` (pre-computed angular distance).
+ *
+ * Formula: http://www.movable-type.co.uk/scripts/latlong.html#intermediate-point
+ *
+ * If `start` carries an altitude the result linearly interpolates it; otherwise
+ * the result is 2-D.
+ */
+const intermediatePoint = (start, end, f, delta) => {
+    const sinDelta = Math.sin(delta);
+    // Degenerate edge (co-located points) — return start unchanged.
+    if (sinDelta === 0)
+        return start;
+    const A = Math.sin((1 - f) * delta) / sinDelta;
+    const B = Math.sin(f * delta) / sinDelta;
+    const φ1 = toRad(start[1]);
+    const λ1 = toRad(start[0]);
+    const φ2 = toRad(end[1]);
+    const λ2 = toRad(end[0]);
+    const x = A * Math.cos(φ1) * Math.cos(λ1) + B * Math.cos(φ2) * Math.cos(λ2);
+    const y = A * Math.cos(φ1) * Math.sin(λ1) + B * Math.cos(φ2) * Math.sin(λ2);
+    const z = A * Math.sin(φ1) + B * Math.sin(φ2);
+    const lat = toDeg(Math.atan2(z, Math.sqrt(x * x + y * y)));
+    const lng = toDeg(Math.atan2(y, x));
+    if (start.length === 3 && end.length === 3) {
+        const alt = start[2] * (1 - f) + end[2] * f;
+        return [lng, lat, alt];
+    }
+    return [lng, lat];
+};
+
+// ============================================================================
+// Constants
+// ============================================================================
+const EARTH_RADIUS_KM = 6371;
+/**
+ * Default maximum arc-segment length used by {@link densifyGeodesicFeatures}.
+ *
+ * At 100 km, a 1 000 km polygon edge gets ~10 intermediate points — enough
+ * for a visually smooth great-circle curve at any map zoom level. Reduce only
+ * if you need sub-100 km accuracy for very large polygons near the poles.
+ */
+const GEODESIC_MAX_SEGMENT_KM = 100;
+// ============================================================================
+// Ring / coordinate-array densification
+// ============================================================================
+/**
+ * Densify an array of positions (polygon ring or line-string coordinates) by
+ * inserting great-circle intermediate points wherever an edge exceeds
+ * `maxSegmentKm`.
+ *
+ * The result preserves the first and last positions exactly (no floating-point
+ * re-computation of the original vertices). Edges shorter than `maxSegmentKm`
+ * are left untouched — for typical urban-scale site polygons this is a no-op.
+ *
+ * Returns the **original array reference** when no intermediate points were
+ * inserted, enabling the caller to cheaply detect no-op cases via reference equality.
+ */
+const densifyPositions = (positions, maxSegmentKm) => {
+    if (positions.length < 2)
+        return positions;
+    let modified = false;
+    const result = [];
+    for (let i = 0; i < positions.length - 1; i++) {
+        const start = positions[i];
+        const end = positions[i + 1];
+        // start is always defined because i < positions.length - 1
+        if (start === undefined || end === undefined)
+            continue;
+        result.push(start);
+        const delta = angularDistance(start[0], start[1], end[0], end[1]);
+        const distKm = delta * EARTH_RADIUS_KM;
+        if (distKm > maxSegmentKm) {
+            modified = true;
+            const nSegments = Math.ceil(distKm / maxSegmentKm);
+            // Insert nSegments-1 intermediate points (the end point is added by the
+            // next iteration, or after the loop for the final edge).
+            for (let s = 1; s < nSegments; s++) {
+                result.push(intermediatePoint(start, end, s / nSegments, delta));
+            }
+        }
+    }
+    // Return the original reference when nothing was inserted — allows callers to
+    // detect no-ops via reference equality without allocating a new array.
+    if (!modified)
+        return positions;
+    // Always preserve the original last position exactly.
+    const last = positions[positions.length - 1];
+    if (last !== undefined)
+        result.push(last);
+    return result;
+};
+// ============================================================================
+// Feature-level densification
+// ============================================================================
+/**
+ * Densify all edge-bearing geometry types in a single GeoJSON feature.
+ * Point and MultiPoint features are returned unchanged.
+ */
+const densifyFeature = (feature, maxSegmentKm) => {
+    const { geometry } = feature;
+    if (geometry === null)
+        return feature;
+    switch (geometry.type) {
+        case "Point":
+        case "MultiPoint":
+            return feature;
+        case "LineString": {
+            const coords = densifyPositions(geometry.coordinates, maxSegmentKm);
+            if (coords === geometry.coordinates)
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: coords } };
+        }
+        case "MultiLineString": {
+            const lines = geometry.coordinates.map(line => densifyPositions(line, maxSegmentKm));
+            if (lines.every((line, i) => line === geometry.coordinates[i]))
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: lines } };
+        }
+        case "Polygon": {
+            const rings = geometry.coordinates.map(ring => densifyPositions(ring, maxSegmentKm));
+            if (rings.every((ring, i) => ring === geometry.coordinates[i]))
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: rings } };
+        }
+        case "MultiPolygon": {
+            const polygons = geometry.coordinates.map(polygon => polygon.map(ring => densifyPositions(ring, maxSegmentKm)));
+            if (polygons.every((polygon, pi) => polygon.every((ring, ri) => ring === geometry.coordinates[pi]?.[ri])))
+                return feature;
+            return { ...feature, geometry: { ...geometry, coordinates: polygons } };
+        }
+        default:
+            return feature;
+    }
+};
+// ============================================================================
+// Public API
+// ============================================================================
+/**
+ * Densify GeoJSON features by inserting great-circle intermediate points along
+ * polygon/line edges that exceed `maxSegmentKm`.
+ *
+ * This is the primary way to achieve geodesic rendering in adapters that lack
+ * native great-circle support (e.g. Mapbox GL). Adapters with native geodesic
+ * support (e.g. Google Maps via `geodesic: true` on `Polygon`/`Polyline`) do
+ * not need this function — they should apply the flag directly to their
+ * geometry objects instead.
+ *
+ * Geodesic eligibility is resolved per-feature:
+ * `featureStyles.get(id)?.geodesic ?? layerGeodesic ?? true`
+ *
+ * Features where geodesic resolves to `false` are passed through unchanged.
+ * Point and MultiPoint features are always passed through unchanged.
+ *
+ * The function returns the original collection reference when no feature is
+ * modified, avoiding unnecessary downstream work.
+ *
+ * Run this **before** `mergeAntimeridianFeatures` — antimeridian-merged
+ * polygons may carry longitudes outside `[-180, 180]`, which would corrupt
+ * the `atan2` result inside {@link intermediatePoint}.
+ *
+ * @param features - Source GeoJSON feature collection (RFC 7946, unmodified).
+ * @param layerGeodesic - Layer-level geodesic flag (default `true`).
+ * @param featureStyles - Per-feature style overrides; `geodesic` is read from each entry.
+ * @param maxSegmentKm - Maximum arc-segment length in kilometres. Default: {@link GEODESIC_MAX_SEGMENT_KM}.
+ */
+const densifyGeodesicFeatures = (features, layerGeodesic, featureStyles, maxSegmentKm = GEODESIC_MAX_SEGMENT_KM) => {
+    const densified = [];
+    let anyModified = false;
+    for (const feature of features.features) {
+        const featureId = feature.id !== undefined ? String(feature.id) : undefined;
+        const featureGeodesic = featureId !== undefined ? (featureStyles?.get(featureId)?.geodesic ?? layerGeodesic) : layerGeodesic;
+        if (!featureGeodesic) {
+            densified.push(feature);
+            continue;
+        }
+        const result = densifyFeature(feature, maxSegmentKm);
+        if (result !== feature)
+            anyModified = true;
+        densified.push(result);
+    }
+    if (!anyModified)
+        return features;
+    return { ...features, features: densified };
+};
+
 const isViewportLike = (value) => {
     return typeof value === "object" && value !== null && "type" in value;
 };
@@ -2312,26 +2520,6 @@ const attachSafeAreaHoverListeners = (el, onEnter, onLeave, state) => {
     });
 };
 
-// TODO (next PR): shapeStyleDefaults computes visual defaults for shapes — a map consumer
-// concern, not an adapter concern. Make these injectable from react-map's createMapComponent
-// so adapters don't need to know about default visual styles.
-const SHAPE_STYLE_DEFAULTS = {
-    polygon: {
-        fillOpacity: 0.05,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    line: {
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    point: {
-        fillOpacity: 0.2,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-        pointRadius: 5,
-    },
-};
 // ============================================================================
 // Interaction style constants
 // ============================================================================
@@ -2394,4 +2582,4 @@ const resolveStrokeColors = (style, shapeType, theme) => {
     };
 };
 
-export { ANCHOR_SELECTOR, CIRCLE_SYMBOL_DEFAULT_DIAMETER_PX, CIRCLE_SYMBOL_DEFAULT_OPACITY, DEFAULT_CENTER, DEFAULT_MAP_APPEARANCE, DEFAULT_ZOOM, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD_ZOOM_AMOUNT, LAYER_FADE_DURATION_MS, MAP_CURSORS, MAX_ZOOM, MIN_ZOOM, SAFE_AREA_DEFAULT_BUFFER_PX, SHAPE_STYLE_DEFAULTS, WORLD_BBOX, allocSafeAreaDebugId, anchorFromBottomCenter, attachSafeAreaHoverListeners, bboxEquals, bufferRectCorners, buildAdaptiveDomEntries, buildAdaptiveDomRenderFn, buildAdaptiveSymbolStyleFn, cameraStateEquals, canPatchAdaptiveMarker, canPatchAdaptiveViewport, canPatchMarkerInPlace, clearSafeArea, collectFeatureIdSet, colorWithOpacity, computeInitialState, computeMarkerDomPortalZIndex, convexHull, createClusterPinElement, createDefaultClusterElement, createSymbolDotElement, darkenColor, defineAdapter, disableSafeAreaDebug, discriminateRenderResult, enableSafeAreaDebug, estimateZoomFromBounds, extractLineCoordinates, extractPointCoordinates, extractPolygonPaths, extractSourceData, fadeInElement, filterRectsByCursorDirection, geometryTypeToShapeType, getAdaptiveDomFeatureIds, getAnchorRect, getEffectiveRestrictBounds, getHitSurfaceRect, hasSameFeatureIds, isCanvasMarkerMode, isEventOfType, isSafeAreaDebugEnabled, lightenColor, mapAppearanceSchema, mapStateEquals, mapThemeSchema, mapTypeSchema, mercatorCenterFromBounds, mergeAntimeridianFeatures, mixColor, patchPortalDescriptors, pointInPolygon, removeGoneIndexedMarkers, renderSafeArea, resetColorUtilsForTesting, resolveCircleSymbolDefaults, resolveHoveredStyle, resolveSelectedStyle, resolveStrokeColors, resolveSymbolDescriptor, safePolygon, validateInitialViewport, watchSafeAreaLeave };
+export { ANCHOR_SELECTOR, CIRCLE_SYMBOL_DEFAULT_DIAMETER_PX, CIRCLE_SYMBOL_DEFAULT_OPACITY, DEFAULT_CENTER, DEFAULT_MAP_APPEARANCE, DEFAULT_ZOOM, GEODESIC_MAX_SEGMENT_KM, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD_ZOOM_AMOUNT, LAYER_FADE_DURATION_MS, MAP_CURSORS, MAX_ZOOM, MIN_ZOOM, SAFE_AREA_DEFAULT_BUFFER_PX, WORLD_BBOX, allocSafeAreaDebugId, anchorFromBottomCenter, angularDistance, attachSafeAreaHoverListeners, bboxEquals, bufferRectCorners, buildAdaptiveDomEntries, buildAdaptiveDomRenderFn, buildAdaptiveSymbolStyleFn, cameraStateEquals, canPatchAdaptiveMarker, canPatchAdaptiveViewport, canPatchMarkerInPlace, clearSafeArea, collectFeatureIdSet, colorWithOpacity, computeInitialState, computeMarkerDomPortalZIndex, convexHull, createClusterPinElement, createDefaultClusterElement, createSymbolDotElement, darkenColor, defineAdapter, densifyGeodesicFeatures, disableSafeAreaDebug, discriminateRenderResult, enableSafeAreaDebug, estimateZoomFromBounds, extractLineCoordinates, extractPointCoordinates, extractPolygonPaths, extractSourceData, fadeInElement, filterRectsByCursorDirection, geometryTypeToShapeType, getAdaptiveDomFeatureIds, getAnchorRect, getEffectiveRestrictBounds, getHitSurfaceRect, hasSameFeatureIds, intermediatePoint, isCanvasMarkerMode, isEventOfType, isSafeAreaDebugEnabled, lightenColor, mapAppearanceSchema, mapStateEquals, mapThemeSchema, mapTypeSchema, mercatorCenterFromBounds, mergeAntimeridianFeatures, mixColor, patchPortalDescriptors, pointInPolygon, removeGoneIndexedMarkers, renderSafeArea, resetColorUtilsForTesting, resolveCircleSymbolDefaults, resolveHoveredStyle, resolveSelectedStyle, resolveStrokeColors, resolveSymbolDescriptor, safePolygon, toDeg, toRad, validateInitialViewport, watchSafeAreaLeave };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trackunit/react-map-adapter-shared",
-  "version": "0.0.11",
+  "version": "0.0.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/geo-json-utils": "1.14.32",
-    "@trackunit/ui-design-tokens": "1.13.30",
+    "@trackunit/geo-json-utils": "1.14.35",
+    "@trackunit/ui-design-tokens": "1.13.32",
     "es-toolkit": "^1.39.10",
     "zod": "^3.25.76"
   },

package/src/LayerPort.d.ts

@@ -1,5 +1,6 @@
 import type { GeoJsonBbox } from "@trackunit/geo-json-utils";
 import type { Entity } from "./interactionTypes";
+import type { ShapeStyleDefaults } from "./shapeStyleDefaults";
 import type { AdaptiveMarkerResolution, ClusterConfig, ClusterRenderConfig, ClusterRenderState, DomRenderState, GeoJsonFeatureCollection, GeoJsonGeometry, RenderConfig, RouteStyle, ShapeInteractiveMode, ShapeStyle } from "./layerApiTypes";
 type ReactNode = import("react").ReactNode;
 /**
@@ -231,6 +232,13 @@ export type LayerPort = Readonly<{
      * @returns Unsubscribe function.
      */
     onSourceReady: (configId: string, callback: () => void) => () => void;
+    /**
+     * Injects the per-shape-type visual defaults from the map consumer.
+     *
+     * Called by `createMapComponent` before any snapshot is sent, so adapters
+     * always receive the consumer-owned defaults rather than hard-coding them.
+     */
+    setShapeStyleDefaults: (defaults: ShapeStyleDefaults) => void;
     /**
      * Subscription for DOM-rendered individual markers (including adaptive DOM
      * features). `<Layers>` routes these descriptors to `markerRender`.

package/src/geodesicDensify.d.ts

@@ -0,0 +1,39 @@
+import type { GeoJsonFeatureCollection } from "@trackunit/geo-json-utils";
+import type { ShapeStyle } from "./layerApiTypes";
+/**
+ * Default maximum arc-segment length used by {@link densifyGeodesicFeatures}.
+ *
+ * At 100 km, a 1 000 km polygon edge gets ~10 intermediate points — enough
+ * for a visually smooth great-circle curve at any map zoom level. Reduce only
+ * if you need sub-100 km accuracy for very large polygons near the poles.
+ */
+export declare const GEODESIC_MAX_SEGMENT_KM = 100;
+/**
+ * Densify GeoJSON features by inserting great-circle intermediate points along
+ * polygon/line edges that exceed `maxSegmentKm`.
+ *
+ * This is the primary way to achieve geodesic rendering in adapters that lack
+ * native great-circle support (e.g. Mapbox GL). Adapters with native geodesic
+ * support (e.g. Google Maps via `geodesic: true` on `Polygon`/`Polyline`) do
+ * not need this function — they should apply the flag directly to their
+ * geometry objects instead.
+ *
+ * Geodesic eligibility is resolved per-feature:
+ * `featureStyles.get(id)?.geodesic ?? layerGeodesic ?? true`
+ *
+ * Features where geodesic resolves to `false` are passed through unchanged.
+ * Point and MultiPoint features are always passed through unchanged.
+ *
+ * The function returns the original collection reference when no feature is
+ * modified, avoiding unnecessary downstream work.
+ *
+ * Run this **before** `mergeAntimeridianFeatures` — antimeridian-merged
+ * polygons may carry longitudes outside `[-180, 180]`, which would corrupt
+ * the `atan2` result inside {@link intermediatePoint}.
+ *
+ * @param features - Source GeoJSON feature collection (RFC 7946, unmodified).
+ * @param layerGeodesic - Layer-level geodesic flag (default `true`).
+ * @param featureStyles - Per-feature style overrides; `geodesic` is read from each entry.
+ * @param maxSegmentKm - Maximum arc-segment length in kilometres. Default: {@link GEODESIC_MAX_SEGMENT_KM}.
+ */
+export declare const densifyGeodesicFeatures: (features: GeoJsonFeatureCollection, layerGeodesic: boolean, featureStyles: ReadonlyMap<string, ShapeStyle> | undefined, maxSegmentKm?: number) => GeoJsonFeatureCollection;

package/src/index.d.ts

@@ -2,6 +2,7 @@ export * from "./adapterContract";
 export * from "./antimeridianMerge";
 export * from "./colorUtils";
 export * from "./constants";
+export * from "./geodesicDensify";
 export * from "./initialViewportValidation";
 export * from "./interactionTypes";
 export * from "./layerApiTypes";
@@ -18,4 +19,5 @@ export * from "./safeArea/safeAreaDebug";
 export * from "./safeArea/safePolygon";
 export * from "./safeArea/watchSafeAreaLeave";
 export * from "./shapeStyleDefaults";
+export * from "./sphericalMath";
 export * from "./types";

package/src/layerApiTypes.d.ts

@@ -46,6 +46,26 @@ export type ShapeStyleOverrides = Readonly<{
 export interface ShapeStyle extends ShapeStyleOverrides {
     /** Radius of point features in pixels. Default: 5 */
     readonly pointRadius?: number;
+    /**
+     * Whether polygon/line edges follow great-circle arcs (geodesics) rather than
+     * rhumb lines between the given coordinates.
+     *
+     * This is a semantic property of the shape — both adapters honour it, but via
+     * different mechanisms:
+     *
+     * - **Google Maps adapter**: passes `geodesic: true` directly to
+     *   `google.maps.Polygon` / `Polyline` (native support).
+     * - **Mapbox adapter**: pre-processes the GeoJSON with `densifyGeodesicFeatures`,
+     *   inserting great-circle intermediate points before the data reaches the source.
+     *   Mapbox GL has no native geodesic option; densification is the workaround.
+     *
+     * Set to `false` for shapes whose edges are intentionally straight (e.g. a
+     * boundary defined as a rhumb line, or a small urban polygon where the
+     * difference is sub-pixel).
+     *
+     * Default: `true`
+     */
+    readonly geodesic?: boolean;
     /** Visual overrides applied when this shape is hovered */
     readonly hovered?: ShapeStyleOverrides;
     /** Visual overrides applied when this shape is selected */

package/src/shapeStyleDefaults.d.ts

@@ -1,23 +1,31 @@
-import type { MapTheme } from "./primitiveMapTypes";
 import type { ShapeType } from "./interactionTypes";
 import type { ShapeStyle, ShapeStyleOverrides } from "./layerApiTypes";
-export declare const SHAPE_STYLE_DEFAULTS: {
-    readonly polygon: {
-        readonly fillOpacity: 0.05;
-        readonly strokeWidth: 1;
-        readonly strokeOpacity: 1;
-    };
-    readonly line: {
-        readonly strokeWidth: 1;
-        readonly strokeOpacity: 1;
-    };
-    readonly point: {
-        readonly fillOpacity: 0.2;
-        readonly strokeWidth: 1;
-        readonly strokeOpacity: 1;
-        readonly pointRadius: 5;
-    };
-};
+import type { MapTheme } from "./primitiveMapTypes";
+/**
+ * Per-shape-type visual defaults injected by the map consumer via `createMapComponent`.
+ * Adapters receive these via `LayerPort.setShapeStyleDefaults` rather than importing
+ * hardcoded values directly.
+ *
+ * Each shape type exposes the required numeric fields adapters use as fallbacks so
+ * TypeScript can infer non-nullable numbers without extra guards.
+ */
+export type ShapeStyleDefaults = Readonly<{
+    polygon: Readonly<{
+        fillOpacity: number;
+        strokeWidth: number;
+        strokeOpacity: number;
+    }>;
+    line: Readonly<{
+        strokeWidth: number;
+        strokeOpacity: number;
+    }>;
+    point: Readonly<{
+        fillOpacity: number;
+        strokeWidth: number;
+        strokeOpacity: number;
+        pointRadius: number;
+    }>;
+}>;
 /**
  * Resolve the visual style for a hovered shape.
  *

package/src/sphericalMath.d.ts

@@ -0,0 +1,18 @@
+import type { GeoJsonPosition } from "@trackunit/geo-json-utils";
+export declare const toRad: (deg: number) => number;
+export declare const toDeg: (rad: number) => number;
+/**
+ * Haversine angular distance in radians between two lng/lat points.
+ * Returns a value in [0, π].
+ */
+export declare const angularDistance: (lng1: number, lat1: number, lng2: number, lat2: number) => number;
+/**
+ * Spherical-interpolation intermediate point at fraction `f` (0 = start, 1 = end)
+ * along the great-circle arc defined by `delta` (pre-computed angular distance).
+ *
+ * Formula: http://www.movable-type.co.uk/scripts/latlong.html#intermediate-point
+ *
+ * If `start` carries an altitude the result linearly interpolates it; otherwise
+ * the result is 2-D.
+ */
+export declare const intermediatePoint: (start: GeoJsonPosition, end: GeoJsonPosition, f: number, delta: number) => GeoJsonPosition;