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

package/javascript/components/UserLocation.tsx

@@ -1,289 +0,0 @@
-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

@@ -1,218 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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;