@rnmapbox/maps 10.0.0-beta.74 → 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/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/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);
   }
 }

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

@@ -1,8 +1,14 @@
-import { NativeModules, NativeEventEmitter } from 'react-native';
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EventSubscription,
+} from 'react-native';
 
 import { isUndefined, isFunction, isAndroid } from '../../utils';
 
-import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+import OfflineCreatePackOptions, {
+  OfflineCreatePackOptionsArgs,
+} from './OfflineCreatePackOptions';
 import OfflinePack from './OfflinePack';
 
 const MapboxGL = NativeModules.MGLModule;
@@ -11,12 +17,49 @@ export const OfflineModuleEventEmitter = new NativeEventEmitter(
   MapboxGLOfflineManager,
 );
 
+export type OfflineProgressStatus = {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceSize: number;
+  completedTileCount: number;
+  completedResourceCount: number;
+  requiredResourceCount: number;
+  completedTileSize: number;
+};
+
+export type OfflinePackError = {
+  name: string;
+  message: string;
+};
+
+type ErrorEvent = {
+  payload: OfflinePackError;
+};
+
+type ProgressEvent = {
+  payload: OfflineProgressStatus;
+};
+
+type ProgressListener = (
+  pack: OfflinePack,
+  status: OfflineProgressStatus,
+) => void;
+type ErrorListener = (pack: OfflinePack, err: OfflinePackError) => void;
+
 /**
  * OfflineManager implements a singleton (shared object) that manages offline packs.
  * All of this class’s instance methods are asynchronous, reflecting the fact that offline resources are stored in a database.
  * The shared object maintains a canonical collection of offline packs.
  */
 class OfflineManager {
+  private _hasInitialized: boolean;
+  private _offlinePacks: Record<string, OfflinePack>;
+  private _progressListeners: Record<string, ProgressListener>;
+  private _errorListeners: Record<string, ErrorListener>;
+  public subscriptionProgress: EventSubscription | null;
+  public subscriptionError: EventSubscription | null;
+
   constructor() {
     this._hasInitialized = false;
     this._offlinePacks = {};
@@ -52,7 +95,11 @@ class OfflineManager {
    * @param  {Callback=} errorListener Callback that listens for status events while downloading the offline resource.
    * @return {void}
    */
-  async createPack(options, progressListener, errorListener) {
+  async createPack(
+    options: OfflineCreatePackOptionsArgs,
+    progressListener: ProgressListener,
+    errorListener?: ErrorListener,
+  ): Promise<void> {
     await this._initialize();
 
     const packOptions = new OfflineCreatePackOptions(options);
@@ -81,7 +128,7 @@ class OfflineManager {
    * @param  {String}  name  Name of the offline pack.
    * @return {void}
    */
-  async invalidatePack(name) {
+  async invalidatePack(name: string): Promise<void> {
     if (!name) {
       return;
     }
@@ -103,7 +150,7 @@ class OfflineManager {
    * @param  {String}  name  Name of the offline pack.
    * @return {void}
    */
-  async deletePack(name) {
+  async deletePack(name: string): Promise<void> {
     if (!name) {
       return;
     }
@@ -128,7 +175,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async invalidateAmbientCache() {
+  async invalidateAmbientCache(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.invalidateAmbientCache();
   }
@@ -142,7 +189,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async clearAmbientCache() {
+  async clearAmbientCache(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.clearAmbientCache();
   }
@@ -155,7 +202,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async migrateOfflineCache() {
+  async migrateOfflineCache(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.migrateOfflineCache();
   }
@@ -170,7 +217,7 @@ class OfflineManager {
    * @param  {Number}  size  Size of ambient cache.
    * @return {void}
    */
-  async setMaximumAmbientCacheSize(size) {
+  async setMaximumAmbientCacheSize(size: number): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.setMaximumAmbientCacheSize(size);
   }
@@ -183,7 +230,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async resetDatabase() {
+  async resetDatabase(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.resetDatabase();
   }
@@ -196,7 +243,7 @@ class OfflineManager {
    *
    * @return {Array<OfflinePack>}
    */
-  async getPacks() {
+  async getPacks(): Promise<OfflinePack[]> {
     await this._initialize();
     return Object.keys(this._offlinePacks).map(
       (name) => this._offlinePacks[name],
@@ -212,7 +259,7 @@ class OfflineManager {
    * @param  {String}  name  Name of the offline pack.
    * @return {OfflinePack}
    */
-  async getPack(name) {
+  async getPack(name: string): Promise<OfflinePack | undefined> {
     await this._initialize();
     return this._offlinePacks[name];
   }
@@ -226,7 +273,7 @@ class OfflineManager {
    * @param {String} path Path to offline tile db on file system.
    * @return {void}
    */
-  async mergeOfflineRegions(path) {
+  async mergeOfflineRegions(path: string): Promise<void> {
     await this._initialize();
     return MapboxGLOfflineManager.mergeOfflineRegions(path);
   }
@@ -241,7 +288,7 @@ class OfflineManager {
    * @param {Number} limit Map tile limit count.
    * @return {void}
    */
-  setTileCountLimit(limit) {
+  setTileCountLimit(limit: number): void {
     MapboxGLOfflineManager.setTileCountLimit(limit);
   }
 
@@ -255,7 +302,7 @@ class OfflineManager {
    * @param {Number} throttleValue event throttle value in ms.
    * @return {void}
    */
-  setProgressEventThrottle(throttleValue) {
+  setProgressEventThrottle(throttleValue: number): void {
     MapboxGLOfflineManager.setProgressEventThrottle(throttleValue);
   }
 
@@ -273,7 +320,11 @@ class OfflineManager {
    * @param  {Callback} errorListener      Callback that listens for status events while downloading the offline resource.
    * @return {void}
    */
-  async subscribe(packName, progressListener, errorListener) {
+  async subscribe(
+    packName: string,
+    progressListener: ProgressListener,
+    errorListener?: ErrorListener,
+  ): Promise<void> {
     const totalProgressListeners = Object.keys(this._progressListeners).length;
     if (isFunction(progressListener)) {
       if (totalProgressListeners === 0) {
@@ -318,7 +369,7 @@ class OfflineManager {
    * @param  {String} packName Name of the offline pack.
    * @return {void}
    */
-  unsubscribe(packName) {
+  unsubscribe(packName: string): void {
     delete this._progressListeners[packName];
     delete this._errorListeners[packName];
 
@@ -337,7 +388,7 @@ class OfflineManager {
     }
   }
 
-  async _initialize() {
+  async _initialize(): Promise<boolean> {
     if (this._hasInitialized) {
       return true;
     }
@@ -353,7 +404,7 @@ class OfflineManager {
     return true;
   }
 
-  _onProgress(e) {
+  _onProgress(e: ProgressEvent): void {
     const { name, state } = e.payload;
 
     if (!this._hasListeners(name, this._progressListeners)) {
@@ -369,7 +420,7 @@ class OfflineManager {
     }
   }
 
-  _onError(e) {
+  _onError(e: ErrorEvent): void {
     const { name } = e.payload;
 
     if (!this._hasListeners(name, this._errorListeners)) {
@@ -380,7 +431,12 @@ class OfflineManager {
     this._errorListeners[name](pack, e.payload);
   }
 
-  _hasListeners(name, listenerMap) {
+  _hasListeners(
+    name: string,
+    listenerMap:
+      | Record<string, ProgressListener>
+      | Record<string, ErrorListener>,
+  ): boolean {
     return (
       !isUndefined(this._offlinePacks[name]) && isFunction(listenerMap[name])
     );

package/javascript/modules/snapshot/{SnapshotOptions.js → SnapshotOptions.ts}

@@ -5,8 +5,32 @@ import { makePoint, makeFeatureCollection } from '../../utils/geoUtils';
 
 const MapboxGL = NativeModules.MGLModule;
 
+export type SnapshotOptionsArgs = {
+  centerCoordinate?: GeoJSON.Position;
+  width?: number;
+  height?: number;
+  zoomLevel?: number;
+  pitch?: number;
+  heading?: number;
+  styleURL?: string;
+  writeToDisk?: boolean;
+  bounds?: number[][];
+  withLogo?: boolean;
+};
+
 class SnapshotOptions {
-  constructor(options = {}) {
+  public readonly styleURL: string;
+  public readonly heading: number;
+  public readonly pitch: number;
+  public readonly zoomLevel: number;
+  public readonly width: number;
+  public readonly height: number;
+  public readonly writeToDisk: boolean;
+  public readonly withLogo: boolean;
+  public readonly centerCoordinate: string | undefined;
+  public readonly bounds: string | undefined;
+
+  constructor(options: SnapshotOptionsArgs = {}) {
     if (!options.centerCoordinate && !options.bounds) {
       throw new Error(
         'Center coordinate or bounds must be supplied in order to take a snapshot',
@@ -48,12 +72,12 @@ class SnapshotOptions {
     };
   }
 
-  _createCenterCoordPoint(centerCoordinate) {
+  _createCenterCoordPoint(centerCoordinate: number[]) {
     const point = makePoint(centerCoordinate);
     return toJSONString(point);
   }
 
-  _createBoundsCollection(bounds) {
+  _createBoundsCollection(bounds: number[][]) {
     const features = [];
 
     for (const bound of bounds) {

package/javascript/modules/snapshot/{snapshotManager.js → snapshotManager.ts}

@@ -50,7 +50,7 @@ class SnapshotManager {
    * @param  {SnapshotOptions}  options Snapshot options for create a static image of the base map
    * @return {Promise}
    */
-  async takeSnap(options = {}) {
+  async takeSnap(options = {}): Promise<string> {
     const snapshotOptions = new SnapshotOptions(options);
 
     const uri = await MapboxGLSnapshotManger.takeSnap(snapshotOptions);