@delacour/react-native-ui 0.2.0-alpha.20261015134956 → 0.2.0

package/src/components/map/map-geometry.ts

@@ -0,0 +1,153 @@
+import type { LngLat, LngLatBounds } from "./map.types";
+
+/**
+ * A tile's edge in points. MapLibre lays the world out on 512-point tiles, so
+ * at zoom `z` the world is `512 × 2^z` points across — the same scale as every
+ * web map, which is what lets a zoom copied from one mean the same here.
+ */
+export const MAP_TILE_SIZE = 512;
+
+/** How far in a box of no size — one point — is framed. A street, not a doorstep. */
+export const MAP_FIT_MAX_ZOOM = 16;
+
+/** Where Web Mercator stops: the latitude at which the world is square. */
+const MAX_LATITUDE = 85.0511287798;
+
+const DEG = Math.PI / 180;
+
+/** A longitude in `[-180, 180)`, however many turns it took to get there. */
+export function normalizeLongitude(longitude: number): number {
+	if (longitude >= -180 && longitude < 180) return longitude;
+	return ((((longitude + 180) % 360) + 360) % 360) - 180;
+}
+
+function mercatorY(latitude: number): number {
+	const clamped = Math.max(-MAX_LATITUDE, Math.min(MAX_LATITUDE, latitude));
+	return Math.log(Math.tan(Math.PI / 4 + (clamped * DEG) / 2));
+}
+
+function latitudeOfMercatorY(y: number): number {
+	return (2 * Math.atan(Math.exp(y)) - Math.PI / 2) / DEG;
+}
+
+/**
+ * The centre and zoom that frame a box in a view of `size`, clearing `padding`
+ * points on every side.
+ *
+ * Worked out here rather than handed to the native fit, for two reasons. A box
+ * with `west > east` crosses the antimeridian, and a fit that takes corners
+ * frames it the long way round the world. And the opening view has to be a
+ * centre and zoom before the map exists, so the same sum serves both.
+ *
+ * The latitude is measured in Web Mercator, so the centre sits where the box's
+ * middle is drawn — poleward of the mean latitude — and a tall box at high
+ * latitude is not cropped. Padding that would leave no room is ignored, and an
+ * unmeasured view is read as one tile square.
+ */
+export function fitBoundsCamera(
+	[west, south, east, north]: LngLatBounds,
+	size: { width: number; height: number },
+	padding = 0
+): { center: LngLat; zoom: number } {
+	const longitudeSpan = west <= east ? east - west : east + 360 - west;
+	const longitude = normalizeLongitude(west + longitudeSpan / 2);
+	const ySouth = mercatorY(south);
+	const yNorth = mercatorY(north);
+	const latitude = south === north ? south : latitudeOfMercatorY((ySouth + yNorth) / 2);
+
+	const width = size.width > 0 ? size.width : MAP_TILE_SIZE;
+	const height = size.height > 0 ? size.height : MAP_TILE_SIZE;
+	const fits = padding > 0 && width - 2 * padding > 0 && height - 2 * padding > 0;
+	const innerWidth = fits ? width - 2 * padding : width;
+	const innerHeight = fits ? height - 2 * padding : height;
+
+	// The fraction of the world's width and height the box takes, and the zoom
+	// at which that fraction of a `512 × 2^z` world fills the inner view.
+	const xFraction = longitudeSpan / 360;
+	const yFraction = Math.abs(yNorth - ySouth) / (2 * Math.PI);
+	const zoomX = xFraction > 0 ? Math.log2(innerWidth / (MAP_TILE_SIZE * xFraction)) : Number.POSITIVE_INFINITY;
+	const zoomY = yFraction > 0 ? Math.log2(innerHeight / (MAP_TILE_SIZE * yFraction)) : Number.POSITIVE_INFINITY;
+	const zoom = Math.max(0, Math.min(MAP_FIT_MAX_ZOOM, zoomX, zoomY));
+
+	return { center: [longitude, latitude], zoom };
+}
+
+/**
+ * The smallest box holding every point, `undefined` for none.
+ *
+ * Antimeridian-safe: the box is the one that leaves out the widest stretch of
+ * longitude no point touches. Three stops across Fiji either side of 180° are a
+ * box a few degrees wide, not one spanning the whole world the long way round.
+ */
+export function boundsOf(coordinates: readonly LngLat[]): LngLatBounds | undefined {
+	if (coordinates.length === 0) return undefined;
+
+	let south = Number.POSITIVE_INFINITY;
+	let north = Number.NEGATIVE_INFINITY;
+	for (const [, latitude] of coordinates) {
+		south = Math.min(south, latitude);
+		north = Math.max(north, latitude);
+	}
+
+	const longitudes = [...new Set(coordinates.map(([longitude]) => normalizeLongitude(longitude)))].sort(
+		(a, b) => a - b
+	);
+	const first = longitudes[0] as number;
+	const last = longitudes.at(-1) as number;
+
+	// The gap across the antimeridian, from the easternmost back round to the
+	// westernmost. If no gap between neighbours beats it, the box is the plain
+	// one; otherwise it starts just east of the widest gap.
+	let widestGap = first + 360 - last;
+	let west = first;
+	let east = last;
+	for (let index = 0; index < longitudes.length - 1; index++) {
+		const here = longitudes[index] as number;
+		const next = longitudes[index + 1] as number;
+		if (next - here > widestGap) {
+			widestGap = next - here;
+			west = next;
+			east = here;
+		}
+	}
+
+	return [west, south, east, north];
+}
+
+/**
+ * A curve from one point to another, sampled into a polyline.
+ *
+ * A quadratic Bézier in plain longitude and latitude, bowed to the left of the
+ * direction of travel by `curvature` times the chord's length at its apex —
+ * negative bows right. It is deliberately not a great circle: it reads as
+ * "from here to there" at city and country scale, where a geodesic is a
+ * straight line anyway. The endpoints are the inputs themselves, not
+ * recomputed, so a marker on either end sits exactly on the line. It does not
+ * take the short way across the antimeridian; an arc from Auckland to Los
+ * Angeles goes round by Europe.
+ */
+export function arcCoordinates(from: LngLat, to: LngLat, curvature = 0.2, samples = 64): LngLat[] {
+	const [x0, y0] = from;
+	const [x1, y1] = to;
+	const dx = x1 - x0;
+	const dy = y1 - y0;
+	const length = Math.hypot(dx, dy);
+	if (length === 0) return [from, to];
+
+	const count = Math.max(2, Math.floor(samples));
+	// The control point sits off the chord's midpoint along its left normal.
+	// A quadratic Bézier reaches half way to its control point, so twice the
+	// apex height puts the apex at `curvature × length`.
+	const controlX = (x0 + x1) / 2 - (dy / length) * 2 * curvature * length;
+	const controlY = (y0 + y1) / 2 + (dx / length) * 2 * curvature * length;
+
+	const points: LngLat[] = [from];
+	for (let index = 1; index < count - 1; index++) {
+		const t = index / (count - 1);
+		const u = 1 - t;
+		points.push([u * u * x0 + 2 * u * t * controlX + t * t * x1, u * u * y0 + 2 * u * t * controlY + t * t * y1]);
+	}
+	points.push(to);
+
+	return points;
+}

package/src/components/map/map-label.tsx

@@ -0,0 +1,45 @@
+import type { ReactElement, ReactNode } from "react";
+import type { ViewProps } from "react-native";
+import { Surface } from "../surface";
+import { Text } from "../text";
+import { type MapLabelSide, type MapLabelSize, type MapLabelTone, mapVariants } from "./map.variants";
+
+export type MapLabelProps = Omit<ViewProps, "children"> & {
+	/**
+	 * Which side of the pin it sits on — the side it keeps its gap from. Write
+	 * it after the pin for `bottom` and before it for `top`; a marker is a column
+	 * and draws its children in order.
+	 */
+	side?: MapLabelSide;
+	size?: MapLabelSize;
+	/** The text's colour. The pill is the card either way. */
+	tone?: MapLabelTone;
+	className?: string;
+	children: ReactNode;
+};
+
+/**
+ * A pill of text beside a pin — the place's name, a price, an arrival time.
+ *
+ * A card-coloured `Surface` with a hairline, so it reads over satellite-dark
+ * water and pale streets alike, on one line that truncates rather than wraps.
+ */
+export function MapLabel({
+	side = "bottom",
+	size = "sm",
+	tone = "default",
+	className,
+	children,
+	...props
+}: MapLabelProps): ReactElement {
+	const slots = mapVariants({ labelSide: side, labelSize: size, labelTone: tone });
+
+	return (
+		<Surface className={slots.label({ className })} padding="none" variant="default" {...props}>
+			<Text className={slots.labelText()} numberOfLines={1}>
+				{children}
+			</Text>
+		</Surface>
+	);
+}
+MapLabel.displayName = "DelacourUI.Map.Label";

package/src/components/map/map-marker.tsx

@@ -0,0 +1,106 @@
+import { Marker } from "@maplibre/maplibre-react-native";
+import { type ReactElement, type ReactNode, useMemo, useState } from "react";
+import { type LayoutChangeEvent, View, type ViewProps } from "react-native";
+import { type MapMarkerContextValue, type MapMarkerFrame, MapMarkerProvider, useMapPart } from "./map.context";
+import type { LngLat } from "./map.types";
+import {
+	type MapMarkerAnchor,
+	mapVariants,
+	resolveMarkerAnchor,
+	resolveMarkerOffset,
+	resolvePinTipAnchor,
+} from "./map.variants";
+
+export type MapMarkerProps = Omit<ViewProps, "children"> & {
+	/** Where it sits. */
+	lngLat: LngLat;
+	/**
+	 * Which point of the marker sits on `lngLat`. Omitted, a marker holding a
+	 * `Map.Pin` anchors on the pin's tip and any other marker on its centre.
+	 */
+	anchor?: MapMarkerAnchor;
+	/** Makes the marker a button. */
+	onPress?: () => void;
+	/** What a screen reader announces. Name the place, not the pin. */
+	accessibilityLabel?: string;
+	className?: string;
+	children?: ReactNode;
+};
+
+/**
+ * A React view pinned to a coordinate.
+ *
+ * Anchors on the tip of the `Map.Pin` inside it, wherever the pin sits — so a
+ * marker can hold a popup over its pin, or a label under it, and the tip still
+ * lands on the coordinate with no offset worked out at the call site. The pin
+ * has to be a direct child for its position to be measured.
+ *
+ * A marker with `onPress` is a button, announced by its `accessibilityLabel`,
+ * and its tap does not reach the map's `onPress`.
+ *
+ * `testID` goes on the native marker and, suffixed `-content`, on the view
+ * inside it, which is the one an e2e selector can always find and tap.
+ */
+export function MapMarker({
+	lngLat,
+	anchor,
+	onPress,
+	accessibilityLabel,
+	className,
+	children,
+	testID,
+	...props
+}: MapMarkerProps): ReactElement {
+	useMapPart("Map.Marker");
+	const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+	const [pin, setPin] = useState<MapMarkerFrame | null>(null);
+
+	const anchorPoint =
+		anchor !== undefined
+			? resolveMarkerAnchor(anchor)
+			: ((size !== null && pin !== null ? resolvePinTipAnchor({ marker: size, pin }) : undefined) ??
+				resolveMarkerAnchor("center"));
+	const offset = size === null ? undefined : resolveMarkerOffset(anchorPoint, size);
+
+	const markerContext = useMemo<MapMarkerContextValue>(() => ({ reportPin: setPin }), []);
+
+	const onLayout = (event: LayoutChangeEvent) => {
+		const { width, height } = event.nativeEvent.layout;
+		setSize((current) => (current?.width === width && current.height === height ? current : { height, width }));
+	};
+
+	// MapLibre places a marker by a named anchor plus a pixel offset, so the
+	// marker is centred on its coordinate and moved until the anchor point —
+	// a pin's tip, wherever it sits — lands there instead.
+	return (
+		<Marker
+			accessibilityLabel={accessibilityLabel}
+			accessibilityRole={onPress === undefined ? undefined : "button"}
+			anchor="center"
+			lngLat={[lngLat[0], lngLat[1]]}
+			offset={offset}
+			onPress={
+				onPress === undefined
+					? undefined
+					: (event) => {
+							event.stopPropagation();
+							onPress();
+						}
+			}
+			testID={testID}
+			{...props}
+		>
+			<MapMarkerProvider value={markerContext}>
+				<View
+					className={mapVariants().marker({ className })}
+					collapsable={false}
+					onLayout={onLayout}
+					testID={testID === undefined ? undefined : `${testID}-content`}
+				>
+					{children}
+				</View>
+			</MapMarkerProvider>
+		</Marker>
+	);
+}
+MapMarker.displayName = "DelacourUI.Map.Marker";

package/src/components/map/map-pin.tsx

@@ -0,0 +1,55 @@
+import { type ReactElement, useEffect } from "react";
+import { type LayoutChangeEvent, View, type ViewProps } from "react-native";
+import Svg, { Circle, Path } from "react-native-svg";
+import { useThemeColor } from "../../hooks/use-theme-color";
+import { useMapMarkerContext } from "./map.context";
+import { MAP_PIN_DIMENSIONS, MAP_PIN_TONE_TOKENS, type MapPinSize, type MapPinTone, mapPinPath } from "./map.variants";
+
+export type MapPinProps = Omit<ViewProps, "children"> & {
+	/** `primary` by default; `default` is the theme's foreground; `destructive` for a problem. */
+	tone?: MapPinTone;
+	size?: MapPinSize;
+	className?: string;
+};
+
+/**
+ * A teardrop pin in a theme colour, a dot of the colour's own foreground
+ * punched in its head.
+ *
+ * Inside a `Map.Marker` it reports where it sits, and the marker anchors on its
+ * tip. It is drawn rather than an icon because a pin's tip is a point on the
+ * map: a glyph centred in a square would put the place a few points off.
+ * Hidden from assistive technology — the marker carries the name.
+ */
+export function MapPin({ tone = "primary", size = "md", className, onLayout, ...props }: MapPinProps): ReactElement {
+	const marker = useMapMarkerContext();
+	const { fill, dot } = MAP_PIN_TONE_TOKENS[tone];
+	const fillColor = useThemeColor(fill);
+	const dotColor = useThemeColor(dot);
+	const { width, height } = MAP_PIN_DIMENSIONS[size];
+	const reportPin = marker?.reportPin;
+
+	useEffect(() => (reportPin === undefined ? undefined : () => reportPin(null)), [reportPin]);
+
+	const onPinLayout = (event: LayoutChangeEvent) => {
+		reportPin?.(event.nativeEvent.layout);
+		onLayout?.(event);
+	};
+
+	return (
+		<View
+			accessibilityElementsHidden
+			className={className}
+			importantForAccessibility="no-hide-descendants"
+			onLayout={onPinLayout}
+			style={{ height, width }}
+			{...props}
+		>
+			<Svg height={height} viewBox={`0 0 ${width} ${height}`} width={width}>
+				<Path d={mapPinPath(width, height)} fill={fillColor} />
+				<Circle cx={width / 2} cy={width / 2} fill={dotColor} r={width / 6} />
+			</Svg>
+		</View>
+	);
+}
+MapPin.displayName = "DelacourUI.Map.Pin";

package/src/components/map/map-popup.tsx

@@ -0,0 +1,83 @@
+import type { ReactElement, ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { useThemeColor } from "../../hooks/use-theme-color";
+import { Surface } from "../surface";
+import { Text } from "../text";
+import { useMapMarkerContext, useMapPart } from "./map.context";
+import type { LngLat } from "./map.types";
+import { mapVariants } from "./map.variants";
+import { MapMarker } from "./map-marker";
+
+type MapPopupBaseProps = Omit<ViewProps, "children"> & {
+	/** A heading over the content. */
+	title?: string;
+	className?: string;
+	children?: ReactNode;
+};
+
+/**
+ * Inside a `Map.Marker` a popup sits over the marker's pin and needs no
+ * coordinate; on its own it needs one. The union says so, so a popup that
+ * would have nowhere to go is a type error rather than an empty map.
+ */
+export type MapPopupProps = MapPopupBaseProps & ({ lngLat: LngLat } | { lngLat?: undefined });
+
+/** The caret's box in points: wide and short, pointing down at the place. */
+const CARET = { width: 14, height: 8 } as const;
+
+/**
+ * A card over a place — a name, a line of detail, an action.
+ *
+ * Inside a `Map.Marker`, write it before the `Map.Pin`: the marker is a column,
+ * so the card lands over the pin and the marker still anchors on the pin's tip.
+ * Outside one, give it a `lngLat` and it becomes a marker of its own, its caret
+ * on the coordinate.
+ *
+ * It is a React view rather than the platform's native callout, so it takes
+ * the theme — a card-coloured `Surface` with a caret in the same fill and
+ * hairline. Show and hide it by rendering it or not; it holds no open state of
+ * its own, because the caller is the one who knows which place is selected.
+ */
+export function MapPopup({ lngLat, title, className, children, ...props }: MapPopupProps): ReactElement | null {
+	useMapPart("Map.Popup");
+	const marker = useMapMarkerContext();
+	const card = useThemeColor("card");
+	const border = useThemeColor("border");
+	const slots = mapVariants();
+
+	const body = (
+		<View accessibilityRole="summary" {...props}>
+			<Surface className={slots.popup({ className })} padding="sm" variant="default">
+				{title === undefined ? null : <Text className={slots.popupTitle()}>{title}</Text>}
+				{children}
+			</Surface>
+			<View className={slots.popupCaret()}>
+				<Svg height={CARET.height} width={CARET.width}>
+					<Path
+						d={`M0 0 L${CARET.width / 2} ${CARET.height} L${CARET.width} 0`}
+						fill={card}
+						stroke={border}
+						strokeWidth={1}
+					/>
+				</Svg>
+			</View>
+		</View>
+	);
+
+	if (marker !== null) return body;
+
+	if (lngLat === undefined) {
+		if (__DEV__) {
+			console.warn("[DelacourUI.Map.Popup] A popup outside a Map.Marker needs a `lngLat`; it was not drawn.");
+		}
+		return null;
+	}
+
+	return (
+		<MapMarker anchor="bottom" lngLat={lngLat}>
+			{body}
+		</MapMarker>
+	);
+}
+MapPopup.displayName = "DelacourUI.Map.Popup";

package/src/components/map/map-route.tsx

@@ -0,0 +1,87 @@
+import { GeoJSONSource, Layer } from "@maplibre/maplibre-react-native";
+import { type ReactElement, useId, useMemo } from "react";
+import { useThemeColor } from "../../hooks/use-theme-color";
+import { useMapPart } from "./map.context";
+import type { LngLat } from "./map.types";
+import { MAP_ROUTE_TOKEN, resolveRouteDashArray, toStyleColor } from "./map.variants";
+
+export type MapRouteProps = {
+	/** The points the line runs through, in order. */
+	coordinates: readonly LngLat[];
+	/** A theme token or a literal colour. Defaults to `primary`. */
+	color?: string;
+	/** Stroke width in points. Defaults to `3`. */
+	width?: number;
+	/** Dashes scaled to the stroke — for a planned or estimated leg. */
+	isDashed?: boolean;
+	/** `0`–`1`. Defaults to `1`. */
+	opacity?: number;
+	/** A tap on the line itself. */
+	onPress?: () => void;
+};
+
+/** Points of slack round a line a tap still lands on — a 3-point line is a hard target. */
+const ROUTE_HITBOX = 12;
+
+/**
+ * A line through a list of coordinates — a route, a run, a boundary.
+ *
+ * Round caps and joins, in the theme's `primary` unless given a colour, which
+ * may be a token as well as a literal. Drawn by the map itself — a GeoJSON
+ * source and a line layer — so it sits over the basemap and under every
+ * marker, and `opacity` is the layer's own rather than folded into the colour.
+ */
+export function MapRoute({
+	coordinates,
+	color = MAP_ROUTE_TOKEN,
+	width = 3,
+	isDashed = false,
+	opacity = 1,
+	onPress,
+}: MapRouteProps): ReactElement {
+	useMapPart("Map.Route");
+	const stroke = toStyleColor(useThemeColor(color));
+	const id = `delacour-route-${useId()}`;
+	const data = useMemo<GeoJSON.Feature<GeoJSON.LineString>>(
+		() => ({
+			geometry: { coordinates: coordinates.map(([longitude, latitude]) => [longitude, latitude]), type: "LineString" },
+			properties: {},
+			type: "Feature",
+		}),
+		[coordinates]
+	);
+	const dashArray = resolveRouteDashArray(isDashed);
+
+	return (
+		<GeoJSONSource
+			data={data}
+			hitbox={
+				onPress === undefined
+					? undefined
+					: { bottom: ROUTE_HITBOX, left: ROUTE_HITBOX, right: ROUTE_HITBOX, top: ROUTE_HITBOX }
+			}
+			id={id}
+			onPress={
+				onPress === undefined
+					? undefined
+					: (event) => {
+							event.stopPropagation();
+							onPress();
+						}
+			}
+		>
+			<Layer
+				id={`${id}-line`}
+				layout={{ "line-cap": "round", "line-join": "round" }}
+				paint={{
+					...(stroke === undefined ? {} : { "line-color": stroke }),
+					...(dashArray === undefined ? {} : { "line-dasharray": dashArray }),
+					"line-opacity": Math.min(1, Math.max(0, opacity)),
+					"line-width": width,
+				}}
+				type="line"
+			/>
+		</GeoJSONSource>
+	);
+}
+MapRoute.displayName = "DelacourUI.Map.Route";

package/src/components/map/map-user-location.tsx

@@ -0,0 +1,100 @@
+import { GeoJSONSource, Layer, Marker } from "@maplibre/maplibre-react-native";
+import { type ReactElement, useEffect, useMemo } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { useThemeColor } from "../../hooks/use-theme-color";
+import { useMapPart, useMapUserLocation } from "./map.context";
+import { MAP_ROUTE_TOKEN, mapVariants, toStyleColor } from "./map.variants";
+
+export type MapUserLocationProps = {
+	/** Draws a cone over the dot in the direction the device faces, when it knows. */
+	showsHeading?: boolean;
+};
+
+/** The heading cone's box, in points — wider than the dot, so it shows round it. */
+const CONE = { width: 44, height: 44 } as const;
+
+/** The dot's radius and the ring of page colour round it, in points. */
+const DOT_RADIUS = 6;
+const RING_WIDTH = 3;
+
+const SOURCE_ID = "delacour-user-location";
+
+/**
+ * The device's own position, as a dot in the theme's primary ringed in the
+ * page colour.
+ *
+ * Mounting it turns the map's location updates on, which asks for foreground
+ * location permission the first time; the app's config has to declare why.
+ * The position arrives through the map rather than a location library, so the
+ * map adds no dependency for it.
+ *
+ * The dot is drawn by the map — two circle layers — so it takes the theme
+ * where the platform's own puck would not. `showsHeading` adds a cone in the
+ * same primary, turned to the device's heading; while the heading is unknown
+ * it is not drawn at all rather than pointing north by default.
+ */
+export function MapUserLocation({ showsHeading = false }: MapUserLocationProps): ReactElement | null {
+	const { requestUserLocation } = useMapPart("Map.UserLocation");
+	const { location, heading } = useMapUserLocation();
+	const primary = useThemeColor(MAP_ROUTE_TOKEN);
+	const background = useThemeColor("background");
+	const dotColor = toStyleColor(primary);
+	const ringColor = toStyleColor(background);
+
+	useEffect(() => requestUserLocation(), [requestUserLocation]);
+
+	const longitude = location?.[0];
+	const latitude = location?.[1];
+	const data = useMemo<GeoJSON.Point | null>(
+		() =>
+			longitude === undefined || latitude === undefined ? null : { coordinates: [longitude, latitude], type: "Point" },
+		[longitude, latitude]
+	);
+
+	if (data === null || longitude === undefined || latitude === undefined) return null;
+
+	const { width, height } = CONE;
+	const cx = width / 2;
+	const cy = height / 2;
+
+	return (
+		<>
+			<GeoJSONSource data={data} id={SOURCE_ID}>
+				<Layer
+					id={`${SOURCE_ID}-ring`}
+					paint={{
+						...(ringColor === undefined ? {} : { "circle-color": ringColor }),
+						"circle-pitch-alignment": "map",
+						"circle-radius": DOT_RADIUS + RING_WIDTH,
+					}}
+					type="circle"
+				/>
+				<Layer
+					id={`${SOURCE_ID}-dot`}
+					paint={{
+						...(dotColor === undefined ? {} : { "circle-color": dotColor }),
+						"circle-pitch-alignment": "map",
+						"circle-radius": DOT_RADIUS,
+					}}
+					type="circle"
+				/>
+			</GeoJSONSource>
+			{!showsHeading || heading === undefined ? null : (
+				<Marker anchor="center" lngLat={[longitude, latitude]} pointerEvents="none">
+					<View
+						accessibilityElementsHidden
+						className={mapVariants().userHeading()}
+						importantForAccessibility="no-hide-descendants"
+						style={{ height, transform: [{ rotate: `${heading}deg` }], width }}
+					>
+						<Svg height={height} width={width}>
+							<Path d={`M${cx} ${cy} L${cx - 9} 2 Q${cx} -1 ${cx + 9} 2 Z`} fill={primary} opacity={0.35} />
+						</Svg>
+					</View>
+				</Marker>
+			)}
+		</>
+	);
+}
+MapUserLocation.displayName = "DelacourUI.Map.UserLocation";