@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.10

package/javascript/components/UserLocation.tsx

@@ -0,0 +1,289 @@
+import React, { ReactElement, useEffect, useImperativeHandle } from "react";
+
+import CircleLayer from "./CircleLayer";
+import HeadingIndicator from "./HeadingIndicator";
+import NativeUserLocation from "./NativeUserLocation";
+import Annotation from "./annotations/Annotation";
+import locationManager, { Location } from "../modules/location/locationManager";
+import { CircleLayerStyleProps } from "../utils/MaplibreStyles";
+
+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;
+  /**
+   * 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 = React.memo(
+  React.forwardRef<UserLocationRef, UserLocationProps>(
+    (
+      {
+        animated = true,
+        visible = true,
+        showsUserHeadingIndicator = false,
+        minDisplacement = 0,
+        renderMode = "normal",
+        androidRenderMode,
+        children,
+        onUpdate,
+        onPress,
+      }: UserLocationProps,
+      ref,
+    ) => {
+      const _isMounted = React.useRef<boolean | null>(null);
+      const locationManagerRunning = React.useRef<boolean>(false);
+
+      const [userLocationState, setUserLocationState] =
+        React.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,
+        };
+
+        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/javascript/components/VectorSource.tsx

@@ -0,0 +1,218 @@
+import { featureCollection } from "@turf/helpers";
+import React, { memo, useImperativeHandle } from "react";
+import {
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import useNativeBridge from "../hooks/useNativeBridge";
+import BaseProps from "../types/BaseProps";
+import OnPressEvent from "../types/OnPressEvent";
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
+import { FilterExpression } from "../utils/MaplibreStyles";
+import { copyPropertiesAsDeprecated } from "../utils/deprecation";
+import { getFilter } from "../utils/filterUtils";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNVectorSource";
+
+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 RCTMLNVectorSource =
+  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(
+  React.forwardRef(
+    (
+      {
+        id = MapLibreGL.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 (
+        <RCTMLNVectorSource ref={setNativeRef} {...allProps}>
+          {cloneReactChildrenWithProps(props.children, {
+            sourceID: id,
+          })}
+        </RCTMLNVectorSource>
+      );
+    },
+  ),
+);
+
+export default VectorSource;

package/javascript/components/annotations/Annotation.tsx

@@ -0,0 +1,161 @@
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+} from "react";
+import { Animated as RNAnimated, Easing } from "react-native";
+
+import OnPressEvent from "../../types/OnPressEvent";
+import { SymbolLayerStyleProps } from "../../utils/MaplibreStyles";
+import { AnimatedShapeSource } from "../../utils/animated/Animated";
+import AnimatedMapPoint from "../../utils/animated/AnimatedPoint";
+import SymbolLayer from "../SymbolLayer";
+
+interface AnnotationProps {
+  id: string;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?(x: number): number;
+  coordinates?: number[];
+  onPress?(event: OnPressEvent): void;
+  children?: ReactElement | ReactElement[];
+  style?: object;
+  icon?: string | number | object;
+}
+
+type Shape = AnimatedMapPoint | GeoJSON.Point;
+
+function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
+  const lng = props.coordinates?.[0] || 0;
+  const lat = props.coordinates?.[1] || 0;
+  const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] };
+
+  if (props.animated) {
+    return new AnimatedMapPoint(point);
+  }
+
+  return point;
+}
+
+function isShapeAnimated(shape: Shape): shape is AnimatedMapPoint {
+  return shape instanceof AnimatedMapPoint;
+}
+
+interface AnnotationRef {
+  onPress(event: OnPressEvent): void;
+  symbolStyle: SymbolLayerStyleProps | undefined;
+}
+
+const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
+  (
+    {
+      animated = false,
+      animationDuration = 1000,
+      animationEasingFunction = Easing.linear,
+      ...otherProps
+    }: AnnotationProps,
+    ref,
+  ) => {
+    const props = {
+      ...otherProps,
+      animated,
+      animationDuration,
+      animationEasingFunction,
+    };
+
+    useImperativeHandle(
+      ref,
+      (): AnnotationRef => ({
+        onPress,
+        symbolStyle,
+      }),
+    );
+
+    const [shape, setShape] = React.useState<Shape | null>(
+      getShapeFromProps(props),
+    );
+
+    // this will run useEffect only when actual coordinates values change
+    const coordinateDeps = props.coordinates?.join(",");
+
+    useEffect(() => {
+      if (!Array.isArray(props.coordinates)) {
+        setShape(null);
+        return;
+      }
+
+      if (shape && isShapeAnimated(shape)) {
+        shape.stopAnimation();
+
+        shape
+          .timing({
+            coordinates: props.coordinates,
+            easing: animationEasingFunction,
+            duration: animationDuration,
+          })
+          .start();
+
+        return;
+      }
+
+      if (!shape || !isShapeAnimated(shape)) {
+        const newShape = getShapeFromProps(props);
+        setShape(newShape);
+      }
+    }, [coordinateDeps]);
+
+    const onPressProp = props.onPress;
+
+    const _onPress = useCallback(
+      (event: OnPressEvent) => {
+        if (onPressProp) {
+          onPressProp(event);
+        }
+      },
+      [onPressProp],
+    );
+
+    // This function is needed to correctly generate Annotation.md doc
+    function onPress(event: OnPressEvent): void {
+      _onPress(event);
+    }
+
+    if (!props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+    const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
+      ? { ...props.style, iconImage: props.icon }
+      : undefined;
+
+    if (symbolStyle) {
+      children.push(
+        <SymbolLayer id={`${props.id}-symbol`} style={symbolStyle} />,
+      );
+    }
+
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        children.push(...props.children);
+      } else {
+        children.push(props.children);
+      }
+    }
+
+    return (
+      <AnimatedShapeSource
+        id={props.id}
+        onPress={_onPress}
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
+        {children}
+      </AnimatedShapeSource>
+    );
+  },
+);
+
+Annotation.displayName = "Annotation";
+
+export default Annotation;