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

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

@@ -1,22 +1,64 @@
-import {isUndefined, isFunction, isAndroid} from '../../utils';
-
-import OfflineCreatePackOptions from './OfflineCreatePackOptions';
-import OfflinePack from './OfflinePack';
-
-import {NativeModules, NativeEventEmitter} from 'react-native';
-
-const MapLibreGL = NativeModules.MGLModule;
-const MapLibreGLOfflineManager = NativeModules.MGLOfflineModule;
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EventSubscription,
+} from "react-native";
+
+import OfflineCreatePackOptions, {
+  OfflineCreatePackInputOptions,
+} from "./OfflineCreatePackOptions";
+import OfflinePack from "./OfflinePack";
+import { isUndefined, isFunction, isAndroid } from "../../utils";
+
+const MapLibreGL = NativeModules.MLNModule;
+const MapLibreGLOfflineManager = NativeModules.MLNOfflineModule;
 export const OfflineModuleEventEmitter = new NativeEventEmitter(
   MapLibreGLOfflineManager,
 );
 
+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 {
+  _hasInitialized: boolean;
+  _offlinePacks: Record<string, OfflinePack>;
+  _progressListeners: Record<string, ProgressListener>;
+  _errorListeners: Record<string, ErrorListener>;
+  subscriptionProgress: EventSubscription | null;
+  subscriptionError: EventSubscription | null;
+
   constructor() {
     this._hasInitialized = false;
     this._offlinePacks = {};
@@ -52,7 +94,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: OfflineCreatePackInputOptions,
+    progressListener: ProgressListener,
+    errorListener: ErrorListener,
+  ): Promise<void> {
     await this._initialize();
 
     const packOptions = new OfflineCreatePackOptions(options);
@@ -64,9 +110,8 @@ class OfflineManager {
     }
 
     this.subscribe(packOptions.name, progressListener, errorListener);
-    const nativeOfflinePack = await MapLibreGLOfflineManager.createPack(
-      packOptions,
-    );
+    const nativeOfflinePack =
+      await MapLibreGLOfflineManager.createPack(packOptions);
     this._offlinePacks[packOptions.name] = new OfflinePack(nativeOfflinePack);
   }
 
@@ -81,7 +126,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 +148,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 +173,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async invalidateAmbientCache() {
+  async invalidateAmbientCache(): Promise<void> {
     await this._initialize();
     await MapLibreGLOfflineManager.invalidateAmbientCache();
   }
@@ -142,7 +187,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async clearAmbientCache() {
+  async clearAmbientCache(): Promise<void> {
     await this._initialize();
     await MapLibreGLOfflineManager.clearAmbientCache();
   }
@@ -157,7 +202,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 MapLibreGLOfflineManager.setMaximumAmbientCacheSize(size);
   }
@@ -170,7 +215,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async resetDatabase() {
+  async resetDatabase(): Promise<void> {
     await this._initialize();
     await MapLibreGLOfflineManager.resetDatabase();
   }
@@ -183,10 +228,10 @@ class OfflineManager {
    *
    * @return {Array<OfflinePack>}
    */
-  async getPacks() {
+  async getPacks(): Promise<OfflinePack[]> {
     await this._initialize();
     return Object.keys(this._offlinePacks).map(
-      name => this._offlinePacks[name],
+      (name) => this._offlinePacks[name],
     );
   }
 
@@ -199,7 +244,7 @@ class OfflineManager {
    * @param  {String}  name  Name of the offline pack.
    * @return {OfflinePack}
    */
-  async getPack(name) {
+  async getPack(name: string): Promise<OfflinePack> {
     await this._initialize();
     return this._offlinePacks[name];
   }
@@ -213,7 +258,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 MapLibreGLOfflineManager.mergeOfflineRegions(path);
   }
@@ -228,7 +273,7 @@ class OfflineManager {
    * @param {Number} limit Map tile limit count.
    * @return {void}
    */
-  setTileCountLimit(limit) {
+  setTileCountLimit(limit: number): void {
     MapLibreGLOfflineManager.setTileCountLimit(limit);
   }
 
@@ -242,7 +287,7 @@ class OfflineManager {
    * @param {Number} throttleValue event throttle value in ms.
    * @return {void}
    */
-  setProgressEventThrottle(throttleValue) {
+  setProgressEventThrottle(throttleValue: number): void {
     MapLibreGLOfflineManager.setProgressEventThrottle(throttleValue);
   }
 
@@ -260,7 +305,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) {
@@ -290,7 +339,7 @@ class OfflineManager {
         // manually set a listener, since listeners are only set on create flow
         await MapLibreGLOfflineManager.setPackObserver(packName);
       } catch (e) {
-        console.log('Unable to set pack observer', e);
+        console.log("Unable to set pack observer", e);
       }
     }
   }
@@ -305,7 +354,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];
 
@@ -324,7 +373,7 @@ class OfflineManager {
     }
   }
 
-  async _initialize() {
+  async _initialize(): Promise<boolean> {
     if (this._hasInitialized) {
       return true;
     }
@@ -333,15 +382,17 @@ class OfflineManager {
 
     for (const nativeOfflinePack of nativeOfflinePacks) {
       const offlinePack = new OfflinePack(nativeOfflinePack);
-      this._offlinePacks[offlinePack.name] = offlinePack;
+      if (offlinePack.name) {
+        this._offlinePacks[offlinePack.name] = offlinePack;
+      }
     }
 
     this._hasInitialized = true;
     return true;
   }
 
-  _onProgress(e) {
-    const {name, state} = e.payload;
+  _onProgress(e: ProgressEvent): void {
+    const { name, state } = e.payload;
 
     if (!this._hasListeners(name, this._progressListeners)) {
       return;
@@ -356,8 +407,8 @@ class OfflineManager {
     }
   }
 
-  _onError(e) {
-    const {name} = e.payload;
+  _onError(e: ErrorEvent): void {
+    const { name } = e.payload;
 
     if (!this._hasListeners(name, this._errorListeners)) {
       return;
@@ -367,7 +418,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.ts

@@ -0,0 +1,104 @@
+import { NativeModules } from "react-native";
+
+import { toJSONString } from "../../utils";
+import { makePoint, makeFeatureCollection } from "../../utils/geoUtils";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export interface SnapshotInputOptions {
+  centerCoordinate?: GeoJSON.Position;
+  bounds?: GeoJSON.Position[];
+  styleURL?: string;
+  heading?: number;
+  pitch?: number;
+  zoomLevel?: number;
+  width?: number;
+  height?: number;
+  writeToDisk?: boolean;
+  withLogo?: boolean;
+}
+
+interface SnapshotJsonOptions {
+  centerCoordinate?: string;
+  bounds?: string;
+  styleURL: string;
+  heading: number;
+  pitch: number;
+  zoomLevel: number;
+  width: number;
+  height: number;
+  writeToDisk: boolean;
+  withLogo: boolean;
+}
+
+export class SnapshotOptions {
+  centerCoordinate?: string;
+  bounds?: string;
+  styleURL: string;
+  heading: number;
+  pitch: number;
+  zoomLevel: number;
+  width: number;
+  height: number;
+  writeToDisk: boolean;
+  withLogo: boolean;
+
+  constructor(options: SnapshotInputOptions) {
+    if (!options.centerCoordinate && !options.bounds) {
+      throw new Error(
+        "Center coordinate or bounds must be supplied in order to take a snapshot",
+      );
+    }
+
+    this.styleURL = options.styleURL || MapLibreGL.StyleURL.Default;
+    this.heading = options.heading || 0.0;
+    this.pitch = options.pitch || 0.0;
+    this.zoomLevel = options.zoomLevel || 16.0;
+    this.width = options.width || 50.0;
+    this.height = options.height || 50.0;
+    this.writeToDisk = options.writeToDisk || false;
+    this.withLogo = options.withLogo === undefined ? true : options.withLogo;
+
+    if (options.centerCoordinate) {
+      this.centerCoordinate = this._createCenterCoordPoint(
+        options.centerCoordinate,
+      );
+    }
+
+    if (options.bounds) {
+      this.bounds = this._createBoundsCollection(options.bounds);
+    }
+  }
+
+  toJSON(): SnapshotJsonOptions {
+    return {
+      styleURL: this.styleURL,
+      heading: this.heading,
+      pitch: this.pitch,
+      zoomLevel: this.zoomLevel,
+      width: this.width,
+      height: this.height,
+      writeToDisk: this.writeToDisk,
+      centerCoordinate: this.centerCoordinate,
+      bounds: this.bounds,
+      withLogo: this.withLogo,
+    };
+  }
+
+  _createCenterCoordPoint(centerCoordinate: GeoJSON.Position): string {
+    const point = makePoint(centerCoordinate);
+    return toJSONString(point);
+  }
+
+  _createBoundsCollection(bounds: GeoJSON.Position[]): string {
+    const features = [];
+
+    for (const bound of bounds) {
+      features.push(makePoint(bound));
+    }
+
+    return toJSONString(makeFeatureCollection(features));
+  }
+}
+
+export default SnapshotOptions;

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

@@ -1,8 +1,8 @@
-import SnapshotOptions from './SnapshotOptions';
+import { NativeModules } from "react-native";
 
-import {NativeModules} from 'react-native';
+import SnapshotOptions, { SnapshotInputOptions } from "./SnapshotOptions";
 
-const MapLibreGLSnapshotManger = NativeModules.MGLSnapshotModule;
+const MapLibreGLSnapshotManger = NativeModules.MLNSnapshotModule;
 
 /**
  * The snapshotManager generates static raster images of the map.
@@ -23,7 +23,7 @@ class SnapshotManager {
    *   zoomLevel: 12,
    *   pitch: 30,
    *   heading: 20,
-   *   styleURL: MapLibreGL.StyleURL.Dark,
+   *   styleURL: MapLibreGL.StyleURL.Default,
    *   writeToDisk: true, // Create a temporary file
    * });
    *
@@ -35,7 +35,7 @@ class SnapshotManager {
    *   zoomLevel: 12,
    *   pitch: 30,
    *   heading: 20,
-   *   styleURL: MapLibreGL.StyleURL.Dark,
+   *   styleURL: MapLibreGL.StyleURL.Default,
    *   withLogo: false, // Disable Mapbox logo (Android only)
    * });
    *
@@ -44,13 +44,13 @@ class SnapshotManager {
    *   bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],
    *   width: width,
    *   height: height,
-   *   styleURL: MapLibreGL.StyleURL.Dark,
+   *   styleURL: MapLibreGL.StyleURL.Default,
    * });
    *
    * @param  {SnapshotOptions}  options Snapshot options for create a static image of the base map
    * @return {Promise}
    */
-  async takeSnap(options = {}) {
+  async takeSnap(options: SnapshotInputOptions = {}): Promise<string> {
     const snapshotOptions = new SnapshotOptions(options);
 
     const uri = await MapLibreGLSnapshotManger.takeSnap(snapshotOptions);

package/javascript/requestAndroidLocationPermissions.ts

@@ -0,0 +1,29 @@
+import { Permission, PermissionsAndroid } from "react-native";
+
+import { isAndroid } from "./utils";
+
+export async function requestAndroidLocationPermissions(): Promise<boolean> {
+  if (isAndroid()) {
+    const res = await PermissionsAndroid.requestMultiple([
+      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+      PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
+    ]);
+
+    if (!res) {
+      return false;
+    }
+
+    const permissions: string[] = Object.keys(res);
+    for (const permission of permissions) {
+      if (
+        res[permission as Permission] === PermissionsAndroid.RESULTS.GRANTED
+      ) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  throw new Error("You should only call this method on Android!");
+}

package/javascript/types/BaseProps.ts

@@ -0,0 +1,5 @@
+interface BaseProps {
+  testID?: string;
+}
+
+export default BaseProps;

package/javascript/types/OnPressEvent.ts

@@ -0,0 +1,13 @@
+interface OnPressEvent {
+  features: GeoJSON.Feature[];
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  };
+  point: {
+    x: number;
+    y: number;
+  };
+}
+
+export default OnPressEvent;

package/javascript/types/index.ts

@@ -0,0 +1,11 @@
+import { SyntheticEvent } from "react";
+
+export type MaplibreGLEvent<
+  T extends string,
+  P = GeoJSON.Feature,
+  V = Element,
+> = SyntheticEvent<V, { type: T; payload: P }>;
+
+export enum StyleURL {
+  Default = "https://demotiles.maplibre.org/style.json",
+}

package/javascript/utils/BridgeValue.ts

@@ -0,0 +1,90 @@
+import { isBoolean, isNumber, isString } from "./index";
+
+export type RawValueType =
+  | string
+  | number
+  | boolean
+  | RawValueType[]
+  | { [key: string]: RawValueType };
+
+export type StyleValueJSON =
+  | { type: "boolean"; value: boolean }
+  | { type: "number"; value: number }
+  | { type: "string"; value: string }
+  | { type: "hashmap"; value: object }
+  | { type: "array"; value: unknown[] };
+
+type StyleValueTypes = "boolean" | "number" | "string" | "hashmap" | "array";
+
+export default class BridgeValue {
+  rawValue: RawValueType;
+
+  constructor(rawValue: RawValueType) {
+    this.rawValue = rawValue;
+  }
+
+  get type(): StyleValueTypes {
+    if (Array.isArray(this.rawValue)) {
+      return "array";
+    }
+    if (isBoolean(this.rawValue)) {
+      return "boolean";
+    }
+    if (isNumber(this.rawValue)) {
+      return "number";
+    }
+    if (isString(this.rawValue)) {
+      return "string";
+    }
+    if (this.rawValue && typeof this.rawValue === "object") {
+      return "hashmap";
+    }
+    throw new Error(
+      `[type - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+    );
+  }
+
+  get value():
+    | [StyleValueJSON, StyleValueJSON][]
+    | StyleValueJSON[]
+    | RawValueType {
+    const { type } = this;
+
+    let value;
+
+    if (type === "array") {
+      value = [];
+
+      for (const innerRawValue of this.rawValue as RawValueType[]) {
+        const bridgeValue = new BridgeValue(innerRawValue);
+        value.push(bridgeValue.toJSON());
+      }
+    } else if (type === "hashmap") {
+      value = [];
+      const rawValue = this.rawValue as { [key: string]: RawValueType };
+      const stringKeys = Object.keys(this.rawValue);
+      for (const stringKey of stringKeys) {
+        value.push([
+          new BridgeValue(stringKey).toJSON(),
+          new BridgeValue(rawValue[stringKey]).toJSON(),
+        ] as [StyleValueJSON, StyleValueJSON]);
+      }
+    } else if (type === "boolean" || type === "number" || type === "string") {
+      value = this.rawValue;
+    } else {
+      throw new Error(
+        `[value - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+      );
+    }
+
+    return value;
+  }
+
+  toJSON(formatter?: <T>(arg0: T) => T): StyleValueJSON {
+    return {
+      type: this.type,
+      value:
+        typeof formatter === "function" ? formatter(this.value) : this.value,
+    } as StyleValueJSON;
+  }
+}