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

package/src/components/UserLocationPuck.tsx

@@ -1,62 +0,0 @@
-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}
-        />
-      )}
-    </>
-  ),
-);

package/src/components/UserLocationPuckHeading.tsx

@@ -1,33 +0,0 @@
-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,
-      }}
-    />
-  ),
-);

package/src/components/VectorSource.tsx

@@ -1,195 +0,0 @@
-import { featureCollection } from "@turf/helpers";
-import { forwardRef, memo, type ReactNode, 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 FilterExpression } from "../types/MapLibreRNStyles";
-import { type OnPressEvent } from "../types/OnPressEvent";
-import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
-import { getFilter } from "../utils/filterUtils";
-
-const MLRNModule = 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
-   */
-  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?: ReactNode;
-}
-
-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.
- */
-export const VectorSource = memo(
-  forwardRef(
-    (
-      {
-        id = MLRNModule.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;
-
-        onPress({
-          features,
-          coordinates,
-          point,
-        });
-      };
-
-      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>
-      );
-    },
-  ),
-);

package/src/hooks/useNativeRef.ts

@@ -1,14 +0,0 @@
-import { Component, type RefObject, useRef } from "react";
-import { type NativeMethods } from "react-native";
-
-export type NativeRef<NativeProps> = Component<NativeProps> &
-  Readonly<NativeMethods>;
-
-/**
- * Separate  module which allows to be mocked in tests.
- */
-export function useNativeRef<
-  NativeProps = object,
->(): RefObject<NativeRef<NativeProps> | null> {
-  return useRef<NativeRef<NativeProps>>(null);
-}

package/src/requestAndroidLocationPermissions.ts

@@ -1,29 +0,0 @@
-import { type Permission, PermissionsAndroid } from "react-native";
-
-import { isAndroid } from "./utils";
-
-export async function requestAndroidLocationPermissions(): Promise<boolean> {
-  if (isAndroid()) {
-    const res = await PermissionsAndroid.requestMultiple([
-      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION as Permission,
-      PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION as Permission,
-    ]);
-
-    if (!res) {
-      return false;
-    }
-
-    const permissions: string[] = Object.keys(res);
-    for (const permission of permissions) {
-      if (
-        res[permission as Permission] === PermissionsAndroid.RESULTS.GRANTED
-      ) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  throw new Error("You should only call this method on Android!");
-}

package/src/types/CameraMode.ts

@@ -1,6 +0,0 @@
-export enum CameraMode {
-  Flight = 1,
-  Ease = 2,
-  Linear = 3,
-  None = 4,
-}

package/src/types/MapLibreRNEvent.ts

@@ -1,7 +0,0 @@
-import { type SyntheticEvent } from "react";
-
-export type MapLibreRNEvent<
-  T extends string,
-  P = GeoJSON.Feature,
-  V = Element,
-> = SyntheticEvent<V, { type: T; payload: P }>;

package/src/types/OnPressEvent.ts

@@ -1,11 +0,0 @@
-export interface OnPressEvent {
-  features: GeoJSON.Feature[];
-  coordinates: {
-    latitude: number;
-    longitude: number;
-  };
-  point: {
-    x: number;
-    y: number;
-  };
-}

package/src/utils/Logger.ts

@@ -1,131 +0,0 @@
-import {
-  type EmitterSubscription,
-  NativeEventEmitter,
-  NativeModules,
-} from "react-native";
-const MLRNLogging = NativeModules.MLRNLogging;
-
-export type LogLevel = "error" | "warning" | "info" | "debug" | "verbose";
-interface Log {
-  message: string;
-  level: LogLevel;
-  tag?: string;
-}
-
-type LogCallback = (log: Log) => boolean;
-
-export class Logger {
-  static instance: Logger | null = null;
-
-  static sharedInstance(): Logger {
-    if (this.instance === null) {
-      this.instance = new Logger();
-    }
-    return this.instance;
-  }
-
-  private loggerEmitter: NativeEventEmitter;
-  private startedCount: number;
-  private logCallback: LogCallback | null;
-  private subscription: EmitterSubscription | null;
-
-  constructor() {
-    this.loggerEmitter = new NativeEventEmitter(MLRNLogging);
-    this.startedCount = 0;
-    this.logCallback = null;
-    this.subscription = null;
-  }
-
-  /**
-   * Set custom logger function.
-   * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then
-   * default logging will take place.
-   */
-  static setLogCallback(logCallback: LogCallback): void {
-    this.sharedInstance().setLogCallback(logCallback);
-  }
-
-  /**
-   * Set custom logger function.
-   * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then
-   * default logging will take place.
-   */
-  setLogCallback(logCallback: LogCallback): void {
-    this.logCallback = logCallback;
-  }
-
-  /**
-   * This callback is displayed as part of the Requester class.
-   * @callback Logger~logCallback
-   * @param {object} log
-   * @param {string} log.message - the message of the log
-   * @param {string} log.level - log level
-   * @param {string} log.tag - optional tag used on android
-   */
-
-  /**
-   * setLogLevel
-   * @param {LogLevel} level
-   */
-  static setLogLevel(level: LogLevel): void {
-    MLRNLogging.setLogLevel(level);
-  }
-
-  /**
-   * @type {('error'|'warning'|'info'|'debug'|'verbose')} LogLevel - Supported log levels
-   */
-
-  start(): void {
-    if (this.startedCount === 0) {
-      this.subscribe();
-    }
-    this.startedCount += 1;
-  }
-
-  stop(): void {
-    this.startedCount -= 1;
-    if (this.startedCount === 0) {
-      this.unsubscribe();
-    }
-  }
-
-  subscribe(): void {
-    this.subscription = this.loggerEmitter.addListener("LogEvent", (log) => {
-      this.onLog(log);
-    });
-  }
-
-  unsubscribe(): void {
-    if (this.subscription) {
-      this.subscription.remove();
-      this.subscription = null;
-    }
-  }
-
-  effectiveLevel({ level, message, tag }: Log): LogLevel {
-    if (level === "warning") {
-      if (
-        tag === "Mbgl-HttpRequest" &&
-        message.startsWith("Request failed due to a permanent error: Canceled")
-      ) {
-        // this seems to happening too much to show a warning every time
-        return "info";
-      }
-    }
-    return level;
-  }
-
-  onLog(log: Log): void {
-    if (!this.logCallback || !this.logCallback(log)) {
-      const { message } = log;
-      const level = this.effectiveLevel(log);
-      if (level === "error") {
-        console.error("MapLibre error", message, log);
-      } else if (level === "warning") {
-        console.warn("MapLibre warning", message, log);
-      } else {
-        console.log(`MapLibre [${level}]`, message, log);
-      }
-    }
-  }
-}