@rnmapbox/maps 10.0.0-beta.73 → 10.0.0-beta.75

package/javascript/components/NativeBridgeComponent.tsx

@@ -82,7 +82,7 @@ const NativeBridgeComponent = <
 
     _runNativeCommand<RefType, ReturnType = NativeArg>(
       methodName: string,
-      nativeRef: RefType,
+      nativeRef: RefType | undefined,
       args: NativeArg[] = [],
     ): Promise<ReturnType> {
       if (!nativeRef) {

package/javascript/components/PointAnnotation.tsx

@@ -9,6 +9,7 @@ import { type Feature } from 'geojson';
 
 import { toJSONString, isFunction } from '../utils';
 import { makePoint } from '../utils/geoUtils';
+import { type BaseProps } from '../types/BaseProps';
 
 import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
 
@@ -26,7 +27,7 @@ type FeaturePayload = {
   feature: Feature;
 };
 
-type Props = {
+type Props = BaseProps & {
   /**
    * A string that uniquely identifies the annotation
    */

package/javascript/components/RasterDemSource.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { cloneReactChildrenWithProps } from '../utils';
+
+import AbstractSource from './AbstractSource';
+
+const isTileTemplateUrl = (url?: string): url is string =>
+  !!url &&
+  (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLRasterDemSource';
+
+type Props = {
+  /**
+   * 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/raster-tiles/{z}/{x}/{y}.png
+   */
+  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;
+
+  /**
+   * Size of the map tiles.
+   * Mapbox urls default to 256, all others default to 512.
+   */
+  tileSize?: number;
+
+  children?: React.ReactElement | React.ReactElement[];
+};
+
+type NativeProps = Props;
+
+class RasterDemSource extends AbstractSource<Props, NativeProps> {
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: 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 compatibility
+    // 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={this.setNativeRef} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLRasterDemSource>
+    );
+  }
+}
+
+const RCTMGLRasterDemSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default RasterDemSource;

package/javascript/components/RasterSource.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { cloneReactChildrenWithProps } from '../utils';
+import { BaseProps } from '../types/BaseProps';
+
+import AbstractSource from './AbstractSource';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLRasterSource';
+
+const isTileTemplateUrl = (url?: string): url is string =>
+  !!url &&
+  (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
+
+type Props = 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/raster-tiles/{z}/{x}/{y}.png
+   */
+  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;
+
+  /**
+   * Size of the map tiles.
+   * Mapbox urls default to 256, all others default to 512.
+   */
+  tileSize?: 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;
+
+  children?: React.ReactElement | React.ReactElement[];
+};
+
+type NativeProps = Props;
+
+/**
+ * RasterSource is a map content source that supplies raster image tiles 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 RasterSource extends AbstractSource<Props, NativeProps> {
+  static defaultProps: Props = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    if (isTileTemplateUrl(props.url)) {
+      console.warn(
+        `RasterSource '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 compatibility
+    // 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,
+      tms: this.props.tms,
+      attribution: this.props.attribution,
+    };
+    return (
+      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLRasterSource>
+    );
+  }
+}
+
+const RCTMGLRasterSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default RasterSource;

package/javascript/components/ShapeSource.tsx

@@ -14,6 +14,7 @@ import {
   isAndroid,
 } from '../utils';
 import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+import { OnPressEvent } from '../types/OnPressEvent';
 
 import AbstractSource from './AbstractSource';
 import NativeBridgeComponent from './NativeBridgeComponent';
@@ -22,17 +23,6 @@ const MapboxGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
 
-export type OnPressEvent = {
-  features: Array<GeoJSON.Feature>;
-  coordinates: {
-    latitude: number;
-    longitude: number;
-  };
-  point: {
-    x: number;
-    y: number;
-  };
-};
 type OnPressEventDeprecated = OnPressEvent & {
   nativeEvent?: OnPressEvent;
 };

package/javascript/components/Terrain.tsx

@@ -3,10 +3,11 @@ import { HostComponent, requireNativeComponent } from 'react-native';
 
 import type { TerrainLayerStyleProps, Value } from '../utils/MapboxStyles';
 import { StyleValue, transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
 
-type Props = {
+type Props = BaseProps & {
   /**
    * Name of a source of raster_dem type to be used for terrain elevation.
    */

package/javascript/components/VectorSource.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import {
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from 'react-native';
+
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from '../utils';
+import { getFilter } from '../utils/filterUtils';
+import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+import { OnPressEvent } from '../types/OnPressEvent';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+
+interface Props {
+  /**
+   * 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[];
+}
+
+//interface NativeProps extends Omit<Props, 'children'> {}
+type NativeProps = Props; // Omit<Props, 'children'>;
+/**
+ * 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<Props, NativeProps>,
+  NATIVE_MODULE_NAME,
+) {
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  _setNativeRef(
+    nativeRef: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ) {
+    if (nativeRef) {
+      this.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: { data: string } = await this._runNativeCommand(
+      'features',
+      this._nativeRef,
+      [layerIDs, getFilter(filter)],
+    );
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  onPress(
+    event: NativeSyntheticEvent<{
+      payload: OnPressEvent;
+    }>,
+  ) {
+    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: unknown) => ({
+          ...(origNativeEvent as OnPressEvent),
+          payload: features[0],
+        }),
+      },
+    );
+    const { onPress } = this.props;
+    if (onPress) {
+      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,
+      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
+    };
+    return (
+      <RCTMGLVectorSource ref={(r) => this._setNativeRef(r)} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLVectorSource>
+    );
+  }
+}
+
+const RCTMGLVectorSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default VectorSource;

package/javascript/modules/location/locationManager.ts

@@ -69,7 +69,7 @@ interface Coordinates {
 /**
  * LocationManager is a singleton, see `locationManager`
  */
-class LocationManager {
+export class LocationManager {
   _listeners: ((location: Location) => void)[];
   _lastKnownLocation: Location | null;
   _isListening: boolean;

package/javascript/modules/offline/{OfflineCreatePackOptions.js → OfflineCreatePackOptions.ts}

@@ -1,8 +1,24 @@
 import { makeLatLngBounds } from '../../utils/geoUtils';
 import { toJSONString } from '../../utils';
 
+export type OfflineCreatePackOptionsArgs = {
+  name: string;
+  styleURL: string;
+  bounds: [GeoJSON.Position, GeoJSON.Position];
+  minZoom?: number;
+  maxZoom?: number;
+  metadata?: Record<string, unknown>;
+};
+
 class OfflineCreatePackOptions {
-  constructor(options = {}) {
+  public readonly name: string;
+  public readonly styleURL: string;
+  public readonly bounds: string;
+  public readonly minZoom: number | undefined;
+  public readonly maxZoom: number | undefined;
+  public readonly metadata: string | undefined;
+
+  constructor(options: OfflineCreatePackOptionsArgs) {
     this._assert(options);
 
     this.name = options.name;
@@ -13,7 +29,7 @@ class OfflineCreatePackOptions {
     this.metadata = this._makeMetadata(options.metadata);
   }
 
-  _assert(options) {
+  _assert(options: OfflineCreatePackOptionsArgs) {
     if (!options.styleURL) {
       throw new Error(
         'Style URL must be provided for creating an offline pack',
@@ -29,13 +45,12 @@ class OfflineCreatePackOptions {
     }
   }
 
-  _makeLatLngBounds(bounds) {
-    const ne = bounds[0];
-    const sw = bounds[1];
+  _makeLatLngBounds(bounds: [GeoJSON.Position, GeoJSON.Position]): string {
+    const [ne, sw] = bounds;
     return toJSONString(makeLatLngBounds(ne, sw));
   }
 
-  _makeMetadata(metadata) {
+  _makeMetadata(metadata: Record<string, unknown> | undefined) {
     return JSON.stringify({
       ...metadata,
       name: this.name,

package/javascript/modules/offline/{OfflinePack.js → OfflinePack.ts}

@@ -1,9 +1,24 @@
 import { NativeModules } from 'react-native';
 
+import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+
 const MapboxGLOfflineManager = NativeModules.MGLOfflineModule;
 
+type OfflinePackStatus = {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceCount: number;
+  completedResourceSize: number;
+  completedTileSize: number;
+  completedTileCount: number;
+  requiredResourceCount: number;
+};
+
 class OfflinePack {
-  constructor(pack) {
+  private pack: OfflineCreatePackOptions;
+  private _metadata: any;
+  constructor(pack: OfflineCreatePackOptions) {
     this.pack = pack;
     this._metadata = null;
   }
@@ -24,15 +39,15 @@ class OfflinePack {
     return this._metadata;
   }
 
-  status() {
+  status(): Promise<OfflinePackStatus> {
     return MapboxGLOfflineManager.getPackStatus(this.name);
   }
 
-  resume() {
+  resume(): Promise<void> {
     return MapboxGLOfflineManager.resumePackDownload(this.name);
   }
 
-  pause() {
+  pause(): Promise<void> {
     return MapboxGLOfflineManager.pausePackDownload(this.name);
   }
 }