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

package/javascript/components/MarkerView.tsx

@@ -0,0 +1,104 @@
+import {toJSONString} from '../utils';
+import {makePoint} from '../utils/geoUtils';
+
+import PointAnnotation from './PointAnnotation';
+
+import React, {ReactElement} from 'react';
+import {Platform, requireNativeComponent, ViewProps} from 'react-native';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
+
+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.
+ */
+class MarkerView extends React.PureComponent<MarkerViewProps> {
+  static defaultProps = {
+    anchor: {x: 0.5, y: 0.5},
+    allowOverlap: false,
+    isSelected: false,
+  };
+
+  static lastId = 0;
+  __idForPointAnnotation?: string;
+
+  _idForPointAnnotation(): string {
+    if (this.__idForPointAnnotation === undefined) {
+      MarkerView.lastId = MarkerView.lastId + 1;
+      this.__idForPointAnnotation = `MV-${MarkerView.lastId}`;
+    }
+    return this.__idForPointAnnotation;
+  }
+
+  _getCoordinate(): string | undefined {
+    if (!this.props.coordinate) {
+      return undefined;
+    }
+    return toJSONString(makePoint(this.props.coordinate));
+  }
+
+  render(): ReactElement {
+    if (Platform.OS === 'ios') {
+      return (
+        <PointAnnotation id={this._idForPointAnnotation()} {...this.props} />
+      );
+    }
+
+    const props = {
+      ...this.props,
+      anchor: this.props.anchor,
+      coordinate: this._getCoordinate(),
+    };
+
+    return (
+      <RCTMGLMarkerView {...props}>{this.props.children}</RCTMGLMarkerView>
+    );
+  }
+}
+
+const RCTMGLMarkerView =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default MarkerView;

package/javascript/components/{NativeBridgeComponent.js → NativeBridgeComponent.tsx}

@@ -1,27 +1,50 @@
-import {runNativeCommand, isAndroid} from '../utils';
+import {runNativeCommand, isAndroid, NativeArg} from '../utils';
+
+import {Component, SyntheticEvent} from 'react';
+
+export type RNMLEvent<PayloadType = {[key: string]: string}> = {
+  payload: PayloadType;
+  type: string;
+};
 
 let callbackIncrement = 0;
 
-const NativeBridgeComponent = B =>
-  class extends B {
-    constructor(props, nativeModuleName) {
-      super(props);
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
+const NativeBridgeComponent = <
+  Props extends object,
+  BaseComponent extends new (...args: any[]) => Component<Props>,
+>(
+  B: BaseComponent,
+  nativeModuleName: string,
+) => {
+  const NativeBridge = class extends B {
+    _nativeModuleName: string;
+    _onAndroidCallback: (e: any) => void;
+    _callbackMap: Map<string, any>;
+    _preRefMapMethodQueue: any[];
+
+    constructor(...args: any[]) {
+      super(...args);
 
       this._nativeModuleName = nativeModuleName;
-      this._onAndroidCallback = this._onAndroidCallback.bind(this);
+      this._onAndroidCallback = this._onAndroidCallback0.bind(this);
       this._callbackMap = new Map();
       this._preRefMapMethodQueue = [];
     }
 
-    _addAddAndroidCallback(id, resolve, reject) {
+    _addAddAndroidCallback<ReturnType>(
+      id: string,
+      resolve: (value: ReturnType) => void,
+      reject: (error: Error) => void,
+    ): void {
       this._callbackMap.set(id, {resolve, reject});
     }
 
-    _removeAndroidCallback(id) {
-      this._callbackMap.remove(id);
+    _removeAndroidCallback(id: string): void {
+      this._callbackMap.delete(id);
     }
 
-    _onAndroidCallback(e) {
+    _onAndroidCallback0(e: SyntheticEvent<Element, RNMLEvent>): void {
       const callbackID = e.nativeEvent.type;
       const callback = this._callbackMap.get(callbackID);
 
@@ -30,7 +53,7 @@ const NativeBridgeComponent = B =>
       }
 
       this._callbackMap.delete(callbackID);
-      let {payload} = e.nativeEvent;
+      const {payload} = e.nativeEvent;
       if (payload.error) {
         callback.reject.call(null, new Error(payload.error));
       } else {
@@ -38,7 +61,9 @@ const NativeBridgeComponent = B =>
       }
     }
 
-    async _runPendingNativeCommands(nativeRef) {
+    async _runPendingNativeCommands<RefType extends Component>(
+      nativeRef: RefType | null | undefined,
+    ): Promise<void> {
       if (nativeRef) {
         while (this._preRefMapMethodQueue.length > 0) {
           const item = this._preRefMapMethodQueue.pop();
@@ -55,7 +80,11 @@ const NativeBridgeComponent = B =>
       }
     }
 
-    _runNativeCommand(methodName, nativeRef, args = []) {
+    _runNativeCommand<RefType extends Component, ReturnType = NativeArg>(
+      methodName: string,
+      nativeRef: RefType | undefined | null,
+      args: NativeArg[] = [],
+    ): Promise<ReturnType> {
       if (!nativeRef) {
         return new Promise(resolve => {
           this._preRefMapMethodQueue.push({
@@ -82,5 +111,7 @@ const NativeBridgeComponent = B =>
       );
     }
   };
+  return NativeBridge;
+};
 
 export default NativeBridgeComponent;

package/javascript/components/NativeUserLocation.tsx

@@ -0,0 +1,33 @@
+import React, {ReactElement} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
+
+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;
+}
+
+class NativeUserLocation extends React.Component<NativeUserLocationProps> {
+  render(): ReactElement {
+    return <RCTMGLNativeUserLocation {...this.props} />;
+  }
+}
+
+const RCTMGLNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
+
+export default NativeUserLocation;

package/javascript/components/PointAnnotation.tsx

@@ -0,0 +1,221 @@
+import {toJSONString, isFunction} from '../utils';
+import {makePoint} from '../utils/geoUtils';
+
+import NativeBridgeComponent, {RNMLEvent} from './NativeBridgeComponent';
+
+import React, {Component, ReactElement, SyntheticEvent} from 'react';
+import {
+  requireNativeComponent,
+  StyleSheet,
+  Platform,
+  ViewProps,
+} from 'react-native';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+});
+
+type FeaturePayload = GeoJSON.Feature<
+  GeoJSON.Point,
+  {
+    screenPointX: number;
+    screenPointY: number;
+  }
+>;
+
+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'];
+}
+
+/**
+ * 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.
+ */
+class PointAnnotation extends NativeBridgeComponent(
+  React.PureComponent<PointAnnotationProps>,
+  NATIVE_MODULE_NAME,
+) {
+  static defaultProps = {
+    anchor: {x: 0.5, y: 0.5},
+    draggable: false,
+  };
+
+  _nativeRef: Component<NativeProps> | null = null;
+
+  constructor(props: PointAnnotationProps) {
+    super(props);
+    this._onSelected = this._onSelected.bind(this);
+    this._onDeselected = this._onDeselected.bind(this);
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDrag = this._onDrag.bind(this);
+    this._onDragEnd = this._onDragEnd.bind(this);
+  }
+
+  _onSelected(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
+    if (isFunction(this.props.onSelected)) {
+      this.props.onSelected(e.nativeEvent.payload);
+    }
+  }
+
+  _onDeselected(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
+    if (isFunction(this.props.onDeselected)) {
+      this.props.onDeselected(e.nativeEvent.payload);
+    }
+  }
+
+  _onDragStart(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
+    if (isFunction(this.props.onDragStart)) {
+      this.props.onDragStart(e.nativeEvent.payload);
+    }
+  }
+
+  _onDrag(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
+    if (isFunction(this.props.onDrag)) {
+      this.props.onDrag(e.nativeEvent.payload);
+    }
+  }
+
+  _onDragEnd(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
+    if (isFunction(this.props.onDragEnd)) {
+      this.props.onDragEnd(e.nativeEvent.payload);
+    }
+  }
+
+  _getCoordinate(): string | undefined {
+    if (!this.props.coordinate) {
+      return undefined;
+    }
+    return toJSONString(makePoint(this.props.coordinate));
+  }
+
+  /**
+   * 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(): void {
+    if (Platform.OS === 'android') {
+      this._runNativeCommand('refresh', this._nativeRef, []);
+    }
+  }
+
+  _setNativeRef(nativeRef: Component<NativeProps> | null): void {
+    this._nativeRef = nativeRef;
+    super._runPendingNativeCommands(nativeRef);
+  }
+
+  render(): ReactElement {
+    const props = {
+      ...this.props,
+      ref: (nativeRef: Component<NativeProps> | null) =>
+        this._setNativeRef(nativeRef),
+      id: this.props.id,
+      title: this.props.title,
+      snippet: this.props.snippet,
+      anchor: this.props.anchor,
+      selected: this.props.selected,
+      draggable: this.props.draggable,
+      style: [this.props.style, styles.container],
+      onMapboxPointAnnotationSelected: this._onSelected,
+      onMapboxPointAnnotationDeselected: this._onDeselected,
+      onMapboxPointAnnotationDragStart: this._onDragStart,
+      onMapboxPointAnnotationDrag: this._onDrag,
+      onMapboxPointAnnotationDragEnd: this._onDragEnd,
+      coordinate: this._getCoordinate(),
+    };
+    return (
+      <RCTMGLPointAnnotation {...props}>
+        {this.props.children}
+      </RCTMGLPointAnnotation>
+    );
+  }
+}
+
+interface NativeProps extends Omit<PointAnnotationProps, 'coordinate'> {
+  coordinate?: string;
+}
+
+const RCTMGLPointAnnotation =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default PointAnnotation;

package/javascript/components/RasterLayer.tsx

@@ -0,0 +1,41 @@
+import {RasterLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactElement} from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
+
+interface RasterLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: RasterLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<RasterLayerProps, 'style'>,
+    NativeBaseProps {}
+
+class RasterLayer extends AbstractLayer<RasterLayerProps, NativeProps> {
+  static defaultProps = {
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  render(): ReactElement {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLRasterLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default RasterLayer;

package/javascript/components/RasterSource.tsx

@@ -0,0 +1,117 @@
+import {cloneReactChildrenWithProps} from '../utils';
+import BaseProps from '../types/BaseProps';
+
+import AbstractSource from './AbstractSource';
+
+import {NativeModules, requireNativeComponent} from 'react-native';
+import React, {ReactElement} from 'react';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLRasterSource';
+
+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;
+
+/**
+ * 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.
+ */
+class RasterSource extends AbstractSource<RasterSourceProps, NativeProps> {
+  static defaultProps = {
+    id: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: RasterSourceProps) {
+    super(props);
+    if (isTileTemplateUrl(props.url)) {
+      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.`,
+      );
+    }
+  }
+
+  render(): ReactElement {
+    let {url} = this.props;
+    let {tileUrlTemplates} = this.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 props = {
+      ...this.props,
+      id: this.props.id,
+      url,
+      tileUrlTemplates,
+      minZoomLevel: this.props.minZoomLevel,
+      maxZoomLevel: this.props.maxZoomLevel,
+      tileSize: this.props.tileSize,
+      tms: this.props.tms,
+      attribution: this.props.attribution,
+    };
+    return (
+      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLRasterSource>
+    );
+  }
+}
+
+const RCTMGLRasterSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default RasterSource;