@rnmapbox/maps 10.0.0-beta.28

package/javascript/components/MarkerView.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Platform, NativeModules, requireNativeComponent } from 'react-native';
+
+import { toJSONString, viewPropTypes } from '../utils';
+import { makePoint } from '../utils/geoUtils';
+
+import PointAnnotation from './PointAnnotation';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
+
+/**
+ * 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 {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * The center point (specified as a map coordinate) of the marker.
+     * See also #anchor.
+     */
+    coordinate: PropTypes.arrayOf(PropTypes.number).isRequired,
+
+    /**
+     * 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: PropTypes.shape({
+      /**
+       * `x` of anchor
+       */
+      x: PropTypes.number.isRequired,
+      /**
+       * `y` of anchor
+       */
+      y: PropTypes.number.isRequired,
+    }),
+
+    /**
+     * Expects one child - can be container with multiple elements
+     */
+    children: PropTypes.element.isRequired,
+  };
+
+  static defaultProps = {
+    anchor: { x: 0.5, y: 0.5 },
+  };
+
+  _getCoordinate() {
+    if (!this.props.coordinate) {
+      return undefined;
+    }
+    return toJSONString(makePoint(this.props.coordinate));
+  }
+
+  render() {
+    if (Platform.OS === 'ios' && !MapboxGL.MapboxV10) {
+      return <PointAnnotation {...this.props} />;
+    }
+
+    const props = {
+      ...this.props,
+      anchor: this.props.anchor,
+      coordinate: this._getCoordinate(),
+    };
+
+    return (
+      <RCTMGLMarkerView {...props}>{this.props.children}</RCTMGLMarkerView>
+    );
+  }
+}
+
+const RCTMGLMarkerView =
+  Platform.OS === 'android'
+    ? requireNativeComponent(NATIVE_MODULE_NAME, MarkerView, {})
+    : MapboxGL.MapboxV10
+    ? requireNativeComponent(NATIVE_MODULE_NAME, MarkerView, {})
+    : undefined;
+
+export default MarkerView;

package/javascript/components/NativeBridgeComponent.js

@@ -0,0 +1,86 @@
+import { runNativeCommand, isAndroid } from '../utils';
+
+let callbackIncrement = 0;
+
+const NativeBridgeComponent = (B) =>
+  class extends B {
+    constructor(props, nativeModuleName) {
+      super(props);
+
+      this._nativeModuleName = nativeModuleName;
+      this._onAndroidCallback = this._onAndroidCallback.bind(this);
+      this._callbackMap = new Map();
+      this._preRefMapMethodQueue = [];
+    }
+
+    _addAddAndroidCallback(id, resolve, reject) {
+      this._callbackMap.set(id, { resolve, reject });
+    }
+
+    _removeAndroidCallback(id) {
+      this._callbackMap.remove(id);
+    }
+
+    _onAndroidCallback(e) {
+      const callbackID = e.nativeEvent.type;
+      const callback = this._callbackMap.get(callbackID);
+
+      if (!callback) {
+        return;
+      }
+
+      this._callbackMap.delete(callbackID);
+      let { payload } = e.nativeEvent;
+      if (payload.error) {
+        callback.reject.call(null, new Error(payload.error));
+      } else {
+        callback.resolve.call(null, payload);
+      }
+    }
+
+    async _runPendingNativeCommands(nativeRef) {
+      if (nativeRef) {
+        while (this._preRefMapMethodQueue.length > 0) {
+          const item = this._preRefMapMethodQueue.pop();
+
+          if (item && item.method && item.resolver) {
+            const res = await this._runNativeCommand(
+              item.method.name,
+              nativeRef,
+              item.method.args,
+            );
+            item.resolver(res);
+          }
+        }
+      }
+    }
+
+    _runNativeCommand(methodName, nativeRef, args = []) {
+      if (!nativeRef) {
+        return new Promise((resolve) => {
+          this._preRefMapMethodQueue.push({
+            method: { name: methodName, args },
+            resolver: resolve,
+          });
+        });
+      }
+
+      if (isAndroid()) {
+        return new Promise((resolve, reject) => {
+          callbackIncrement += 1;
+          const callbackID = `${methodName}_${callbackIncrement}`;
+          this._addAddAndroidCallback(callbackID, resolve, reject);
+          args.unshift(callbackID);
+          runNativeCommand(this._nativeModuleName, methodName, nativeRef, args);
+        });
+      }
+      return runNativeCommand(
+        this._nativeModuleName,
+        methodName,
+        nativeRef,
+        args,
+      );
+    }
+  };
+
+export default NativeBridgeComponent;

package/javascript/components/NativeUserLocation.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { requireNativeComponent } from 'react-native';
+import PropTypes from 'prop-types';
+
+const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
+
+class NativeUserLocation extends React.Component {
+  static propTypes = {
+    /**
+     * Android render mode.
+     *
+     *  - normal: just a circle
+     *  - compass: triangle with heading
+     *  - gps: large arrow
+     *
+     * @platform android
+     */
+    androidRenderMode: PropTypes.oneOf(['normal', 'compass', 'gps']),
+
+    /**
+     * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
+     *
+     * @platform ios
+     */
+    iosShowsUserHeadingIndicator: PropTypes.bool,
+  };
+
+  render() {
+    return <RCTMGLNativeUserLocation {...this.props} />;
+  }
+}
+
+const RCTMGLNativeUserLocation = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  NativeUserLocation,
+  {
+    nativeOnly: {},
+  },
+);
+
+export default NativeUserLocation;

package/javascript/components/PointAnnotation.js

@@ -0,0 +1,217 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { requireNativeComponent, StyleSheet, Platform } from 'react-native';
+
+import { toJSONString, isFunction, viewPropTypes } from '../utils';
+import { makePoint } from '../utils/geoUtils';
+
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+});
+
+/**
+ * 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.
+ */
+class PointAnnotation extends NativeBridgeComponent(React.PureComponent) {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * A string that uniquely identifies the annotation
+     */
+    id: PropTypes.string.isRequired,
+
+    /**
+     * 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: PropTypes.string,
+
+    /**
+     * The string containing the annotation’s snippet(subtitle). Not displayed in the default callout.
+     */
+    snippet: PropTypes.string,
+
+    /**
+     * Manually selects/deselects annotation
+     * @type {[type]}
+     */
+    selected: PropTypes.bool,
+
+    /**
+     * Enable or disable dragging. Defaults to false.
+     */
+    draggable: PropTypes.bool,
+
+    /**
+     * The center point (specified as a map coordinate) of the annotation.
+     */
+    coordinate: PropTypes.arrayOf(PropTypes.number).isRequired,
+
+    /**
+     * 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: PropTypes.shape({
+      /**
+       * See anchor
+       */
+      x: PropTypes.number.isRequired,
+      /**
+       * See anchor
+       */
+      y: PropTypes.number.isRequired,
+    }),
+
+    /**
+     * This callback is fired once this annotation is selected. Returns a Feature as the first param.
+     */
+    onSelected: PropTypes.func,
+
+    /**
+     * This callback is fired once this annotation is deselected.
+     */
+    onDeselected: PropTypes.func,
+
+    /**
+     * This callback is fired once this annotation has started being dragged.
+     */
+    onDragStart: PropTypes.func,
+
+    /**
+     * This callback is fired once this annotation has stopped being dragged.
+     */
+    onDragEnd: PropTypes.func,
+
+    /**
+     * This callback is fired while this annotation is being dragged.
+     */
+    onDrag: PropTypes.func,
+  };
+
+  static defaultProps = {
+    anchor: { x: 0.5, y: 0.5 },
+    draggable: false,
+  };
+
+  constructor(props) {
+    super(props, NATIVE_MODULE_NAME);
+    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) {
+    if (isFunction(this.props.onSelected)) {
+      this.props.onSelected(e.nativeEvent.payload);
+    }
+  }
+
+  _onDeselected(e) {
+    if (isFunction(this.props.onDeselected)) {
+      this.props.onDeselected(e.nativeEvent.payload);
+    }
+  }
+
+  _onDragStart(e) {
+    if (isFunction(this.props.onDragStart)) {
+      this.props.onDragStart(e.nativeEvent.payload);
+    }
+  }
+
+  _onDrag(e) {
+    if (isFunction(this.props.onDrag)) {
+      this.props.onDrag(e.nativeEvent.payload);
+    }
+  }
+
+  _onDragEnd(e) {
+    if (isFunction(this.props.onDragEnd)) {
+      this.props.onDragEnd(e.nativeEvent.payload);
+    }
+  }
+
+  _getCoordinate() {
+    if (!this.props.coordinate) {
+      return undefined;
+    }
+    return toJSONString(makePoint(this.props.coordinate));
+  }
+
+  /**
+   * On v10 and pre v10 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() {
+    if (Platform.OS === 'android') {
+      this._runNativeCommand('refresh', this._nativeRef, []);
+    } else {
+      this._runNativeCommand('refresh', this._nativeRef, []);
+    }
+  }
+
+  _setNativeRef(nativeRef) {
+    this._nativeRef = nativeRef;
+    super._runPendingNativeCommands(nativeRef);
+  }
+
+  render() {
+    const props = {
+      ...this.props,
+      ref: (nativeRef) => 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>
+    );
+  }
+}
+
+const RCTMGLPointAnnotation = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  PointAnnotation,
+  {
+    nativeOnly: {
+      onMapboxPointAnnotationSelected: true,
+      onMapboxPointAnnotationDeselected: true,
+      onMapboxPointAnnotationDragStart: true,
+      onMapboxPointAnnotationDrag: true,
+      onMapboxPointAnnotationDragEnd: true,
+    },
+  },
+);
+
+export default PointAnnotation;

package/javascript/components/RasterDemSource.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { cloneReactChildrenWithProps, viewPropTypes } from '../utils';
+
+import AbstractSource from './AbstractSource';
+
+const isTileTemplateUrl = (url) =>
+  url &&
+  (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLRasterDemSource';
+
+class RasterDemSource extends AbstractSource {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * A string that uniquely identifies the source.
+     */
+    id: PropTypes.string.isRequired,
+
+    /**
+     * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
+     */
+    url: PropTypes.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: PropTypes.arrayOf(PropTypes.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: PropTypes.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: PropTypes.number,
+
+    /**
+     * Size of the map tiles.
+     * Mapbox urls default to 256, all others default to 512.
+     */
+    tileSize: PropTypes.number,
+  };
+
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props) {
+    super(props);
+    if (isTileTemplateUrl(props.url)) {
+      console.warn(
+        `RasterDemSource '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() {
+    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,
+    };
+    return (
+      <RCTMGLRasterDemSource ref="nativeSource" {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLRasterDemSource>
+    );
+  }
+}
+
+const RCTMGLRasterDemSource = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  RasterDemSource,
+);
+
+export default RasterDemSource;

package/javascript/components/RasterLayer.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { viewPropTypes } from '../utils';
+import { RasterLayerStyleProp } from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
+
+class RasterLayer extends AbstractLayer {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * A string that uniquely identifies the source in the style to which it is added.
+     */
+    id: PropTypes.string.isRequired,
+
+    /**
+     * The source from which to obtain the data to style.
+     * If the source has not yet been added to the current style, the behavior is undefined.
+     * Inferred from parent source only if the layer is a direct child to it.
+     */
+    sourceID: PropTypes.string,
+
+    /**
+     * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+     */
+    sourceLayerID: PropTypes.string,
+
+    /**
+     * Inserts a layer above aboveLayerID.
+     */
+    aboveLayerID: PropTypes.string,
+
+    /**
+     * Inserts a layer below belowLayerID
+     */
+    belowLayerID: PropTypes.string,
+
+    /**
+     * Inserts a layer at a specified index
+     */
+    layerIndex: PropTypes.number,
+
+    /**
+     *  Filter only the features in the source layer that satisfy a condition that you define
+     */
+    filter: PropTypes.array,
+
+    /**
+     * The minimum zoom level at which the layer gets parsed and appears.
+     */
+    minZoomLevel: PropTypes.number,
+
+    /**
+     * The maximum zoom level at which the layer gets parsed and appears.
+     */
+    maxZoomLevel: PropTypes.number,
+
+    /**
+     * Customizable style attributes
+     */
+    style: PropTypes.oneOfType([
+      RasterLayerStyleProp,
+      PropTypes.arrayOf(RasterLayerStyleProp),
+    ]),
+  };
+
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLRasterLayer ref="nativeLayer" {...props} />;
+  }
+}
+
+const RCTMGLRasterLayer = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  RasterLayer,
+  {
+    nativeOnly: { reactStyle: true },
+  },
+);
+
+export default RasterLayer;