@rnmapbox/maps 10.0.0-beta.28

package/javascript/components/Style.js

@@ -0,0 +1,265 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import CircleLayer from './CircleLayer';
+import RasterLayer from './RasterLayer';
+import SymbolLayer from './SymbolLayer';
+import LineLayer from './LineLayer';
+import FillLayer from './FillLayer';
+import FillExtrusionLayer from './FillExtrusionLayer';
+import BackgroundLayer from './BackgroundLayer';
+import HeatmapLayer from './HeatmapLayer';
+import VectorSource from './VectorSource';
+import RasterSource from './RasterSource';
+import ImageSource from './ImageSource';
+import ShapeSource from './ShapeSource';
+
+function toCamelCase(s) {
+  return s.replace(/([-_][a-z])/gi, ($1) => {
+    return $1.toUpperCase().replace('-', '').replace('_', '');
+  });
+}
+
+// Patches the Mapbox Style Specification keys into the style props attributes:
+// icon-allow-overlap -> iconAllowOverlap
+function toCamelCaseKeys(oldObj) {
+  if (!oldObj) {
+    return {};
+  }
+  const newObj = {};
+  Object.keys(oldObj).forEach((key) => {
+    const value = oldObj[key];
+    if (key.includes('-')) {
+      newObj[toCamelCase(key)] = value;
+    } else {
+      newObj[key] = value;
+    }
+  });
+  return newObj;
+}
+
+function getLayerComponentType(layer) {
+  const { type } = layer;
+
+  switch (type) {
+    case 'circle':
+      return CircleLayer;
+    case 'symbol':
+      return SymbolLayer;
+    case 'raster':
+      return RasterLayer;
+    case 'line':
+      return LineLayer;
+    case 'fill':
+      return FillLayer;
+    case 'fill-extrusion':
+      return FillExtrusionLayer;
+    case 'background':
+      return BackgroundLayer;
+    case 'heatmap':
+      return HeatmapLayer;
+  }
+
+  console.warn(`Mapbox layer type '${type}' is not supported/`);
+
+  return null;
+}
+
+function asLayerComponent(layer) {
+  const LayerComponent = getLayerComponentType(layer);
+  if (!LayerComponent) {
+    return null;
+  }
+
+  const style = {
+    ...toCamelCaseKeys(layer.paint),
+    ...toCamelCaseKeys(layer.layout),
+  };
+
+  const layerProps = {};
+
+  if (layer.source) {
+    layerProps.sourceID = layer.source;
+  }
+  if (layer['source-layer']) {
+    layerProps.sourceLayerID = layer['source-layer'];
+  }
+  if (layer.minzoom) {
+    layerProps.minZoomLevel = layer.minzoom;
+  }
+  if (layer.maxzoom) {
+    layerProps.maxZoomLevel = layer.maxzoom;
+  }
+  if (layer.filter) {
+    layerProps.filter = layer.filter;
+  }
+  if (Object.keys(style).length) {
+    layerProps.style = style;
+  }
+
+  return <LayerComponent key={layer.id} id={layer.id} {...layerProps} />;
+}
+
+function getTileSourceProps(source) {
+  const sourceProps = {};
+  if (source.url) {
+    sourceProps.url = source.url;
+  }
+  if (source.tiles) {
+    sourceProps.tileUrlTemplates = source.tiles;
+  }
+  if (source.minzoom !== undefined) {
+    sourceProps.minZoomLevel = source.minzoom;
+  }
+  if (source.maxzoom !== undefined) {
+    sourceProps.maxZoomLevel = source.maxzoom;
+  }
+  if (source.attribution) {
+    sourceProps.attribution = source.attribution;
+  }
+  if (source.scheme && source.scheme === 'tms') {
+    sourceProps.tms = true;
+  }
+  return sourceProps;
+}
+
+function getVectorSource(id, source) {
+  const sourceProps = { ...getTileSourceProps(source) };
+  return <VectorSource key={id} id={id} {...sourceProps} />;
+}
+
+function getRasterSource(id, source) {
+  const sourceProps = { ...getTileSourceProps(source) };
+  if (source.tileSize) {
+    sourceProps.tileSize = source.tileSize;
+  }
+  return <RasterSource key={id} id={id} {...sourceProps} />;
+}
+
+function getImageSource(id, source) {
+  const sourceProps = {
+    url: source.url,
+    coordinates: source.coordinates,
+  };
+  return <ImageSource key={id} id={id} {...sourceProps} />;
+}
+
+function getShapeSource(id, source) {
+  const sourceProps = {};
+  if (source.data && typeof source.data === 'string') {
+    sourceProps.url = source.data;
+  } else if (source.data && typeof source.data === 'object') {
+    sourceProps.shape = source.data;
+  }
+  if (source.cluster !== undefined) {
+    sourceProps.cluster = source.cluster;
+  }
+  if (source.clusterRadius !== undefined) {
+    sourceProps.clusterRadius = source.clusterRadius;
+  }
+  if (source.maxzoom !== undefined) {
+    sourceProps.maxZoomLevel = source.maxzoom;
+  }
+  if (source.clusterMaxZoom !== undefined) {
+    sourceProps.clusterMaxZoomLevel = source.clusterMaxZoom;
+  }
+  if (source.clusterProperties !== undefined) {
+    sourceProps.clusterProperties = source.clusterProperties;
+  }
+  if (source.buffer !== undefined) {
+    sourceProps.buffer = source.buffer;
+  }
+  if (source.tolerance !== undefined) {
+    sourceProps.tolerance = source.tolerance;
+  }
+  if (source.lineMetrics !== undefined) {
+    sourceProps.lineMetrics = source.lineMetrics;
+  }
+  return <ShapeSource key={id} id={id} {...sourceProps} />;
+}
+
+function asSourceComponent(id, source) {
+  switch (source.type) {
+    case 'vector':
+      return getVectorSource(id, source);
+    case 'raster':
+      return getRasterSource(id, source);
+    case 'image':
+      return getImageSource(id, source);
+    case 'geojson':
+      return getShapeSource(id, source);
+  }
+
+  console.warn(`Mapbox source type '${source.type}' is not supported/`);
+
+  return null;
+}
+
+/**
+ * Style is a component that automatically adds sources / layers to the map using Mapbox GL Style Spec.
+ * Only [`sources`](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources) & [`layers`](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) are supported.
+ * Other fields such as `sprites`, `glyphs` etc. will be ignored. Not all layer / source attributes from the style spec are supported, in general the supported attributes will mentioned under https://github.com/rnmapbox/maps/tree/main/docs.
+ */
+const Style = (props) => {
+  const [fetchedJson, setFetchedJson] = useState({});
+  const json = typeof props.json === 'object' ? props.json : fetchedJson;
+
+  // Fetch style when props.json is a URL
+  useEffect(() => {
+    const abortController = new AbortController();
+    const fetchStyleJson = async () => {
+      try {
+        const response = await fetch(props.json, {
+          signal: abortController.signal,
+        });
+        const responseJson = await response.json();
+        setFetchedJson(responseJson);
+      } catch (e) {
+        if (e.name === 'AbortError') {
+          return;
+        }
+        throw e;
+      }
+    };
+    if (typeof props.json === 'string') {
+      fetchStyleJson();
+    }
+    return function cleanup() {
+      abortController.abort();
+    };
+  }, [props.json]);
+
+  // Extract layer components from json
+  const layerComponents = useMemo(() => {
+    if (!json.layers) {
+      return [];
+    }
+    return json.layers.map(asLayerComponent).filter((x) => !!x);
+  }, [json.layers]);
+
+  // Extract source components from json
+  const sourceComponents = useMemo(() => {
+    if (!json.sources || !Object.keys(json.sources)) {
+      return [];
+    }
+    return Object.keys(json.sources)
+      .map((id) => asSourceComponent(id, json.sources[id]))
+      .filter((x) => !!x);
+  }, [json.sources]);
+
+  return (
+    <>
+      {sourceComponents}
+      {layerComponents}
+    </>
+  );
+};
+
+Style.propTypes = {
+  /**
+   * A JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON.
+   */
+  json: PropTypes.any,
+};
+
+export default Style;

package/javascript/components/SymbolLayer.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { View, NativeModules, requireNativeComponent } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { viewPropTypes } from '../utils';
+import { SymbolLayerStyleProp } from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
+
+/**
+ * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
+ */
+class SymbolLayer 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([
+      SymbolLayerStyleProp,
+      PropTypes.arrayOf(SymbolLayerStyleProp),
+    ]),
+  };
+
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  _shouldSnapshot() {
+    let isSnapshot = false;
+
+    if (React.Children.count(this.props.children) <= 0) {
+      return isSnapshot;
+    }
+
+    React.Children.forEach(this.props.children, (child) => {
+      if (child.type === View) {
+        isSnapshot = true;
+      }
+    });
+
+    return isSnapshot;
+  }
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      snapshot: this._shouldSnapshot(),
+      sourceLayerID: this.props.sourceLayerID,
+    };
+
+    return (
+      <RCTMGLSymbolLayer ref="nativeLayer" {...props}>
+        {this.props.children}
+      </RCTMGLSymbolLayer>
+    );
+  }
+}
+
+const RCTMGLSymbolLayer = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  SymbolLayer,
+  {
+    nativeOnly: { reactStyle: true, snapshot: true },
+  },
+);
+
+export default SymbolLayer;

package/javascript/components/Terrain.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { viewPropTypes } from '../utils';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
+
+/**
+ * A global modifier that elevates layers and markers based on a DEM data source.
+ */
+class Terrain extends React.PureComponent {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * Name of a source of raster_dem type to be used for terrain elevation.
+     */
+    sourceID: PropTypes.string,
+
+    /**
+     * Optional number between 0 and 1000 inclusive. Defaults to 1. Supports interpolateexpressions. Transitionable.
+     * Exaggerates the elevation of the terrain by multiplying the data from the DEM with this value.
+     */
+    exaggeration: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
+  };
+
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  get baseProps() {
+    return {
+      ...this.props,
+      sourceID: this.props.sourceID,
+    };
+  }
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceID: this.props.sourceID,
+    };
+    return <RCTMGLTerrain ref="nativeLayer" {...props} />;
+  }
+}
+
+const RCTMGLTerrain = requireNativeComponent(NATIVE_MODULE_NAME, Terrain, {
+  nativeOnly: { reactStyle: true },
+});
+
+export default Terrain;

package/javascript/components/UserLocation.js

@@ -0,0 +1,274 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import locationManager from '../modules/location/locationManager';
+
+import Annotation from './annotations/Annotation';
+import CircleLayer from './CircleLayer';
+import HeadingIndicator from './HeadingIndicator';
+import NativeUserLocation from './NativeUserLocation';
+
+const mapboxBlue = 'rgba(51, 181, 229, 100)';
+
+const layerStyles = {
+  normal: {
+    pluse: {
+      circleRadius: 15,
+      circleColor: mapboxBlue,
+      circleOpacity: 0.2,
+      circlePitchAlignment: 'map',
+    },
+    background: {
+      circleRadius: 9,
+      circleColor: '#fff',
+      circlePitchAlignment: 'map',
+    },
+    foreground: {
+      circleRadius: 6,
+      circleColor: mapboxBlue,
+      circlePitchAlignment: 'map',
+    },
+  },
+};
+
+export const normalIcon = (showsUserHeadingIndicator, heading) => [
+  <CircleLayer
+    key="mapboxUserLocationPluseCircle"
+    id="mapboxUserLocationPluseCircle"
+    style={layerStyles.normal.pluse}
+  />,
+  <CircleLayer
+    key="mapboxUserLocationWhiteCircle"
+    id="mapboxUserLocationWhiteCircle"
+    style={layerStyles.normal.background}
+  />,
+  <CircleLayer
+    key="mapboxUserLocationBlueCicle"
+    id="mapboxUserLocationBlueCicle"
+    aboveLayerID="mapboxUserLocationWhiteCircle"
+    style={layerStyles.normal.foreground}
+  />,
+  ...(showsUserHeadingIndicator && heading !== null
+    ? [HeadingIndicator(heading)]
+    : []),
+];
+
+class UserLocation extends React.Component {
+  static propTypes = {
+    /**
+     * Whether location icon is animated between updates
+     */
+    animated: PropTypes.bool,
+
+    /**
+     * Which render mode to use.
+     * Can either be `normal` or `native`
+     */
+    renderMode: PropTypes.oneOf(['normal', 'native']),
+
+    /**
+     * native/android only render mode
+     *
+     *  - normal: just a circle
+     *  - compass: triangle with heading
+     *  - gps: large arrow
+     *
+     * @platform android
+     */
+    androidRenderMode: PropTypes.oneOf(['normal', 'compass', 'gps']),
+
+    /**
+     * Whether location icon is visible
+     */
+    visible: PropTypes.bool,
+
+    /**
+     * Callback that is triggered on location icon press
+     */
+    onPress: PropTypes.func,
+
+    /**
+     * Callback that is triggered on location update
+     */
+    onUpdate: PropTypes.func,
+
+    /**
+     * Show or hide small arrow which indicates direction the device is pointing relative to north.
+     */
+    showsUserHeadingIndicator: PropTypes.bool,
+
+    /**
+     * Minimum amount of movement before GPS location is updated in meters
+     */
+    minDisplacement: PropTypes.number,
+
+    /**
+     * Custom location icon of type mapbox-gl-native components
+     */
+    children: PropTypes.any,
+  };
+
+  static defaultProps = {
+    animated: true,
+    visible: true,
+    showsUserHeadingIndicator: false,
+    minDisplacement: 0,
+    renderMode: 'normal',
+  };
+
+  static RenderMode = {
+    Native: 'native',
+    Normal: 'normal',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      shouldShowUserLocation: false,
+      coordinates: null,
+      heading: null,
+    };
+
+    this._onLocationUpdate = this._onLocationUpdate.bind(this);
+  }
+
+  // required as #setLocationManager attempts to setState
+  // after component unmount
+  _isMounted = null;
+
+  locationManagerRunning = false;
+
+  async componentDidMount() {
+    this._isMounted = true;
+
+    await this.setLocationManager({
+      running: this.needsLocationManagerRunning(),
+    });
+
+    if (this.renderMode === UserLocation.RenderMode.Native) {
+      return;
+    }
+
+    locationManager.setMinDisplacement(this.props.minDisplacement);
+  }
+
+  async componentDidUpdate(prevProps) {
+    await this.setLocationManager({
+      running: this.needsLocationManagerRunning(),
+    });
+
+    if (this.props.minDisplacement !== prevProps.minDisplacement) {
+      locationManager.setMinDisplacement(this.props.minDisplacement);
+    }
+  }
+
+  async componentWillUnmount() {
+    this._isMounted = false;
+    await this.setLocationManager({ running: false });
+  }
+
+  /**
+   * Whether to start or stop listening to the locationManager
+   *
+   * Notice, that listening will start automatically when
+   * either `onUpdate` or `visible` are set
+   *
+   * @async
+   * @param {Object} running - Object with key `running` and `boolean` value
+   * @return {Promise<void>}
+   */
+  async setLocationManager({ running }) {
+    if (this.locationManagerRunning !== running) {
+      this.locationManagerRunning = running;
+      if (running) {
+        locationManager.addListener(this._onLocationUpdate);
+        const location = await locationManager.getLastKnownLocation();
+        this._onLocationUpdate(location);
+      } else {
+        locationManager.removeListener(this._onLocationUpdate);
+      }
+    }
+  }
+
+  /**
+   *
+   * If locationManager should be running
+   *
+   * @return {boolean}
+   */
+  needsLocationManagerRunning() {
+    return (
+      !!this.props.onUpdate ||
+      (this.props.renderMode === UserLocation.RenderMode.Normal &&
+        this.props.visible)
+    );
+  }
+
+  _onLocationUpdate(location) {
+    if (!this._isMounted || !location) {
+      return;
+    }
+    let coordinates = null;
+    let heading = null;
+
+    if (location && location.coords) {
+      const { longitude, latitude } = location.coords;
+      ({ heading } = location.coords);
+      coordinates = [longitude, latitude];
+    }
+
+    this.setState({
+      coordinates,
+      heading,
+    });
+
+    if (this.props.onUpdate) {
+      this.props.onUpdate(location);
+    }
+  }
+
+  _renderNative() {
+    const { androidRenderMode, showsUserHeadingIndicator } = this.props;
+
+    let props = {
+      androidRenderMode,
+      iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
+    };
+    return <NativeUserLocation {...props} />;
+  }
+
+  render() {
+    const { heading, coordinates } = this.state;
+    const { children, visible, showsUserHeadingIndicator, onPress, animated } =
+      this.props;
+
+    if (!visible) {
+      return null;
+    }
+
+    if (this.props.renderMode === UserLocation.RenderMode.Native) {
+      return this._renderNative();
+    }
+
+    if (!coordinates) {
+      return null;
+    }
+
+    return (
+      <Annotation
+        animated={animated}
+        id="mapboxUserLocation"
+        onPress={onPress}
+        coordinates={coordinates}
+        style={{
+          iconRotate: heading,
+        }}
+      >
+        {children || normalIcon(showsUserHeadingIndicator, heading)}
+      </Annotation>
+    );
+  }
+}
+
+export default UserLocation;