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

package/javascript/components/SymbolLayer.tsx

@@ -0,0 +1,72 @@
+import {type SymbolLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactElement} from 'react';
+import {View, NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
+
+interface SymbolLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: SymbolLayerStyleProps;
+
+  /**
+   * @deprecated passed children used to create an image with id of symbol in style and also set the iconImageName property accordingly.
+   * This is now deprecated, use Image component instead.
+   */
+  children?: ReactElement | ReactElement[];
+}
+
+interface NativeProps extends Omit<SymbolLayerProps, 'style'>, NativeBaseProps {
+  snapshot: boolean;
+}
+
+/**
+ * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
+ */
+class SymbolLayer extends AbstractLayer<SymbolLayerProps, NativeBaseProps> {
+  static defaultProps = {
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  _shouldSnapshot(): boolean {
+    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(): ReactElement {
+    const props = {
+      ...this.baseProps,
+      snapshot: this._shouldSnapshot(),
+      sourceLayerID: this.props.sourceLayerID,
+    };
+
+    return (
+      <RCTMGLSymbolLayer ref={this.setNativeLayer} {...props}>
+        {this.props.children}
+      </RCTMGLSymbolLayer>
+    );
+  }
+}
+
+const RCTMGLSymbolLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default SymbolLayer;

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

@@ -1,115 +1,122 @@
-import locationManager from '../modules/location/locationManager';
+import locationManager, {Location} from '../modules/location/locationManager';
+import {CircleLayerStyleProps} from '../utils/MaplibreStyles';
 
 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';
+import React, {ReactElement} 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',
-    },
+const layerStyles: Record<string, CircleLayerStyleProps> = {
+  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) => [
+export const normalIcon = (
+  showsUserHeadingIndicator?: boolean,
+  heading?: number,
+): ReactElement[] => [
   <CircleLayer
     key="mapboxUserLocationPluseCircle"
     id="mapboxUserLocationPluseCircle"
-    style={layerStyles.normal.pluse}
+    style={layerStyles.pluse}
   />,
   <CircleLayer
     key="mapboxUserLocationWhiteCircle"
     id="mapboxUserLocationWhiteCircle"
-    style={layerStyles.normal.background}
+    style={layerStyles.background}
   />,
   <CircleLayer
     key="mapboxUserLocationBlueCicle"
     id="mapboxUserLocationBlueCicle"
     aboveLayerID="mapboxUserLocationWhiteCircle"
-    style={layerStyles.normal.foreground}
+    style={layerStyles.foreground}
   />,
-  ...(showsUserHeadingIndicator && heading !== null
-    ? [HeadingIndicator(heading)]
+  ...(showsUserHeadingIndicator && heading
+    ? [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
-     *
-     * NOTE: Forking maintainer does not understand the above comment.
-     */
-    children: PropTypes.any,
-  };
+interface UserLocationProps {
+  /**
+   * Whether location icon is animated between updates
+   */
+  animated?: boolean;
+  /**
+   * Which render mode to use.
+   * Can either be `normal` or `native`
+   */
+  renderMode?: 'normal' | 'native';
+  /**
+   * native/android only render mode
+   *
+   *  - normal: just a circle
+   *  - compass: triangle with heading
+   *  - gps: large arrow
+   *
+   * @platform android
+   */
+  androidRenderMode?: 'normal' | 'compass' | 'gps';
+  /**
+   * Whether location icon is visible
+   */
+  visible?: boolean;
+  /**
+   * Callback that is triggered on location icon press
+   */
+  onPress?(): void;
+  /**
+   * Callback that is triggered on location update
+   */
+  onUpdate?(location: Location): void;
+  /**
+   * Show or hide small arrow which indicates direction the device is pointing relative to north.
+   */
+  showsUserHeadingIndicator?: boolean;
+  /**
+   * Minimum amount of movement before GPS location is updated in meters
+   */
+  minDisplacement?: number;
+  /**
+   * Custom location icon of type mapbox-gl-native components
+   *
+   * NOTE: Forking maintainer does not understand the above comment.
+   */
+  children?: ReactElement | ReactElement[];
+}
+
+interface UserLocationState {
+  shouldShowUserLocation: boolean;
+  coordinates?: number[];
+  heading?: number;
+}
+
+export enum UserLocationRenderMode {
+  Native = 'native',
+  Normal = 'normal',
+}
 
+class UserLocation extends React.Component<
+  UserLocationProps,
+  UserLocationState
+> {
   static defaultProps = {
     animated: true,
     visible: true,
@@ -118,18 +125,11 @@ class UserLocation extends React.Component {
     renderMode: 'normal',
   };
 
-  static RenderMode = {
-    Native: 'native',
-    Normal: 'normal',
-  };
-
-  constructor(props) {
+  constructor(props: UserLocationProps) {
     super(props);
 
     this.state = {
       shouldShowUserLocation: false,
-      coordinates: null,
-      heading: null,
     };
 
     this._onLocationUpdate = this._onLocationUpdate.bind(this);
@@ -137,35 +137,36 @@ class UserLocation extends React.Component {
 
   // required as #setLocationManager attempts to setState
   // after component unmount
-  _isMounted = null;
+  _isMounted: boolean | null = null;
 
+  renderMode: UserLocationRenderMode | undefined;
   locationManagerRunning = false;
 
-  async componentDidMount() {
+  async componentDidMount(): Promise<void> {
     this._isMounted = true;
 
     await this.setLocationManager({
       running: this.needsLocationManagerRunning(),
     });
 
-    if (this.renderMode === UserLocation.RenderMode.Native) {
+    if (this.renderMode === UserLocationRenderMode.Native) {
       return;
     }
 
-    locationManager.setMinDisplacement(this.props.minDisplacement);
+    locationManager.setMinDisplacement(this.props.minDisplacement ?? 0);
   }
 
-  async componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps: UserLocationProps): Promise<void> {
     await this.setLocationManager({
       running: this.needsLocationManagerRunning(),
     });
 
     if (this.props.minDisplacement !== prevProps.minDisplacement) {
-      locationManager.setMinDisplacement(this.props.minDisplacement);
+      locationManager.setMinDisplacement(this.props.minDisplacement ?? 0);
     }
   }
 
-  async componentWillUnmount() {
+  async componentWillUnmount(): Promise<void> {
     this._isMounted = false;
     await this.setLocationManager({running: false});
   }
@@ -180,7 +181,7 @@ class UserLocation extends React.Component {
    * @param {Object} running - Object with key `running` and `boolean` value
    * @return {Promise<void>}
    */
-  async setLocationManager({running}) {
+  async setLocationManager({running}: {running: boolean}): Promise<void> {
     if (this.locationManagerRunning !== running) {
       this.locationManagerRunning = running;
       if (running) {
@@ -199,24 +200,24 @@ class UserLocation extends React.Component {
    *
    * @return {boolean}
    */
-  needsLocationManagerRunning() {
-    return (
+  needsLocationManagerRunning(): boolean {
+    return !!(
       !!this.props.onUpdate ||
-      (this.props.renderMode === UserLocation.RenderMode.Normal &&
+      (this.props.renderMode === UserLocationRenderMode.Normal &&
         this.props.visible)
     );
   }
 
-  _onLocationUpdate(location) {
+  _onLocationUpdate(location: Location | null): void {
     if (!this._isMounted || !location) {
       return;
     }
-    let coordinates = null;
-    let heading = null;
+    let coordinates;
+    let heading;
 
     if (location && location.coords) {
       const {longitude, latitude} = location.coords;
-      ({heading} = location.coords);
+      heading = location.coords.heading;
       coordinates = [longitude, latitude];
     }
 
@@ -230,17 +231,17 @@ class UserLocation extends React.Component {
     }
   }
 
-  _renderNative() {
+  _renderNative(): ReactElement {
     const {androidRenderMode, showsUserHeadingIndicator} = this.props;
 
-    let props = {
+    const props = {
       androidRenderMode,
       iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
     };
     return <NativeUserLocation {...props} />;
   }
 
-  render() {
+  render(): ReactElement | null {
     const {heading, coordinates} = this.state;
     const {children, visible, showsUserHeadingIndicator, onPress, animated} =
       this.props;
@@ -249,7 +250,7 @@ class UserLocation extends React.Component {
       return null;
     }
 
-    if (this.props.renderMode === UserLocation.RenderMode.Native) {
+    if (this.props.renderMode === UserLocationRenderMode.Native) {
       return this._renderNative();
     }
 

package/javascript/components/VectorSource.tsx

@@ -0,0 +1,207 @@
+import {FilterExpression} from '../utils/MaplibreStyles';
+import {cloneReactChildrenWithProps, isFunction, isAndroid} from '../utils';
+import {getFilter} from '../utils/filterUtils';
+import {copyPropertiesAsDeprecated} from '../utils/deprecation';
+import BaseProps from '../types/BaseProps';
+import OnPressEvent from '../types/OnPressEvent';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+import React, {Component, ReactNode} from 'react';
+import {
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from 'react-native';
+import {featureCollection} from '@turf/helpers';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+
+interface VectorSourceProps 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/vector-tiles/{z}/{x}/{y}.pbf
+   */
+  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;
+  /**
+   * 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;
+  /**
+   * 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?: (event: OnPressEvent) => void;
+  /**
+   * Overrides the default touch hitbox(44x44 pixels) for the source layers
+   */
+  hitbox?: {
+    /**
+     * `width` of hitbox
+     */
+    width: number;
+    /**
+     * `height` of hitbox
+     */
+    height: number;
+  };
+
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+type NativeProps = VectorSourceProps;
+
+/**
+ * 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<VectorSourceProps, NativeProps>,
+  NATIVE_MODULE_NAME,
+) {
+  static defaultProps = {
+    id: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: VectorSourceProps) {
+    super(props);
+  }
+
+  _setNativeRef(
+    nativeRef: (Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ): void {
+    if (nativeRef) {
+      this.setNativeRef(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 {GeoJSON.FeatureCollection}
+   */
+  async features(
+    layerIDs = [],
+    filter?: FilterExpression,
+  ): Promise<GeoJSON.FeatureCollection> {
+    if (!this._nativeRef) {
+      return featureCollection([]);
+    }
+    const res: {data: string | GeoJSON.FeatureCollection} =
+      await this._runNativeCommand('features', this._nativeRef, [
+        [[layerIDs, getFilter(filter)]],
+      ]);
+
+    if (isAndroid()) {
+      return JSON.parse(res?.data as string);
+    }
+
+    return res.data as GeoJSON.FeatureCollection;
+  }
+
+  onPress(event: NativeSyntheticEvent<{payload: OnPressEvent}>): void {
+    const {onPress} = this.props;
+
+    if (!onPress) {
+      return;
+    }
+    const {
+      nativeEvent: {
+        payload: {features, coordinates, point},
+      },
+    } = event;
+    let newEvent = {
+      features,
+      coordinates,
+      point,
+    };
+    newEvent = copyPropertiesAsDeprecated(
+      event,
+      newEvent,
+      (key: string) => {
+        console.warn(
+          `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
+        );
+      },
+      {
+        nativeEvent: (origNativeEvent: OnPressEvent) => ({
+          ...origNativeEvent,
+          payload: features[0],
+        }),
+      },
+    );
+
+    onPress(newEvent);
+  }
+
+  render(): ReactNode {
+    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,
+      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
+    };
+    return (
+      <RCTMGLVectorSource ref={this.setNativeRef} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLVectorSource>
+    );
+  }
+}
+
+const RCTMGLVectorSource =
+  requireNativeComponent<VectorSourceProps>(NATIVE_MODULE_NAME);
+
+export default VectorSource;