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

package/src/components/MarkerView.tsx

@@ -1,86 +0,0 @@
-import { point } from "@turf/helpers";
-import { type ReactElement, useMemo } from "react";
-import { Platform, requireNativeComponent, type ViewProps } from "react-native";
-
-import { PointAnnotation } from "./PointAnnotation";
-import { toJSONString } from "../utils";
-
-export const NATIVE_MODULE_NAME = "MLRNMarkerView";
-
-interface MarkerViewProps extends ViewProps {
-  /**
-   * The center point (specified as a map coordinate) of the marker.
-   * See also #anchor.
-   */
-  coordinate: number[];
-  /**
-   * Specifies the anchor being set on a particular point of the annotation.
-   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
-   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
-   * Note this is only for custom annotations not the default pin view.
-   * Defaults to the center of the view.
-   */
-  anchor?: {
-    /**
-     * `x` of anchor
-     */
-    x: number;
-    /**
-     * `y` of anchor
-     */
-    y: number;
-  };
-  allowOverlap?: boolean;
-  isSelected?: boolean;
-  /**
-   * Expects one child - can be container with multiple elements
-   */
-  children: ReactElement;
-}
-
-interface NativeProps extends ViewProps {
-  coordinate: string | undefined;
-  anchor: { x: number; y: number };
-  allowOverlap: boolean;
-  isSelected: boolean;
-}
-
-/**
- * MarkerView allows you to place a interactive react native marker to the map.
- *
- * If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
- * .
- * This is based on [MakerView plugin](https://github.com/maplibre/maplibre-plugins-android/tree/main/plugin-markerview) on Android
- * and PointAnnotation on iOS.
- */
-export const MarkerView = ({
-  anchor = { x: 0.5, y: 0.5 },
-  allowOverlap = false,
-  isSelected = false,
-  ...rest
-}: MarkerViewProps) => {
-  const props = { anchor, allowOverlap, isSelected, ...rest };
-  const coordinate = props.coordinate
-    ? toJSONString(point(props.coordinate))
-    : undefined;
-
-  const idForPointAnnotation = useMemo(() => {
-    lastId = lastId + 1;
-    return `MV-${lastId}`;
-  }, []);
-
-  if (Platform.OS === "ios") {
-    return <PointAnnotation id={idForPointAnnotation} {...props} />;
-  }
-
-  const propsToSend = {
-    ...props,
-    coordinate,
-  };
-
-  return <MLRNMarkerView {...propsToSend}>{props.children}</MLRNMarkerView>;
-};
-
-let lastId = 0;
-
-const MLRNMarkerView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/NativeUserLocation.tsx

@@ -1,32 +0,0 @@
-import { requireNativeComponent } from "react-native";
-
-const NATIVE_MODULE_NAME = "MLRNNativeUserLocation";
-
-interface NativeUserLocationProps {
-  /**
-   * Android render mode.
-   *
-   *  - normal: just a circle
-   *  - compass: triangle with heading
-   *  - gps: large arrow
-   *
-   * @platform android
-   */
-  androidRenderMode?: "normal" | "compass" | "gps";
-  /**
-   * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
-   *
-   * @platform ios
-   */
-  iosShowsUserHeadingIndicator?: boolean;
-  /**
-   * 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.
-   */
-  androidPreferredFramesPerSecond?: number;
-}
-
-export const NativeUserLocation = (props: NativeUserLocationProps) => {
-  return <MLRNNativeUserLocation {...props} />;
-};
-
-const MLRNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);

package/src/components/PointAnnotation.tsx

@@ -1,244 +0,0 @@
-import { point } from "@turf/helpers";
-import {
-  Component,
-  type SyntheticEvent,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  type ReactElement,
-} from "react";
-import {
-  Platform,
-  StyleSheet,
-  type ViewProps,
-  requireNativeComponent,
-} from "react-native";
-
-import { useNativeBridge, type RNMLEvent } from "../hooks/useNativeBridge";
-import { isFunction, toJSONString } from "../utils";
-
-export const NATIVE_MODULE_NAME = "MLRNPointAnnotation";
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-    position: "absolute",
-  },
-});
-
-type FeaturePayload = GeoJSON.Feature<
-  GeoJSON.Point,
-  {
-    screenPointX: number;
-    screenPointY: number;
-  }
->;
-
-export interface PointAnnotationProps {
-  /**
-   * A string that uniquely identifies the annotation
-   */
-  id: string;
-  /**
-   * The string containing the annotation’s title. Note this is required to be set if you want to see a callout appear on iOS.
-   */
-  title?: string;
-  /**
-   * The string containing the annotation’s snippet(subtitle). Not displayed in the default callout.
-   */
-  snippet?: string;
-  /**
-   * Manually selects/deselects annotation
-   */
-  selected?: boolean;
-  /**
-   * Enable or disable dragging. Defaults to false.
-   */
-  draggable?: boolean;
-  /**
-   * The center point (specified as a map coordinate) of the annotation.
-   */
-  coordinate: number[];
-  /**
-   * Specifies the anchor being set on a particular point of the annotation.
-   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
-   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
-   * Note this is only for custom annotations not the default pin view.
-   * Defaults to the center of the view.
-   */
-  anchor?: {
-    /**
-     * See anchor
-     */
-    x: number;
-    /**
-     * See anchor
-     */
-    y: number;
-  };
-  /**
-   * This callback is fired once this annotation is selected. Returns a Feature as the first param.
-   */
-  onSelected?: (payload: FeaturePayload) => void;
-  /**
-   * This callback is fired once this annotation is deselected.
-   */
-  onDeselected?: (payload: FeaturePayload) => void;
-  /**
-   * This callback is fired once this annotation has started being dragged.
-   */
-  onDragStart?: (payload: FeaturePayload) => void;
-  /**
-   * This callback is fired once this annotation has stopped being dragged.
-   */
-  onDragEnd?: (payload: FeaturePayload) => void;
-  /**
-   * This callback is fired while this annotation is being dragged.
-   */
-  onDrag?: (payload: FeaturePayload) => void;
-
-  /**
-   * Expects one child, and an optional callout can be added as well
-   */
-  children: ReactElement | [ReactElement, ReactElement];
-
-  style?: ViewProps["style"];
-}
-
-interface NativeProps extends Omit<PointAnnotationProps, "coordinate"> {
-  coordinate?: string;
-}
-
-export interface PointAnnotationRef {
-  refresh(): void;
-}
-
-/**
- * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
- *
- * Consider using ShapeSource and SymbolLayer instead, if you have many points, and you have static images,
- * they'll offer much better performance.
- *
- * If you need interactive views please use MarkerView,
- * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
- */
-export const PointAnnotation = forwardRef<
-  PointAnnotationRef,
-  PointAnnotationProps
->(
-  (
-    {
-      anchor = { x: 0.5, y: 0.5 },
-      draggable = false,
-      ...props
-    }: PointAnnotationProps,
-    ref,
-  ) => {
-    useImperativeHandle(
-      ref,
-      (): PointAnnotationRef => ({
-        /**
-         * On android point annotation is rendered offscreen with a canvas into an image.
-         * To rerender the image from the current state of the view call refresh.
-         * Call this for example from Image#onLoad.
-         */
-        refresh,
-      }),
-    );
-
-    const { _runNativeCommand, _runPendingNativeCommands } =
-      useNativeBridge(NATIVE_MODULE_NAME);
-    const _nativeRef = useRef<Component<NativeProps>>(null);
-
-    function refresh(): void {
-      if (Platform.OS === "android") {
-        _runNativeCommand("refresh", _nativeRef.current, []);
-      }
-    }
-
-    function _onSelected(
-      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
-    ): void {
-      if (isFunction(props.onSelected)) {
-        props.onSelected(e.nativeEvent.payload);
-      }
-    }
-
-    function _onDeselected(
-      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
-    ): void {
-      if (isFunction(props.onDeselected)) {
-        props.onDeselected(e.nativeEvent.payload);
-      }
-    }
-
-    function _onDragStart(
-      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
-    ): void {
-      if (isFunction(props.onDragStart)) {
-        props.onDragStart(e.nativeEvent.payload);
-      }
-    }
-
-    function _onDrag(
-      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
-    ): void {
-      if (isFunction(props.onDrag)) {
-        props.onDrag(e.nativeEvent.payload);
-      }
-    }
-
-    function _onDragEnd(
-      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
-    ): void {
-      if (isFunction(props.onDragEnd)) {
-        props.onDragEnd(e.nativeEvent.payload);
-      }
-    }
-
-    function _getCoordinate(): string | undefined {
-      if (!props.coordinate) {
-        return undefined;
-      }
-      return toJSONString(point(props.coordinate));
-    }
-
-    const _setNativeRef = (nativeRef: Component<NativeProps> | null): void => {
-      _nativeRef.current = nativeRef;
-      _runPendingNativeCommands(nativeRef);
-    };
-
-    const nativeProps = {
-      ...props,
-      anchor,
-      draggable,
-      ref: (nativeRef: Component<NativeProps> | null) =>
-        _setNativeRef(nativeRef),
-      id: props.id,
-      title: props.title,
-      snippet: props.snippet,
-      selected: props.selected,
-      style: [props.style, styles.container],
-      onMapboxPointAnnotationSelected: _onSelected,
-      onMapboxPointAnnotationDeselected: _onDeselected,
-      onMapboxPointAnnotationDragStart: _onDragStart,
-      onMapboxPointAnnotationDrag: _onDrag,
-      onMapboxPointAnnotationDragEnd: _onDragEnd,
-      coordinate: _getCoordinate(),
-    };
-
-    return (
-      <MLRNPointAnnotation {...nativeProps}>
-        {props.children}
-      </MLRNPointAnnotation>
-    );
-  },
-);
-
-// eslint complains about it
-// not sure why only in this component
-PointAnnotation.displayName = "PointAnnotation";
-
-const MLRNPointAnnotation =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/RasterLayer.tsx

@@ -1,41 +0,0 @@
-import { NativeModules, requireNativeComponent } from "react-native";
-
-import {
-  useAbstractLayer,
-  type BaseLayerProps,
-  type NativeBaseProps,
-} from "../hooks/useAbstractLayer";
-import { type BaseProps } from "../types/BaseProps";
-import { type RasterLayerStyle } from "../types/MapLibreRNStyles";
-
-const MLRNModule = NativeModules.MLRNModule;
-
-export const NATIVE_MODULE_NAME = "MLRNRasterLayer";
-
-export interface RasterLayerProps extends BaseProps, BaseLayerProps {
-  /**
-   * Customizable style attributes
-   */
-  style?: RasterLayerStyle;
-}
-
-interface NativeProps
-  extends Omit<RasterLayerProps, "style">,
-    NativeBaseProps {}
-
-const MLRNRasterLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export const RasterLayer = ({
-  sourceID = MLRNModule.StyleSource.DefaultSourceID,
-  ...props
-}: RasterLayerProps) => {
-  const { baseProps, setNativeLayer } = useAbstractLayer<
-    RasterLayerProps,
-    NativeProps
-  >({
-    ...props,
-    sourceID,
-  });
-
-  return <MLRNRasterLayer ref={setNativeLayer} {...baseProps} />;
-};

package/src/components/RasterSource.tsx

@@ -1,112 +0,0 @@
-import { type ReactNode } from "react";
-import { NativeModules, requireNativeComponent } from "react-native";
-
-import { useAbstractSource } from "../hooks/useAbstractSource";
-import { useOnce } from "../hooks/useOnce";
-import { type BaseProps } from "../types/BaseProps";
-import { cloneReactChildrenWithProps } from "../utils";
-
-const MLRNModule = NativeModules.MLRNModule;
-
-export const NATIVE_MODULE_NAME = "MLRNRasterSource";
-
-const isTileTemplateUrl = (url?: string): url is string =>
-  !!url &&
-  (url.includes("{z}") || url.includes("{bbox-") || url.includes("{quadkey}"));
-
-interface RasterSourceProps 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/raster-tiles/{z}/{x}/{y}.png
-   */
-  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;
-  /**
-   * Size of the map tiles.
-   * Mapbox urls default to 256, all others default to 512.
-   */
-  tileSize?: 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;
-
-  children?: ReactNode;
-}
-
-type NativeProps = RasterSourceProps;
-
-const MLRNRasterSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-/**
- * RasterSource is a map content source that supplies raster image tiles 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 RasterSource = ({
-  id = MLRNModule.StyleSource.DefaultSourceID,
-  ...props
-}: RasterSourceProps) => {
-  useOnce(() => {
-    if (props.url && props.tileUrlTemplates) {
-      console.warn(
-        `RasterSource 'url' property contains a Tile URL Template, but is intended for a StyleJSON URL. Please migrate your VectorSource to use: \`tileUrlTemplates=["${props.url}"]\` instead.`,
-      );
-    }
-  });
-
-  const { setNativeRef } = useAbstractSource<NativeProps>();
-
-  let { url, tileUrlTemplates } = props;
-
-  // Swapping url for tileUrlTemplates to provide backward compatiblity
-  // when RasterSource supported only tile url as url prop
-  if (isTileTemplateUrl(url)) {
-    tileUrlTemplates = [url];
-    url = undefined;
-  }
-  const allProps = {
-    ...props,
-    id,
-    url,
-    tileUrlTemplates,
-    minZoomLevel: props.minZoomLevel,
-    maxZoomLevel: props.maxZoomLevel,
-    tileSize: props.tileSize,
-    tms: props.tms,
-    attribution: props.attribution,
-  };
-
-  return (
-    <MLRNRasterSource ref={setNativeRef} {...allProps}>
-      {cloneReactChildrenWithProps(props.children, {
-        sourceID: id,
-      })}
-    </MLRNRasterSource>
-  );
-};