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

package/javascript/components/MarkerView.tsx

@@ -0,0 +1,88 @@
+import React, { ReactElement, useMemo } from "react";
+import { Platform, requireNativeComponent, ViewProps } from "react-native";
+
+import PointAnnotation from "./PointAnnotation";
+import { toJSONString } from "../utils";
+import { makePoint } from "../utils/geoUtils";
+
+export const NATIVE_MODULE_NAME = "RCTMLNMarkerView";
+
+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: React.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://docs.mapbox.com/android/plugins/overview/markerview/) on Android
+ * and PointAnnotation on iOS.
+ */
+const MarkerView = (props: MarkerViewProps): ReactElement => {
+  const coordinate = props.coordinate
+    ? toJSONString(makePoint(props.coordinate))
+    : undefined;
+
+  const idForPointAnnotation = useMemo(() => {
+    MarkerView.lastId = MarkerView.lastId + 1;
+    return `MV-${MarkerView.lastId}`;
+  }, []);
+
+  if (Platform.OS === "ios") {
+    return <PointAnnotation id={idForPointAnnotation} {...props} />;
+  }
+
+  const propsToSend = {
+    ...props,
+    coordinate,
+  };
+
+  return <RCTMLNMarkerView {...propsToSend}>{props.children}</RCTMLNMarkerView>;
+};
+
+MarkerView.lastId = 0;
+MarkerView.defaultProps = {
+  anchor: { x: 0.5, y: 0.5 },
+  allowOverlap: false,
+  isSelected: false,
+};
+
+const RCTMLNMarkerView =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default MarkerView;

package/javascript/components/NativeUserLocation.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from "react";
+import { requireNativeComponent } from "react-native";
+
+const NATIVE_MODULE_NAME = "RCTMLNNativeUserLocation";
+
+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;
+}
+
+const NativeUserLocation = (props: NativeUserLocationProps): ReactElement => {
+  return <RCTMLNNativeUserLocation {...props} />;
+};
+
+const RCTMLNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
+
+export default NativeUserLocation;

package/javascript/components/PointAnnotation.tsx

@@ -0,0 +1,245 @@
+import React, {
+  Component,
+  SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  ReactElement,
+} from "react";
+import {
+  Platform,
+  StyleSheet,
+  ViewProps,
+  requireNativeComponent,
+} from "react-native";
+
+import useNativeBridge, { RNMLEvent } from "../hooks/useNativeBridge";
+import { isFunction, toJSONString } from "../utils";
+import { makePoint } from "../utils/geoUtils";
+
+export const NATIVE_MODULE_NAME = "RCTMLNPointAnnotation";
+
+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
+   * @type {[type]}
+   */
+  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: React.ReactElement | [React.ReactElement, React.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 interctive views please use MarkerView,
+ * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
+ */
+const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
+  (
+    {
+      anchor = { x: 0.5, y: 0.5 },
+      draggable = false,
+      ...props
+    }: PointAnnotationProps,
+    ref,
+  ): ReactElement => {
+    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(makePoint(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 (
+      <RCTMLNPointAnnotation {...nativeProps}>
+        {props.children}
+      </RCTMLNPointAnnotation>
+    );
+  },
+);
+
+// eslint complains about it
+// not sure why only in this component
+PointAnnotation.displayName = "PointAnnotation";
+
+const RCTMLNPointAnnotation =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default PointAnnotation;

package/javascript/components/RasterLayer.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { RasterLayerStyleProps } from "../utils/MaplibreStyles";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNRasterLayer";
+
+export interface RasterLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: RasterLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<RasterLayerProps, "style">,
+    NativeBaseProps {}
+
+const RCTMLNRasterLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+const RasterLayer: React.FC<RasterLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: RasterLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    RasterLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNRasterLayer ref={setNativeLayer} {...baseProps} />;
+};
+
+export default RasterLayer;

package/javascript/components/RasterSource.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import useOnce from "../hooks/useOnce";
+import BaseProps from "../types/BaseProps";
+import { cloneReactChildrenWithProps } from "../utils";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNRasterSource";
+
+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?: React.ReactElement | React.ReactElement[];
+}
+
+type NativeProps = RasterSourceProps;
+
+const RCTMLNRasterSource =
+  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.
+ */
+const RasterSource: React.FC<RasterSourceProps> = ({
+  id = MapLibreGL.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 (
+    <RCTMLNRasterSource ref={setNativeRef} {...allProps}>
+      {cloneReactChildrenWithProps(props.children, {
+        sourceID: id,
+      })}
+    </RCTMLNRasterSource>
+  );
+};
+
+export default RasterSource;