fix: render UserLocation when heading is 0 (#694)

Author: KiwiKilian

docs/content/components/general/heading-indicator.md

@@ -1281,26 +1281,6 @@
       }
     ]
   },
-  "HeadingIndicator": {
-    "description": "",
-    "displayName": "HeadingIndicator",
-    "methods": [],
-    "props": [
-      {
-        "name": "heading",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
-      }
-    ],
-    "composes": [
-      "BaseProps"
-    ],
-    "type": "component",
-    "filePath": "src/components/HeadingIndicator.tsx",
-    "name": "HeadingIndicator"
-  },
   "HeatmapLayer": {
     "description": "HeatmapLayer is a style layer that renders one or more filled circles on the map.",
     "displayName": "HeatmapLayer",
@@ -2629,37 +2609,6 @@
     "filePath": "src/components/MarkerView.tsx",
     "name": "MarkerView"
   },
-  "NativeUserLocation": {
-    "description": "",
-    "displayName": "NativeUserLocation",
-    "methods": [],
-    "props": [
-      {
-        "name": "androidRenderMode",
-        "required": false,
-        "type": "\"normal\" \\| \"compass\" \\| \"gps\"",
-        "default": "none",
-        "description": "Android render mode.\n\n - normal: just a circle\n - compass: triangle with heading\n - gps: large arrow\n\n@platform android"
-      },
-      {
-        "name": "iosShowsUserHeadingIndicator",
-        "required": false,
-        "type": "boolean",
-        "default": "none",
-        "description": "iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.\n\n@platform ios"
-      },
-      {
-        "name": "androidPreferredFramesPerSecond",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "Android only. Set max FPS at which location animators can output updates. Use this setting to limit animation rate of the location puck on higher zoom levels to decrease the stress on the device's CPU which can directly improve battery life, without sacrificing UX."
-      }
-    ],
-    "type": "component",
-    "filePath": "src/components/NativeUserLocation.tsx",
-    "name": "NativeUserLocation"
-  },
   "OfflineManager": {
     "name": "OfflineManager",
     "type": "module",

docs/content/components/general/native-user-location.md

@@ -13,6 +13,11 @@ const COMPONENT_DIRECTORY = path.join(WORKSPACE_ROOT, "src", "components");
 const MODULES_DIRECTORY = path.join(WORKSPACE_ROOT, "src", "modules");
 const OUTPUT_PATH = path.join(WORKSPACE_ROOT, "docs", "content", "docs.json");
 
+const IGNORE_COMPONENTS = [
+  "NativeUserLocation",
+  "UserLocationPuck",
+  "UserLocationPuckHeading",
+];
 const IGNORE_METHODS = ["setNativeProps"];
 
 const fileExtensionsRegex = /.(js|tsx|(?<!d.)ts)$/;
@@ -365,7 +370,13 @@ export class DocJSONBuilder {
   }
 
   async generateReactComponentsTask(results: Record<string, any>) {
-    const filesNames = await fs.readdir(COMPONENT_DIRECTORY);
+    const filesNames = (await fs.readdir(COMPONENT_DIRECTORY)).filter(
+      (fileName) => {
+        return !IGNORE_COMPONENTS.includes(path.parse(fileName).name);
+      },
+    );
+
+    console.log(filesNames);
 
     const files = await Promise.all(
       filesNames.map(async (base) => {

docs/content/docs.json

@@ -9,60 +9,14 @@ import {
 } from "react";
 
 import { Annotation } from "./Annotation";
-import { CircleLayer } from "./CircleLayer";
-import { HeadingIndicator } from "./HeadingIndicator";
 import { NativeUserLocation } from "./NativeUserLocation";
+import { UserLocationPuck } from "./UserLocationPuck";
 import {
   type Location,
   LocationManager,
 } from "../modules/location/LocationManager";
-import { type CircleLayerStyle } from "../types/MapLibreRNStyles";
 
-const mapboxBlue = "rgba(51, 181, 229, 100)";
-
-const layerStyles: Record<string, CircleLayerStyle> = {
-  pluse: {
-    circleRadius: 15,
-    circleColor: mapboxBlue,
-    circleOpacity: 0.2,
-    circlePitchAlignment: "map",
-  },
-  background: {
-    circleRadius: 9,
-    circleColor: "#fff",
-    circlePitchAlignment: "map",
-  },
-  foreground: {
-    circleRadius: 6,
-    circleColor: mapboxBlue,
-    circlePitchAlignment: "map",
-  },
-};
-
-export const normalIcon = (
-  showsUserHeadingIndicator?: boolean,
-  heading?: number,
-) => [
-  <CircleLayer
-    key="mapboxUserLocationPluseCircle"
-    id="mapboxUserLocationPluseCircle"
-    style={layerStyles.pluse}
-  />,
-  <CircleLayer
-    key="mapboxUserLocationWhiteCircle"
-    id="mapboxUserLocationWhiteCircle"
-    style={layerStyles.background}
-  />,
-  <CircleLayer
-    key="mapboxUserLocationBlueCicle"
-    id="mapboxUserLocationBlueCicle"
-    aboveLayerID="mapboxUserLocationWhiteCircle"
-    style={layerStyles.foreground}
-  />,
-  ...(showsUserHeadingIndicator && heading
-    ? [HeadingIndicator({ heading })]
-    : []),
-];
+const USER_LOCATION_SOURCE_ID = "mlrn-user-location";
 
 interface UserLocationProps {
   /**
@@ -290,15 +244,23 @@ export const UserLocation = memo(
       return (
         <Annotation
           animated={animated}
-          id="mapboxUserLocation"
+          id={USER_LOCATION_SOURCE_ID}
           onPress={onPress}
           coordinates={userLocationState.coordinates}
           style={{
             iconRotate: userLocationState.heading,
           }}
         >
-          {children ||
-            normalIcon(showsUserHeadingIndicator, userLocationState.heading)}
+          {children || (
+            <UserLocationPuck
+              sourceID={USER_LOCATION_SOURCE_ID}
+              heading={
+                showsUserHeadingIndicator
+                  ? userLocationState.heading
+                  : undefined
+              }
+            />
+          )}
         </Annotation>
       );
     },

scripts/utils/DocJSONBuilder.ts

@@ -0,0 +1,62 @@
+import { memo } from "react";
+
+import { CircleLayer } from "./CircleLayer";
+import { UserLocationPuckHeading } from "./UserLocationPuckHeading";
+import type { BaseProps } from "../types/BaseProps";
+import type { CircleLayerStyle } from "../types/MapLibreRNStyles";
+
+const blue = "#33B5E5";
+
+const layerStyles: Record<"pulse" | "white" | "blue", CircleLayerStyle> = {
+  pulse: {
+    circleRadius: 15,
+    circleColor: blue,
+    circleOpacity: 0.2,
+    circlePitchAlignment: "map",
+  },
+  white: {
+    circleRadius: 9,
+    circleColor: "#fff",
+    circlePitchAlignment: "map",
+  },
+  blue: {
+    circleRadius: 6,
+    circleColor: blue,
+    circlePitchAlignment: "map",
+  },
+};
+
+interface UserLocationPuckProps extends BaseProps {
+  sourceID: string;
+  heading?: number;
+  belowLayerID?: string;
+}
+
+export const UserLocationPuck = memo(
+  ({ sourceID, heading }: UserLocationPuckProps) => (
+    <>
+      <CircleLayer
+        id="mlrn-user-location-puck-pulse"
+        sourceID={sourceID}
+        style={layerStyles.pulse}
+      />
+      <CircleLayer
+        id="mlrn-user-location-puck-white"
+        sourceID={sourceID}
+        style={layerStyles.white}
+      />
+      <CircleLayer
+        id="mlrn-user-location-puck-blue"
+        sourceID={sourceID}
+        style={layerStyles.blue}
+      />
+      {typeof heading === "number" && (
+        <UserLocationPuckHeading
+          sourceID={sourceID}
+          belowLayerID="mlrn-user-location-puck-white"
+          heading={heading}
+        />
+      )}
+    </>
+  ),
+);

src/components/HeadingIndicator.tsx

@@ -0,0 +1,33 @@
+import { memo } from "react";
+
+import { SymbolLayer } from "./SymbolLayer";
+import headingIcon from "../assets/heading.png";
+import { type BaseProps } from "../types/BaseProps";
+import type { SymbolLayerStyle } from "../types/MapLibreRNStyles";
+
+const layerStyle: SymbolLayerStyle = {
+  iconImage: headingIcon,
+  iconAllowOverlap: true,
+  iconPitchAlignment: "map",
+  iconRotationAlignment: "map",
+};
+
+interface UserLocationPuckHeadingProps extends BaseProps {
+  sourceID: string;
+  belowLayerID?: string;
+  heading: number;
+}
+
+export const UserLocationPuckHeading = memo(
+  ({ sourceID, belowLayerID, heading }: UserLocationPuckHeadingProps) => (
+    <SymbolLayer
+      id="mlrn-user-location-puck-heading"
+      sourceID={sourceID}
+      belowLayerID={belowLayerID}
+      style={{
+        iconRotate: heading,
+        ...layerStyle,
+      }}
+    />
+  ),
+);