@maplibre/maplibre-react-native 11.0.0-alpha.2 → 11.0.0-alpha.21

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

@@ -0,0 +1,81 @@
+import { memo } from "react";
+
+import { UserLocationPuckHeading } from "./UserLocationPuckHeading";
+import type { BaseProps } from "../../types/BaseProps";
+import type { CircleLayerStyle } from "../../types/MapLibreRNStyles";
+import { CircleLayer } from "../layers/CircleLayer";
+
+const blue = "#33B5E5";
+
+const layerStyles = {
+  accuracy: {
+    circleColor: blue,
+    circleOpacity: 0.2,
+    circlePitchAlignment: "map",
+    circleRadiusTransition: { duration: 300, delay: 0 },
+  },
+  white: {
+    circleRadius: 9,
+    circleColor: "#fff",
+    circlePitchAlignment: "map",
+  },
+  blue: {
+    circleRadius: 6,
+    circleColor: blue,
+    circlePitchAlignment: "map",
+  },
+} satisfies Record<"accuracy" | "white" | "blue", CircleLayerStyle>;
+
+interface UserLocationPuckProps extends BaseProps {
+  sourceID: string;
+  accuracy?: number;
+  heading?: number;
+  belowLayerID?: string;
+}
+
+export const UserLocationPuck = memo(
+  ({ sourceID, accuracy, heading }: UserLocationPuckProps) => {
+    return (
+      <>
+        {typeof accuracy === "number" && (
+          <CircleLayer
+            id="mlrn-user-location-puck-accuracy"
+            testID="mlrn-user-location-puck-accuracy"
+            sourceID={sourceID}
+            style={{
+              ...layerStyles.accuracy,
+              circleRadius: [
+                "interpolate",
+                ["exponential", 2],
+                ["zoom"],
+                0,
+                layerStyles.white.circleRadius,
+                22,
+                layerStyles.white.circleRadius + accuracy * 100,
+              ],
+            }}
+          />
+        )}
+        <CircleLayer
+          id="mlrn-user-location-puck-white"
+          testID="mlrn-user-location-puck-white"
+          sourceID={sourceID}
+          style={layerStyles.white}
+        />
+        <CircleLayer
+          id="mlrn-user-location-puck-blue"
+          testID="mlrn-user-location-puck-blue"
+          sourceID={sourceID}
+          style={layerStyles.blue}
+        />
+        {typeof heading === "number" && (
+          <UserLocationPuckHeading
+            sourceID={sourceID}
+            belowLayerID="mlrn-user-location-puck-white"
+            heading={heading}
+          />
+        )}
+      </>
+    );
+  },
+);

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

@@ -0,0 +1,34 @@
+import { memo } from "react";
+
+import headingIcon from "../../assets/heading.png";
+import { type BaseProps } from "../../types/BaseProps";
+import type { SymbolLayerStyle } from "../../types/MapLibreRNStyles";
+import { SymbolLayer } from "../layers/SymbolLayer";
+
+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"
+      testID="mlrn-user-location-puck-heading"
+      sourceID={sourceID}
+      belowLayerID={belowLayerID}
+      style={{
+        ...layerStyle,
+        iconRotate: heading,
+      }}
+    />
+  ),
+);

package/src/hooks/useCurrentPosition.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  type GeolocationPosition,
+  LocationManager,
+} from "../modules/location/LocationManager";
+
+interface UseCurrentPositionOptions {
+  /**
+   * Enable or disable position updates
+   *
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * Minimum displacement in meters to trigger position update
+   *
+   * @default 0
+   */
+  minDisplacement?: number;
+}
+
+export function useCurrentPosition({
+  enabled = true,
+  minDisplacement,
+}: UseCurrentPositionOptions = {}) {
+  const [currentPosition, setCurrentPosition] = useState<GeolocationPosition>();
+
+  useEffect(() => {
+    if (minDisplacement !== undefined) {
+      LocationManager.setMinDisplacement(minDisplacement);
+    }
+  }, [minDisplacement]);
+
+  const handleUpdate = useCallback((position: GeolocationPosition) => {
+    setCurrentPosition(position);
+  }, []);
+
+  useEffect(() => {
+    if (enabled) {
+      LocationManager.addListener(handleUpdate);
+    }
+
+    return () => {
+      if (enabled) {
+        LocationManager.removeListener(handleUpdate);
+      }
+    };
+  }, [enabled, handleUpdate]);
+
+  return currentPosition;
+}

package/src/index.ts

@@ -1 +1,85 @@
-export * from "./MapLibreRN";
+export * from "./MLRNModule";
+
+export {
+  type CameraOptions,
+  type CameraEasing,
+  type CameraAnimationOptions,
+  type CameraCenterOptions,
+  type CameraBoundsOptions,
+  type CameraCenterStop,
+  type CameraBoundsStop,
+  type CameraStop,
+  type InitialViewState,
+  type CameraRef,
+  type TrackUserLocation,
+  type TrackUserLocationChangeEvent,
+  type CameraProps,
+  Camera,
+} from "./components/camera/Camera";
+
+export {
+  MapView,
+  type MapViewRef,
+  type ViewState,
+  type ViewStateChangeEvent,
+} from "./components/map-view/MapView";
+
+export { PointAnnotation } from "./components/annotations/PointAnnotation";
+export type { PointAnnotationRef } from "./components/annotations/PointAnnotation";
+export { Annotation } from "./components/annotations/Annotation";
+export { Callout } from "./components/annotations/Callout";
+
+export { UserLocation } from "./components/user-location/UserLocation";
+export { NativeUserLocation } from "./components/user-location/NativeUserLocation";
+export { useCurrentPosition } from "./hooks/useCurrentPosition";
+
+export { VectorSource } from "./components/sources/VectorSource";
+export { ShapeSource } from "./components/sources/ShapeSource";
+export type { ShapeSourceRef } from "./components/sources/ShapeSource";
+export { RasterSource } from "./components/sources/RasterSource";
+export { ImageSource } from "./components/sources/ImageSource";
+export { Images } from "./components/Images";
+export { FillLayer } from "./components/layers/FillLayer";
+export { FillExtrusionLayer } from "./components/layers/FillExtrusionLayer";
+export { HeatmapLayer } from "./components/layers/HeatmapLayer";
+export { LineLayer } from "./components/layers/LineLayer";
+export { CircleLayer } from "./components/layers/CircleLayer";
+export { SymbolLayer } from "./components/layers/SymbolLayer";
+export { RasterLayer } from "./components/layers/RasterLayer";
+export { BackgroundLayer } from "./components/layers/BackgroundLayer";
+export { MarkerView } from "./components/annotations/MarkerView";
+
+export {
+  LocationManager,
+  type GeolocationPosition,
+} from "./modules/location/LocationManager";
+
+export { OfflineManager } from "./modules/offline/OfflineManager";
+export type { OfflinePackError } from "./modules/offline/OfflineManager";
+export type { OfflinePackStatus } from "./modules/offline/OfflinePack";
+export { OfflinePack } from "./modules/offline/OfflinePack";
+export { OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions";
+export { SnapshotManager } from "./modules/snapshot/SnapshotManager";
+export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions";
+
+export type { Bounds } from "./types/Bounds";
+export type {
+  FillLayerStyle,
+  LineLayerStyle,
+  SymbolLayerStyle,
+  CircleLayerStyle,
+  HeatmapLayerStyle,
+  FillExtrusionLayerStyle,
+  RasterLayerStyle,
+  HillshadeLayerStyle,
+  BackgroundLayerStyle,
+  LightLayerStyle,
+  Expression,
+} from "./types/MapLibreRNStyles";
+export type { PressEvent, PressEventWithFeatures } from "./types/PressEvent";
+export type { ViewPadding } from "./types/ViewPadding";
+
+export { Animated } from "./utils/animated/Animated";
+export { LogManager, type LogLevel } from "./modules/log/LogManager";
+
+export type { MapLibrePluginProps } from "./plugin/MapLibrePluginProps";

package/src/modules/location/LocationManager.ts

@@ -1,160 +1,172 @@
 import {
-  NativeModules,
-  NativeEventEmitter,
-  type EmitterSubscription,
+  type EventSubscription,
+  type Permission,
+  PermissionsAndroid,
+  Platform,
 } from "react-native";
 
-const MLRNModule = NativeModules.MLRNModule;
-const MLRNLocationModule = NativeModules.MLRNLocationModule;
+import NativeLocationModule from "./NativeLocationModule";
 
-export const LocationModuleEventEmitter = new NativeEventEmitter(
-  MLRNLocationModule,
-);
-
-/*
- * Location sent by LocationManager
- */
-export interface Location {
-  coords: Coordinates;
-  timestamp?: number;
-}
-
-/*
- * Coordinates sent by LocationManager
- */
-interface Coordinates {
-  /*
-   * The heading (measured in degrees) relative to true north.
-   * Heading is used to describe the direction the device is pointing to (the value of the compass).
-   * Note that on Android this is incorrectly reporting the course value as mentioned in issue https://github.com/rnmapbox/maps/issues/1213
-   * and will be corrected in a future update.
+interface GeolocationCoordinates {
+  /**
+   * Longitude in degrees
    */
-  heading?: number;
+  longitude: number;
 
-  /*
-   * The direction in which the device is traveling, measured in degrees and relative to due north.
-   * The course refers to the direction the device is actually moving (not the same as heading).
+  /**
+   * Latitude in degrees
    */
-  course?: number;
+  latitude: number;
 
-  /*
-   * The instantaneous speed of the device, measured in meters per second.
+  /**
+   * Accuracy for longitude/latitude in meters
    */
-  speed?: number;
+  accuracy: number;
 
-  /*
-   * The latitude in degrees.
+  /**
+   * Altitude in meters
    */
-  latitude: number;
+  altitude: number | null;
 
-  /*
-   * The longitude in degrees.
+  /**
+   * Accuracy for altitude in meters
    */
-  longitude: number;
+  altitudeAccuracy: number | null;
 
-  /*
-   * The radius of uncertainty for the location, measured in meters.
+  /**
+   * Direction in which the device is traveling in degrees, relative to north
    */
-  accuracy?: number;
+  heading: number | null;
 
-  /*
-   * The altitude, measured in meters.
+  /**
+   * Instantaneous speed of the device in meters per second
    */
-  altitude?: number;
+  speed: number | null;
+}
+
+export interface GeolocationPosition {
+  coords: GeolocationCoordinates;
+
+  timestamp: number;
 }
 
 class LocationManager {
-  _listeners: ((location: Location) => void)[];
-  _lastKnownLocation: Location | null;
-  _isListening: boolean;
-  subscription: EmitterSubscription | null;
+  private listeners: ((location: GeolocationPosition) => void)[] = [];
+  private currentPosition: GeolocationPosition | undefined = undefined;
+  private isListening: boolean = false;
+
+  private subscription: EventSubscription | undefined = undefined;
 
   constructor() {
-    this._listeners = [];
-    this._lastKnownLocation = null;
-    this._isListening = false;
-    this.onUpdate = this.onUpdate.bind(this);
-    this.subscription = null;
+    this.handleUpdate = this.handleUpdate.bind(this);
   }
 
-  async getLastKnownLocation(): Promise<Location | null> {
-    if (!this._lastKnownLocation) {
-      let lastKnownLocation;
+  async getCurrentPosition(): Promise<GeolocationPosition | undefined> {
+    let currentPosition;
 
-      // as location can be brittle it might happen,
-      // that we get an exception from native land
-      // let's silently catch it and simply log out
-      // instead of throwing an exception
-      try {
-        lastKnownLocation = await MLRNLocationModule.getLastKnownLocation();
-      } catch (error) {
-        console.log("LocationManager Error: ", error);
-      }
-
-      if (!this._lastKnownLocation && lastKnownLocation) {
-        this._lastKnownLocation = lastKnownLocation;
-      }
+    try {
+      currentPosition = await NativeLocationModule.getCurrentPosition();
+    } catch (error) {
+      console.log("LocationManager [error]: ", error);
     }
 
-    return this._lastKnownLocation;
+    this.currentPosition = currentPosition;
+
+    return this.currentPosition;
   }
 
-  addListener(listener: (location: Location) => void): void {
-    if (!this._isListening) {
+  addListener(newListener: (location: GeolocationPosition) => void): void {
+    if (!this.isListening) {
       this.start();
     }
-    if (!this._listeners.includes(listener)) {
-      this._listeners.push(listener);
 
-      if (this._lastKnownLocation) {
-        listener(this._lastKnownLocation);
+    if (!this.listeners.includes(newListener)) {
+      this.listeners.push(newListener);
+
+      if (this.currentPosition) {
+        newListener(this.currentPosition);
       }
     }
   }
 
-  removeListener(listener: (location: Location) => void): void {
-    this._listeners = this._listeners.filter((l) => l !== listener);
-    if (this._listeners.length === 0) {
+  removeListener(oldListener: (location: GeolocationPosition) => void): void {
+    this.listeners = this.listeners.filter(
+      (listener) => listener !== oldListener,
+    );
+
+    if (this.listeners.length === 0) {
       this.stop();
     }
   }
 
   removeAllListeners(): void {
-    this._listeners = [];
+    this.listeners = [];
+
     this.stop();
   }
 
-  start(displacement = 0): void {
-    if (!this._isListening) {
-      MLRNLocationModule.start(displacement);
+  start(): void {
+    if (!this.isListening) {
+      NativeLocationModule.start();
 
-      this.subscription = LocationModuleEventEmitter.addListener(
-        MLRNModule.LocationCallbackName.Update,
-        this.onUpdate,
-      );
+      this.subscription = NativeLocationModule.onUpdate(this.handleUpdate);
 
-      this._isListening = true;
+      this.isListening = true;
     }
   }
 
   stop(): void {
-    MLRNLocationModule.stop();
+    NativeLocationModule.stop();
 
-    if (this._isListening) {
+    if (this.isListening) {
       this.subscription?.remove();
     }
 
-    this._isListening = false;
+    this.isListening = false;
   }
 
   setMinDisplacement(minDisplacement: number): void {
-    MLRNLocationModule.setMinDisplacement(minDisplacement);
+    NativeLocationModule.setMinDisplacement(minDisplacement);
+  }
+
+  private handleUpdate(location: GeolocationPosition): void {
+    this.currentPosition = location;
+
+    this.listeners.forEach((listener) => listener(location));
   }
 
-  onUpdate(location: Location): void {
-    this._lastKnownLocation = location;
+  /**
+   * Request location permissions
+   *
+   * Requests the following:
+   * - Android: `ACCESS_FINE_LOCATION`, `ACCESS_COARSE_LOCATION`
+   * - iOS: `requestWhenInUseAuthorization`
+   *
+   * @returns Promise resolves to true if permissions were granted, false otherwise
+   */
+  async requestPermissions(): Promise<boolean> {
+    if (Platform.OS === "android") {
+      const res = await PermissionsAndroid.requestMultiple([
+        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION as Permission,
+        PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION as Permission,
+      ]);
+
+      return Object.values(res).every(
+        (permission) => permission === PermissionsAndroid.RESULTS.GRANTED,
+      );
+    }
+
+    if (Platform.OS === "ios") {
+      try {
+        await NativeLocationModule.requestPermissions();
+        return true;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (_error) {
+        return false;
+      }
+    }
 
-    this._listeners.forEach((l) => l(location));
+    return false;
   }
 }
 

package/src/modules/location/NativeLocationModule.ts

@@ -0,0 +1,33 @@
+import type { TurboModule, CodegenTypes } from "react-native";
+import { TurboModuleRegistry } from "react-native";
+
+type NativeGeolocationCoordinates = {
+  longitude: CodegenTypes.Double;
+  latitude: CodegenTypes.Double;
+  accuracy: CodegenTypes.Double;
+  altitude: CodegenTypes.Double | null;
+  altitudeAccuracy: CodegenTypes.Double | null;
+  heading: CodegenTypes.Double | null;
+  speed: CodegenTypes.Double | null;
+};
+
+type NativeGeolocationPosition = {
+  coords: NativeGeolocationCoordinates;
+  timestamp: number;
+};
+
+export interface Spec extends TurboModule {
+  start(): void;
+
+  stop(): void;
+
+  getCurrentPosition(): Promise<NativeGeolocationPosition>;
+
+  setMinDisplacement(minDisplacement: number): void;
+
+  requestPermissions(): Promise<void>;
+
+  readonly onUpdate: CodegenTypes.EventEmitter<NativeGeolocationPosition>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>("MLRNLocationModule");

package/src/modules/log/LogManager.ts

@@ -0,0 +1,114 @@
+import { type EventSubscription } from "react-native";
+
+import NativeLogModule from "./NativeLogModule";
+
+/**
+ * Log levels in decreasing order of severity
+ */
+export type LogLevel = "error" | "warn" | "info" | "debug" | "verbose";
+
+interface LogEvent {
+  level: LogLevel;
+  tag: string;
+  message: string;
+}
+
+/**
+ * Handler for `onLog` events
+ *
+ * Called before logging a message, return false to proceed with default logging.
+ *
+ * @param event
+ */
+type LogHandler = (event: LogEvent) => boolean;
+
+class LogManager {
+  private logLevel: LogLevel = "warn";
+  private startedCount: number = 0;
+  private logHandler: LogHandler | undefined = undefined;
+  private subscription: EventSubscription | undefined = undefined;
+
+  constructor() {
+    this.handleLog = this.handleLog.bind(this);
+  }
+
+  /**
+   * Override logging behavior
+   *
+   * @param logHandler
+   */
+  onLog(logHandler: LogHandler): void {
+    this.logHandler = logHandler;
+  }
+
+  /**
+   * Set the minimum log level for a message to be logged
+   *
+   * @param level Minimum log level
+   */
+  setLogLevel(level: LogLevel): void {
+    this.logLevel = level;
+    NativeLogModule.setLogLevel(level);
+  }
+
+  start(): void {
+    if (this.startedCount === 0) {
+      this.subscribe();
+    }
+
+    this.startedCount += 1;
+  }
+
+  stop(): void {
+    this.startedCount -= 1;
+
+    if (this.startedCount === 0) {
+      this.unsubscribe();
+    }
+  }
+
+  private subscribe(): void {
+    this.subscription = NativeLogModule.onLog(this.handleLog);
+  }
+
+  private unsubscribe(): void {
+    if (this.subscription) {
+      this.subscription.remove();
+      this.subscription = undefined;
+    }
+  }
+
+  private effectiveLevel({ level, message, tag }: LogEvent): LogLevel {
+    // Reduce level of cancelled HTTP requests from warn to info
+    if (
+      level === "warn" &&
+      tag === "Mbgl-HttpRequest" &&
+      message.startsWith("Request failed due to a permanent error: Canceled")
+    ) {
+      return "info";
+    }
+
+    return level;
+  }
+
+  private handleLog(log: LogEvent): void {
+    if (!this.logHandler || !this.logHandler(log)) {
+      const { message, tag } = log;
+      const level = this.effectiveLevel(log);
+
+      const consoleMessage = `MapLibre Native [${level.toUpperCase()}] [${tag}] ${message}`;
+
+      if (level === "error") {
+        console.error(consoleMessage);
+      } else if (level === "warn" && this.logLevel !== "error") {
+        console.warn(consoleMessage);
+      } else if (this.logLevel !== "error" && this.logLevel !== "warn") {
+        console.info(consoleMessage);
+      }
+    }
+  }
+}
+
+const logManager = new LogManager();
+
+export { logManager as LogManager };

package/src/modules/log/NativeLogModule.ts

@@ -0,0 +1,16 @@
+import type { TurboModule, CodegenTypes } from "react-native";
+import { TurboModuleRegistry } from "react-native";
+
+type NativeLogLevel = "error" | "warn" | "info" | "debug" | "verbose";
+
+export interface Spec extends TurboModule {
+  setLogLevel(logLevel: NativeLogLevel): void;
+
+  readonly onLog: CodegenTypes.EventEmitter<{
+    level: NativeLogLevel;
+    tag: string;
+    message: string;
+  }>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>("MLRNLogModule");