@maplibre/maplibre-react-native 8.6.0-beta.0

package/javascript/components/SymbolLayer.js

@@ -0,0 +1,120 @@
+import {viewPropTypes} from '../utils';
+import {SymbolLayerStyleProp} from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View, NativeModules, requireNativeComponent} from 'react-native';
+
+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/UserLocation.js

@@ -0,0 +1,273 @@
+import locationManager from '../modules/location/locationManager';
+
+import Annotation from './annotations/Annotation';
+import CircleLayer from './CircleLayer';
+import HeadingIndicator from './HeadingIndicator';
+import NativeUserLocation from './NativeUserLocation';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+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;

package/javascript/components/VectorSource.js

@@ -0,0 +1,200 @@
+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';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+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,122 @@
+import SymbolLayer from '../SymbolLayer';
+import Animated from '../../utils/animated/Animated';
+import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Easing} from 'react-native';
+
+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;