@maplibre/maplibre-react-native 10.0.0-alpha.9 → 10.0.0-beta.2

package/src/components/UserLocation.tsx

@@ -0,0 +1,307 @@
+import {
+  forwardRef,
+  memo,
+  type ReactElement,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+import Annotation from "./Annotation";
+import CircleLayer from "./CircleLayer";
+import HeadingIndicator from "./HeadingIndicator";
+import NativeUserLocation from "./NativeUserLocation";
+import locationManager, {
+  type Location,
+} from "../modules/location/locationManager";
+import { type CircleLayerStyleProps } from "../utils/MapLibreRNStyles";
+
+const mapboxBlue = "rgba(51, 181, 229, 100)";
+
+const layerStyles: Record<string, CircleLayerStyleProps> = {
+  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,
+): ReactElement[] => [
+  <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 })]
+    : []),
+];
+
+interface UserLocationProps {
+  /**
+   * Whether location icon is animated between updates
+   */
+  animated?: boolean;
+  /**
+   * Which render mode to use.
+   * Can either be `normal` or `native`
+   */
+  renderMode?: "normal" | "native";
+  /**
+   * native/android only render mode
+   *
+   *  - normal: just a circle
+   *  - compass: triangle with heading
+   *  - gps: large arrow
+   *
+   * @platform android
+   */
+  androidRenderMode?: "normal" | "compass" | "gps";
+  /**
+   * Whether location icon is visible
+   */
+  visible?: boolean;
+  /**
+   * Callback that is triggered on location icon press
+   */
+  onPress?(): void;
+  /**
+   * Callback that is triggered on location update
+   */
+  onUpdate?(location: Location): void;
+  /**
+   * Show or hide small arrow which indicates direction the device is pointing relative to north.
+   */
+  showsUserHeadingIndicator?: boolean;
+  /**
+   * Minimum amount of movement before GPS location is updated in meters
+   */
+  minDisplacement?: number;
+  /**
+   * 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.
+   *
+   * @platform android
+   */
+  androidPreferredFramesPerSecond?: number;
+  /**
+   * Custom location icon of type mapbox-gl-native components
+   *
+   * NOTE: Forking maintainer does not understand the above comment.
+   */
+  children?: ReactElement | ReactElement[];
+}
+
+interface UserLocationState {
+  shouldShowUserLocation: boolean;
+  coordinates?: number[];
+  heading?: number;
+}
+
+export enum UserLocationRenderMode {
+  Native = "native",
+  Normal = "normal",
+}
+
+export interface UserLocationRef {
+  setLocationManager: (props: { running: boolean }) => Promise<void>;
+  needsLocationManagerRunning: () => boolean;
+  _onLocationUpdate: (location: Location | null) => void;
+}
+
+const UserLocation = memo(
+  forwardRef<UserLocationRef, UserLocationProps>(
+    (
+      {
+        animated = true,
+        visible = true,
+        showsUserHeadingIndicator = false,
+        minDisplacement = 0,
+        renderMode = "normal",
+        androidRenderMode,
+        androidPreferredFramesPerSecond,
+        children,
+        onUpdate,
+        onPress,
+      }: UserLocationProps,
+      ref,
+    ) => {
+      const _isMounted = useRef<boolean | null>(null);
+      const locationManagerRunning = useRef<boolean>(false);
+
+      const [userLocationState, setUserLocationState] =
+        useState<UserLocationState>({
+          shouldShowUserLocation: false,
+        });
+
+      useImperativeHandle(
+        ref,
+        (): UserLocationRef => ({
+          /**
+           * Whether to start or stop listening to the locationManager
+           *
+           * Notice, that listening will start automatically when
+           * either `onUpdate` or `visible` are set
+           *
+           * @async
+           * @param {Object} running - Object with key `running` and `boolean` value
+           * @return {Promise<void>}
+           */
+          setLocationManager,
+          /**
+           *
+           * If locationManager should be running
+           *
+           * @return {boolean}
+           */
+          needsLocationManagerRunning,
+          _onLocationUpdate,
+        }),
+      );
+
+      useEffect(() => {
+        _isMounted.current = true;
+
+        setLocationManager({
+          running: needsLocationManagerRunning(),
+        }).then(() => {
+          if (renderMode === UserLocationRenderMode.Native) {
+            return;
+          }
+
+          locationManager.setMinDisplacement(minDisplacement ?? 0);
+        });
+
+        return (): void => {
+          _isMounted.current = false;
+          setLocationManager({ running: false });
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      useEffect(() => {
+        locationManager.setMinDisplacement(minDisplacement ?? 0);
+      }, [minDisplacement]);
+
+      useEffect(() => {
+        if (!_isMounted.current) {
+          return;
+        }
+
+        setLocationManager({
+          running: needsLocationManagerRunning(),
+        });
+      });
+
+      async function setLocationManager({
+        running,
+      }: {
+        running: boolean;
+      }): Promise<void> {
+        if (locationManagerRunning.current !== running) {
+          locationManagerRunning.current = running;
+
+          if (running) {
+            locationManager.addListener(_onLocationUpdate);
+            const location = await locationManager.getLastKnownLocation();
+            _onLocationUpdate(location);
+          } else {
+            locationManager.removeListener(_onLocationUpdate);
+          }
+        }
+      }
+
+      function needsLocationManagerRunning(): boolean {
+        return !!(
+          !!onUpdate ||
+          (renderMode === UserLocationRenderMode.Normal && visible)
+        );
+      }
+
+      function _onLocationUpdate(location: Location | null): void {
+        if (!_isMounted.current || !location) {
+          return;
+        }
+
+        let coordinates;
+        let heading;
+
+        if (location && location.coords) {
+          const { longitude, latitude } = location.coords;
+          heading = location.coords.heading;
+          coordinates = [longitude, latitude];
+        }
+
+        setUserLocationState({
+          ...userLocationState,
+          coordinates,
+          heading,
+        });
+
+        if (onUpdate) {
+          onUpdate(location);
+        }
+      }
+
+      if (!visible) {
+        return null;
+      }
+
+      if (renderMode === UserLocationRenderMode.Native) {
+        const props = {
+          androidRenderMode,
+          iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
+          androidPreferredFramesPerSecond,
+        };
+
+        return <NativeUserLocation {...props} />;
+      }
+
+      if (!userLocationState.coordinates) {
+        return null;
+      }
+
+      return (
+        <Annotation
+          animated={animated}
+          id="mapboxUserLocation"
+          onPress={onPress}
+          coordinates={userLocationState.coordinates}
+          style={{
+            iconRotate: userLocationState.heading,
+          }}
+        >
+          {children ||
+            normalIcon(showsUserHeadingIndicator, userLocationState.heading)}
+        </Annotation>
+      );
+    },
+  ),
+);
+
+export default UserLocation;

package/src/components/VectorSource.tsx

@@ -0,0 +1,218 @@
+import { featureCollection } from "@turf/helpers";
+import { forwardRef, memo, useImperativeHandle } from "react";
+import {
+  NativeModules,
+  type NativeSyntheticEvent,
+  requireNativeComponent,
+} from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import useNativeBridge from "../hooks/useNativeBridge";
+import { type BaseProps } from "../types/BaseProps";
+import { type OnPressEvent } from "../types/OnPressEvent";
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
+import { type FilterExpression } from "../utils/MapLibreRNStyles";
+import { copyPropertiesAsDeprecated } from "../utils/deprecation";
+import { getFilter } from "../utils/filterUtils";
+
+const MapLibreRN = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNVectorSource";
+
+interface VectorSourceProps extends BaseProps {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+  /**
+   * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
+   */
+  url?: string;
+  /**
+   * An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
+   * Example: https://example.com/vector-tiles/{z}/{x}/{y}.pbf
+   */
+  tileUrlTemplates?: string[];
+  /**
+   * An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * maxZoomLevel, if specified. The default value for this option is 0.
+   */
+  minZoomLevel?: number;
+  /**
+   * An unsigned integer that specifies the maximum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * minZoomLevel, if specified. The default value for this option is 22.
+   */
+  maxZoomLevel?: number;
+  /**
+   * Influences the y direction of the tile coordinates. (tms inverts y axis)
+   */
+  tms?: boolean;
+  /**
+   * An HTML or literal text string defining the buttons to be displayed in an action sheet when the
+   * source is part of a map view’s style and the map view’s attribution button is pressed.
+   */
+  attribution?: string;
+  /**
+   * Source press listener, gets called when a user presses one of the children layers only
+   * if that layer has a higher z-index than another source layers
+   *
+   * @param {Object} event
+   * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
+   * @param {Object} event.coordinates - the coordinates of the click
+   * @param {Object} event.point - the point of the click
+   */
+  onPress?: (event: OnPressEvent) => void;
+  /**
+   * Overrides the default touch hitbox(44x44 pixels) for the source layers
+   */
+  hitbox?: {
+    /**
+     * `width` of hitbox
+     */
+    width: number;
+    /**
+     * `height` of hitbox
+     */
+    height: number;
+  };
+
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+type NativeProps = VectorSourceProps;
+
+const MLRNVectorSource =
+  requireNativeComponent<VectorSourceProps>(NATIVE_MODULE_NAME);
+
+/**
+ * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.
+ * The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification.
+ */
+const VectorSource = memo(
+  forwardRef(
+    (
+      {
+        id = MapLibreRN.StyleSource.DefaultSourceID,
+        ...props
+      }: VectorSourceProps,
+      ref,
+    ) => {
+      // * exposes the methods of the function component so we don't break projects that depend on calling this methods
+      useImperativeHandle(ref, () => ({
+        /**
+         * Returns all features that match the query parameters regardless of whether or not the feature is
+         * currently rendered on the map. The domain of the query includes all currently-loaded vector tiles
+         * and GeoJSON source tiles. This function does not check tiles outside of the visible viewport.
+         *
+         * @example
+         * vectorSource.features(['id1', 'id2'])
+         *
+         * @param  {Array=} layerIDs - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
+         * @param  {Array=} filter - an optional filter statement to filter the returned Features.
+         * @return {GeoJSON.FeatureCollection}
+         */
+        features,
+        onPress,
+      }));
+
+      const {
+        _runNativeCommand,
+        //  _runPendingNativeCommands,
+        _onAndroidCallback,
+      } = useNativeBridge(NATIVE_MODULE_NAME);
+      const { setNativeRef, _nativeRef } = useAbstractSource<NativeProps>();
+
+      // const _setNativeRef = (
+      //   nativeRef: (Component<NativeProps> & Readonly<NativeMethods>) | null,
+      // ): void => {
+      //   if (nativeRef) {
+      //     setNativeRef(nativeRef);
+      //     _runPendingNativeCommands(nativeRef);
+      //   }
+      // };
+
+      const features = async (
+        layerIDs = [],
+        filter?: FilterExpression,
+      ): Promise<GeoJSON.FeatureCollection> => {
+        if (!_nativeRef) {
+          return featureCollection([]);
+        }
+        const res: { data: string | GeoJSON.FeatureCollection } =
+          await _runNativeCommand("features", _nativeRef, [
+            [[layerIDs, getFilter(filter)]],
+          ]);
+
+        if (isAndroid()) {
+          return JSON.parse(res?.data as string);
+        }
+
+        return res.data as GeoJSON.FeatureCollection;
+      };
+
+      const onPress = (
+        event: NativeSyntheticEvent<{ payload: OnPressEvent }>,
+      ): void => {
+        const { onPress } = props;
+
+        if (!onPress) {
+          return;
+        }
+        const {
+          nativeEvent: {
+            payload: { features, coordinates, point },
+          },
+        } = event;
+        let newEvent = {
+          features,
+          coordinates,
+          point,
+        };
+        newEvent = copyPropertiesAsDeprecated(
+          event,
+          newEvent,
+          (key: string) => {
+            console.warn(
+              `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
+            );
+          },
+          {
+            nativeEvent: (origNativeEvent: OnPressEvent) => ({
+              ...origNativeEvent,
+              payload: features[0],
+            }),
+          },
+        );
+
+        onPress(newEvent);
+      };
+
+      const allProps = {
+        id,
+        url: props.url,
+        tileUrlTemplates: props.tileUrlTemplates,
+        minZoomLevel: props.minZoomLevel,
+        maxZoomLevel: props.maxZoomLevel,
+        tms: props.tms,
+        attribution: props.attribution,
+        hitbox: props.hitbox,
+        hasPressListener: isFunction(props.onPress),
+        onMapboxVectorSourcePress: onPress,
+        onPress: undefined,
+        onAndroidCallback: isAndroid() ? _onAndroidCallback : undefined,
+      };
+
+      return (
+        <MLRNVectorSource ref={setNativeRef} {...allProps}>
+          {cloneReactChildrenWithProps(props.children, {
+            sourceID: id,
+          })}
+        </MLRNVectorSource>
+      );
+    },
+  ),
+);
+
+export default VectorSource;

package/src/hooks/useAbstractLayer.ts

@@ -0,0 +1,127 @@
+import { useMemo, useRef } from "react";
+import { processColor, type NativeMethods } from "react-native";
+
+import { type BaseProps } from "../types/BaseProps";
+import {
+  type AllLayerStyleProps,
+  type ExpressionField,
+  type ExpressionName,
+  type FilterExpression,
+} from "../utils/MapLibreRNStyles";
+import { type StyleValue, transformStyle } from "../utils/StyleValue";
+import { getFilter } from "../utils/filterUtils";
+
+export interface BaseLayerProps {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+  filter?: FilterExpression;
+  /**
+   * Customizable style attributes
+   */
+  style?: AllLayerStyleProps;
+}
+
+export interface NativeBaseProps {
+  reactStyle?: { [key: string]: StyleValue };
+}
+
+export default function useAbstractLayer<
+  Props extends BaseProps,
+  NativeProps extends NativeBaseProps,
+>(
+  props: Props & BaseLayerProps,
+): {
+  baseProps: Props & BaseLayerProps;
+  setNativeLayer: (
+    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ) => void;
+  getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined;
+  setNativeProps: (nativeProps: { [key: string]: unknown }) => void;
+} {
+  const nativeLayer = useRef<
+    (React.Component<NativeProps> & Readonly<NativeMethods>) | null
+  >(null);
+
+  const baseProps = useMemo(() => {
+    return {
+      ...props,
+      id: props.id,
+      sourceID: props.sourceID,
+      reactStyle: transformStyle(props.style),
+      minZoomLevel: props.minZoomLevel,
+      maxZoomLevel: props.maxZoomLevel,
+      aboveLayerID: props.aboveLayerID,
+      belowLayerID: props.belowLayerID,
+      layerIndex: props.layerIndex,
+      filter: getFilter(props.filter) as [ExpressionName, ...ExpressionField[]],
+      style: undefined,
+    };
+  }, [props]);
+
+  const setNativeLayer = (
+    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ): void => {
+    nativeLayer.current = instance;
+  };
+
+  const getStyleTypeFormatter = (
+    styleType: string,
+  ): typeof processColor | undefined => {
+    return styleType === "color" ? processColor : undefined;
+  };
+
+  const setNativeProps = (nativeProps: { [key: string]: unknown }): void => {
+    if (nativeLayer.current) {
+      let propsToPass = nativeProps;
+      if (nativeProps.style) {
+        propsToPass = {
+          ...nativeProps,
+          reactStyle: transformStyle(props.style),
+        };
+      }
+      nativeLayer.current.setNativeProps(propsToPass);
+    }
+  };
+
+  return {
+    baseProps,
+    setNativeLayer,
+    getStyleTypeFormatter,
+    setNativeProps,
+  };
+}

package/src/hooks/useAbstractSource.ts

@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import { type NativeMethods } from "react-native";
+
+export default function useAbstractSource<NativePropsType extends object>(): {
+  _nativeRef:
+    | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+    | undefined;
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void;
+  setNativeProps: (nativeProps: NativePropsType) => void;
+} {
+  const _nativeRef = useRef<
+    (React.Component<NativePropsType> & Readonly<NativeMethods>) | undefined
+  >(undefined);
+
+  const setNativeRef = (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ): void => {
+    _nativeRef.current = instance;
+  };
+
+  const setNativeProps = (newProps: NativePropsType): void => {
+    if (_nativeRef.current) {
+      _nativeRef.current.setNativeProps(newProps);
+    }
+  };
+
+  return {
+    _nativeRef: _nativeRef.current,
+    setNativeRef,
+    setNativeProps,
+  };
+}