@rnmapbox/maps 10.0.0-beta.28

package/javascript/components/VectorSource.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import {
+  cloneReactChildrenWithProps,
+  viewPropTypes,
+  isFunction,
+  isAndroid,
+} from '../utils';
+import { getFilter } from '../utils/filterUtils';
+import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+
+/**
+ * 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.
+ */
+class VectorSource extends NativeBridgeComponent(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/vector-tiles/{z}/{x}/{y}.pbf
+     */
+    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,
+
+    /**
+     * Influences the y direction of the tile coordinates. (tms inverts y axis)
+     */
+    tms: PropTypes.bool,
+
+    /**
+     * 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: PropTypes.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
+     *
+     * @param {Object} event
+     * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
+     * @param {Object} event.coordinates - the coordinates of the click
+     * @param {Object} event.point - the point of the click
+     */
+    onPress: PropTypes.func,
+
+    /**
+     * Overrides the default touch hitbox(44x44 pixels) for the source layers
+     */
+    hitbox: PropTypes.shape({
+      /**
+       * `width` of hitbox
+       */
+      width: PropTypes.number.isRequired,
+      /**
+       * `height` of hitbox
+       */
+      height: PropTypes.number.isRequired,
+    }),
+  };
+
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props) {
+    super(props, NATIVE_MODULE_NAME);
+  }
+
+  _setNativeRef(nativeRef) {
+    this._nativeRef = nativeRef;
+    super._runPendingNativeCommands(nativeRef);
+  }
+
+  /**
+   * 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 {FeatureCollection}
+   */
+  async features(layerIDs = [], filter = []) {
+    const res = await this._runNativeCommand('features', this._nativeRef, [
+      layerIDs,
+      getFilter(filter),
+    ]);
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  onPress(event) {
+    const {
+      nativeEvent: {
+        payload: { features, coordinates, point },
+      },
+    } = event;
+    let newEvent = {
+      features,
+      coordinates,
+      point,
+    };
+    newEvent = copyPropertiesAsDeprecated(
+      event,
+      newEvent,
+      (key) => {
+        console.warn(
+          `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
+        );
+      },
+      {
+        nativeEvent: (origNativeEvent) => ({
+          ...origNativeEvent,
+          payload: features[0],
+        }),
+      },
+    );
+    this.props.onPress(newEvent);
+  }
+
+  render() {
+    const props = {
+      id: this.props.id,
+      url: this.props.url,
+      tileUrlTemplates: this.props.tileUrlTemplates,
+      minZoomLevel: this.props.minZoomLevel,
+      maxZoomLevel: this.props.maxZoomLevel,
+      tms: this.props.tms,
+      attribution: this.props.attribution,
+      hitbox: this.props.hitbox,
+      hasPressListener: isFunction(this.props.onPress),
+      onMapboxVectorSourcePress: this.onPress.bind(this),
+      onPress: undefined,
+      ref: (nativeRef) => this._setNativeRef(nativeRef),
+      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
+    };
+    return (
+      <RCTMGLVectorSource ref="nativeSource" {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLVectorSource>
+    );
+  }
+}
+
+const RCTMGLVectorSource = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  VectorSource,
+  {
+    nativeOnly: {
+      hasPressListener: true,
+      onMapboxVectorSourcePress: true,
+    },
+  },
+);
+
+export default VectorSource;

package/javascript/components/annotations/Annotation.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Easing } from 'react-native';
+import PropTypes from 'prop-types';
+
+import SymbolLayer from '../SymbolLayer';
+import Animated from '../../utils/animated/Animated';
+import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
+
+class Annotation extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    animated: PropTypes.bool,
+    animationDuration: PropTypes.number,
+    animationEasingFunction: PropTypes.func,
+    coordinates: PropTypes.arrayOf(PropTypes.number),
+    onPress: PropTypes.func,
+    children: PropTypes.any,
+    style: PropTypes.any,
+    icon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.object,
+    ]),
+  };
+
+  static defaultProps = {
+    animated: false,
+    animationDuration: 1000,
+    animationEasingFunction: Easing.linear,
+  };
+
+  constructor(props) {
+    super(props);
+
+    const shape = this._getShapeFromProps(props);
+
+    this.state = {
+      shape: props.animated ? new AnimatedMapPoint(shape) : shape,
+    };
+
+    this.onPress = this.onPress.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!Array.isArray(this.props.coordinates)) {
+      this.setState({ shape: null });
+      return;
+    }
+
+    const hasCoordChanged =
+      prevProps.coordinates[0] !== this.props.coordinates[0] ||
+      prevProps.coordinates[1] !== this.props.coordinates[1];
+
+    if (!hasCoordChanged) {
+      return;
+    }
+
+    if (this.props.animated && this.state.shape) {
+      // flush current animations
+      this.state.shape.stopAnimation();
+
+      this.state.shape
+        .timing({
+          coordinates: this.props.coordinates,
+          easing: this.props.animationEasingFunction,
+          duration: this.props.animationDuration,
+        })
+        .start();
+    } else if (!this.state.shape || !this.props.animated) {
+      const shape = this._getShapeFromProps(this.props);
+
+      this.setState({
+        shape: this.props.animated ? new AnimatedMapPoint(shape) : shape,
+      });
+    }
+  }
+
+  onPress() {
+    if (this.props.onPress) {
+      this.props.onPress();
+    }
+  }
+
+  _getShapeFromProps(props = {}) {
+    const lng = props.coordinates[0] || 0;
+    const lat = props.coordinates[1] || 0;
+    return { type: 'Point', coordinates: [lng, lat] };
+  }
+
+  get symbolStyle() {
+    if (!this.props.icon) {
+      return undefined;
+    }
+    return Object.assign({}, this.props.style, {
+      iconImage: this.props.icon,
+    });
+  }
+
+  render() {
+    if (!this.props.coordinates) {
+      return null;
+    }
+
+    return (
+      <Animated.ShapeSource
+        id={this.props.id}
+        ref="source"
+        onPress={this.onPress}
+        shape={this.state.shape}
+      >
+        {this.symbolStyle && (
+          <SymbolLayer
+            id={`${this.props.id}-symbol`}
+            style={this.symbolStyle}
+          />
+        )}
+        {this.props.children}
+      </Animated.ShapeSource>
+    );
+  }
+}
+
+export default Annotation;

package/javascript/index.js

@@ -0,0 +1,139 @@
+import { NativeModules } from 'react-native';
+
+import { Camera } from './components/Camera';
+import { Atmosphere } from './components/Atmosphere';
+import MapView from './components/MapView';
+import Light from './components/Light';
+import PointAnnotation from './components/PointAnnotation';
+import Annotation from './components/annotations/Annotation';
+import Callout from './components/Callout';
+import UserLocation from './components/UserLocation';
+import VectorSource from './components/VectorSource';
+import ShapeSource from './components/ShapeSource';
+import RasterSource from './components/RasterSource';
+import RasterDemSource from './components/RasterDemSource';
+import ImageSource from './components/ImageSource';
+import Images from './components/Images';
+import FillLayer from './components/FillLayer';
+import FillExtrusionLayer from './components/FillExtrusionLayer';
+import HeatmapLayer from './components/HeatmapLayer';
+import LineLayer from './components/LineLayer';
+import CircleLayer from './components/CircleLayer';
+import SkyLayer from './components/SkyLayer';
+import SymbolLayer from './components/SymbolLayer';
+import RasterLayer from './components/RasterLayer';
+import BackgroundLayer from './components/BackgroundLayer';
+import Terrain from './components/Terrain';
+import locationManager from './modules/location/locationManager';
+import offlineManager from './modules/offline/offlineManager';
+import snapshotManager from './modules/snapshot/snapshotManager';
+import MarkerView from './components/MarkerView';
+import Animated from './utils/animated/Animated';
+import AnimatedMapPoint from './utils/animated/AnimatedPoint';
+import AnimatedShape from './utils/animated/AnimatedShape';
+import AnimatedCoordinatesArray from './utils/animated/AnimatedCoordinatesArray';
+import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtractCoordinateFromArray';
+import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordinatesArray';
+import Style from './components/Style';
+import Logger from './utils/Logger';
+import { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions';
+
+const MapboxGL = { ...NativeModules.MGLModule };
+
+// static methods
+MapboxGL.requestAndroidLocationPermissions = requestAndroidLocationPermissions;
+MapboxGL.UserTrackingModes = Camera.UserTrackingModes;
+
+// components
+MapboxGL.MapView = MapView;
+MapboxGL.Light = Light;
+MapboxGL.PointAnnotation = PointAnnotation;
+MapboxGL.Callout = Callout;
+MapboxGL.UserLocation = UserLocation;
+MapboxGL.Camera = Camera;
+MapboxGL.Style = Style;
+
+// annotations
+MapboxGL.Annotation = Annotation;
+MapboxGL.MarkerView = MarkerView;
+
+// sources
+MapboxGL.VectorSource = VectorSource;
+MapboxGL.ShapeSource = ShapeSource;
+MapboxGL.RasterSource = RasterSource;
+MapboxGL.ImageSource = ImageSource;
+MapboxGL.Images = Images;
+MapboxGL.RasterDemSource = RasterDemSource;
+
+// layers
+MapboxGL.FillLayer = FillLayer;
+MapboxGL.FillExtrusionLayer = FillExtrusionLayer;
+MapboxGL.HeatmapLayer = HeatmapLayer;
+MapboxGL.LineLayer = LineLayer;
+MapboxGL.CircleLayer = CircleLayer;
+MapboxGL.SkyLayer = SkyLayer;
+MapboxGL.SymbolLayer = SymbolLayer;
+MapboxGL.RasterLayer = RasterLayer;
+MapboxGL.BackgroundLayer = BackgroundLayer;
+
+MapboxGL.Terrain = Terrain;
+MapboxGL.Atmosphere = Atmosphere;
+
+// modules
+MapboxGL.locationManager = locationManager;
+MapboxGL.offlineManager = offlineManager;
+MapboxGL.snapshotManager = snapshotManager;
+
+// animated
+MapboxGL.Animated = Animated;
+
+// utils
+MapboxGL.AnimatedPoint = AnimatedMapPoint;
+MapboxGL.AnimatedCoordinatesArray = AnimatedCoordinatesArray;
+MapboxGL.AnimatedExtractCoordinateFromArray =
+  AnimatedExtractCoordinateFromArray;
+MapboxGL.AnimatedRouteCoordinatesArray = AnimatedRouteCoordinatesArray;
+MapboxGL.AnimatedShape = AnimatedShape;
+MapboxGL.Logger = Logger;
+
+const { LineJoin } = MapboxGL;
+
+export {
+  MapView,
+  Light,
+  PointAnnotation,
+  Callout,
+  UserLocation,
+  Camera,
+  Annotation,
+  MarkerView,
+  VectorSource,
+  ShapeSource,
+  RasterSource,
+  RasterDemSource,
+  ImageSource,
+  Images,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  LineLayer,
+  CircleLayer,
+  SkyLayer,
+  SymbolLayer,
+  RasterLayer,
+  BackgroundLayer,
+  Terrain,
+  Atmosphere,
+  locationManager,
+  offlineManager,
+  snapshotManager,
+  AnimatedMapPoint,
+  AnimatedCoordinatesArray,
+  AnimatedShape,
+  Animated,
+  LineJoin,
+  Logger,
+  Style,
+};
+
+export default MapboxGL;

package/javascript/modules/location/locationManager.js

@@ -0,0 +1,101 @@
+import { NativeModules, NativeEventEmitter } from 'react-native';
+
+const MapboxGL = NativeModules.MGLModule;
+const MapboxGLLocationManager = NativeModules.MGLLocationModule;
+
+export const LocationModuleEventEmitter = new NativeEventEmitter(
+  MapboxGLLocationManager,
+);
+
+class LocationManager {
+  constructor() {
+    this._listeners = [];
+    this._lastKnownLocation = null;
+    this._isListening = false;
+    this.onUpdate = this.onUpdate.bind(this);
+    this.subscription = null;
+  }
+
+  async getLastKnownLocation() {
+    if (!this._lastKnownLocation) {
+      let lastKnownLocation;
+
+      // as location can be brittle it might happen,
+      // that we get an exception from native land
+      // let's silently catch it and simply log out
+      // instead of throwing an exception
+      try {
+        lastKnownLocation =
+          await MapboxGLLocationManager.getLastKnownLocation();
+      } catch (error) {
+        console.log('locationManager Error: ', error);
+      }
+
+      if (!this._lastKnownLocation && lastKnownLocation) {
+        this._lastKnownLocation = lastKnownLocation;
+      }
+    }
+
+    return this._lastKnownLocation;
+  }
+
+  addListener(listener) {
+    if (!this._isListening) {
+      this.start();
+    }
+    if (!this._listeners.includes(listener)) {
+      this._listeners.push(listener);
+
+      if (this._lastKnownLocation) {
+        listener(this._lastKnownLocation);
+      }
+    }
+  }
+
+  removeListener(listener) {
+    this._listeners = this._listeners.filter((l) => l !== listener);
+    if (this._listeners.length === 0) {
+      this.stop();
+    }
+  }
+
+  removeAllListeners() {
+    this._listeners = [];
+    this.stop();
+  }
+
+  start(displacement = 0) {
+    if (!this._isListening) {
+      MapboxGLLocationManager.start(displacement);
+
+      this.subscription = LocationModuleEventEmitter.addListener(
+        MapboxGL.LocationCallbackName.Update,
+        this.onUpdate,
+      );
+
+      this._isListening = true;
+    }
+  }
+
+  stop() {
+    MapboxGLLocationManager.stop();
+
+    if (this._isListening) {
+      this.subscription.remove();
+    }
+
+    this._isListening = false;
+  }
+
+  setMinDisplacement(minDisplacement) {
+    MapboxGLLocationManager.setMinDisplacement(minDisplacement);
+  }
+
+  onUpdate(location) {
+    this._lastKnownLocation = location;
+
+    this._listeners.forEach((l) => l(location));
+  }
+}
+
+export default new LocationManager();

package/javascript/modules/offline/OfflineCreatePackOptions.js

@@ -0,0 +1,46 @@
+import { makeLatLngBounds } from '../../utils/geoUtils';
+import { toJSONString } from '../../utils';
+
+class OfflineCreatePackOptions {
+  constructor(options = {}) {
+    this._assert(options);
+
+    this.name = options.name;
+    this.styleURL = options.styleURL;
+    this.bounds = this._makeLatLngBounds(options.bounds);
+    this.minZoom = options.minZoom;
+    this.maxZoom = options.maxZoom;
+    this.metadata = this._makeMetadata(options.metadata);
+  }
+
+  _assert(options) {
+    if (!options.styleURL) {
+      throw new Error(
+        'Style URL must be provided for creating an offline pack',
+      );
+    }
+
+    if (!options.name) {
+      throw new Error('Name must be provided for creating an offline pack');
+    }
+
+    if (!options.bounds) {
+      throw new Error('Bounds must be provided for creating an offline pack');
+    }
+  }
+
+  _makeLatLngBounds(bounds) {
+    const ne = bounds[0];
+    const sw = bounds[1];
+    return toJSONString(makeLatLngBounds(ne, sw));
+  }
+
+  _makeMetadata(metadata) {
+    return JSON.stringify({
+      ...metadata,
+      name: this.name,
+    });
+  }
+}
+
+export default OfflineCreatePackOptions;

package/javascript/modules/offline/OfflinePack.js

@@ -0,0 +1,40 @@
+import { NativeModules } from 'react-native';
+
+const MapboxGLOfflineManager = NativeModules.MGLOfflineModule;
+
+class OfflinePack {
+  constructor(pack) {
+    this.pack = pack;
+    this._metadata = null;
+  }
+
+  get name() {
+    const { metadata } = this;
+    return metadata && metadata.name;
+  }
+
+  get bounds() {
+    return this.pack.bounds;
+  }
+
+  get metadata() {
+    if (!this._metadata && this.pack.metadata) {
+      this._metadata = JSON.parse(this.pack.metadata);
+    }
+    return this._metadata;
+  }
+
+  status() {
+    return MapboxGLOfflineManager.getPackStatus(this.name);
+  }
+
+  resume() {
+    return MapboxGLOfflineManager.resumePackDownload(this.name);
+  }
+
+  pause() {
+    return MapboxGLOfflineManager.pausePackDownload(this.name);
+  }
+}
+
+export default OfflinePack;