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

package/javascript/components/annotations/Annotation.tsx

@@ -0,0 +1,134 @@
+import SymbolLayer from '../SymbolLayer';
+import Animated from '../../utils/animated/Animated';
+import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
+import OnPressEvent from '../../types/OnPressEvent';
+import {SymbolLayerStyleProps} from '../../utils/MaplibreStyles';
+
+import React, {ReactElement} from 'react';
+import {Animated as RNAnimated, Easing} from 'react-native';
+
+interface AnnotationProps {
+  id: string;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?(x: number): number;
+  coordinates?: number[];
+  onPress?(event: OnPressEvent): void;
+  children?: ReactElement | ReactElement[];
+  style?: object;
+  icon?: string | number | object;
+}
+
+type AnnotationState = {
+  shape: AnimatedMapPoint | GeoJSON.Point | null;
+};
+
+class Annotation extends React.Component<AnnotationProps, AnnotationState> {
+  static defaultProps = {
+    animated: false,
+    animationDuration: 1000,
+    animationEasingFunction: Easing.linear,
+  };
+
+  constructor(props: AnnotationProps) {
+    super(props);
+
+    const shape = this._getShapeFromProps(props);
+
+    this.state = {
+      shape: props.animated ? new AnimatedMapPoint(shape) : shape,
+    };
+
+    this.onPress = this.onPress.bind(this);
+  }
+
+  componentDidUpdate(prevProps: AnnotationProps): void {
+    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 as AnimatedMapPoint).stopAnimation();
+
+      (this.state.shape as AnimatedMapPoint)
+        .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.setState({
+        shape: this.props.animated ? new AnimatedMapPoint(shape) : shape,
+      });
+    }
+  }
+
+  onPress(event: OnPressEvent): void {
+    if (this.props.onPress) {
+      this.props.onPress(event);
+    }
+  }
+
+  _getShapeFromProps(props: Partial<AnnotationProps> = {}): GeoJSON.Point {
+    const lng = props.coordinates?.[0] || 0;
+    const lat = props.coordinates?.[1] || 0;
+    return {type: 'Point', coordinates: [lng, lat]};
+  }
+
+  get symbolStyle(): SymbolLayerStyleProps | undefined {
+    if (!this.props.icon) {
+      return undefined;
+    }
+    return Object.assign({}, this.props.style, {
+      iconImage: this.props.icon,
+    });
+  }
+
+  render(): ReactElement | null {
+    if (!this.props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+
+    if (this.symbolStyle) {
+      children.push(
+        <SymbolLayer id={`${this.props.id}-symbol`} style={this.symbolStyle} />,
+      );
+    }
+
+    if (this.props.children) {
+      if (Array.isArray(this.props.children)) {
+        children.push(...this.props.children);
+      } else {
+        children.push(this.props.children);
+      }
+    }
+
+    return (
+      <Animated.ShapeSource
+        id={this.props.id}
+        onPress={this.onPress}
+        shape={
+          this.state.shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>
+        }>
+        {children}
+      </Animated.ShapeSource>
+    );
+  }
+}
+
+export default Annotation;

package/javascript/index.ts

@@ -0,0 +1,4 @@
+export * from './Maplibre';
+import * as Maplibre from './Maplibre';
+
+export default Maplibre;

package/javascript/modules/location/{locationManager.js → locationManager.ts}

@@ -1,4 +1,8 @@
-import {NativeModules, NativeEventEmitter} from 'react-native';
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EmitterSubscription,
+} from 'react-native';
 
 const MapLibreGL = NativeModules.MGLModule;
 const MapLibreGLLocationManager = NativeModules.MGLLocationModule;
@@ -7,7 +11,64 @@ export const LocationModuleEventEmitter = new NativeEventEmitter(
   MapLibreGLLocationManager,
 );
 
+/**
+ * Location sent by locationManager
+ */
+export interface Location {
+  coords: Coordinates;
+  timestamp?: number;
+}
+
+/**
+ * Coorinates sent by locationManager
+ */
+interface Coordinates {
+  /**
+   * The heading (measured in degrees) relative to true north.
+   * Heading is used to describe the direction the device is pointing to (the value of the compass).
+   * Note that on Android this is incorrectly reporting the course value as mentioned in issue https://github.com/rnmapbox/maps/issues/1213
+   * and will be corrected in a future update.
+   */
+  heading?: number;
+
+  /**
+   * The direction in which the device is traveling, measured in degrees and relative to due north.
+   * The course refers to the direction the device is actually moving (not the same as heading).
+   */
+  course?: number;
+
+  /**
+   * The instantaneous speed of the device, measured in meters per second.
+   */
+  speed?: number;
+
+  /**
+   * The latitude in degrees.
+   */
+  latitude: number;
+
+  /**
+   * The longitude in degrees.
+   */
+  longitude: number;
+
+  /**
+   * The radius of uncertainty for the location, measured in meters.
+   */
+  accuracy?: number;
+
+  /**
+   * The altitude, measured in meters.
+   */
+  altitude?: number;
+}
+
 class LocationManager {
+  _listeners: ((location: Location) => void)[];
+  _lastKnownLocation: Location | null;
+  _isListening: boolean;
+  subscription: EmitterSubscription | null;
+
   constructor() {
     this._listeners = [];
     this._lastKnownLocation = null;
@@ -16,7 +77,7 @@ class LocationManager {
     this.subscription = null;
   }
 
-  async getLastKnownLocation() {
+  async getLastKnownLocation(): Promise<Location | null> {
     if (!this._lastKnownLocation) {
       let lastKnownLocation;
 
@@ -39,7 +100,7 @@ class LocationManager {
     return this._lastKnownLocation;
   }
 
-  addListener(listener) {
+  addListener(listener: (location: Location) => void): void {
     if (!this._isListening) {
       this.start();
     }
@@ -52,19 +113,19 @@ class LocationManager {
     }
   }
 
-  removeListener(listener) {
+  removeListener(listener: (location: Location) => void): void {
     this._listeners = this._listeners.filter(l => l !== listener);
     if (this._listeners.length === 0) {
       this.stop();
     }
   }
 
-  removeAllListeners() {
+  removeAllListeners(): void {
     this._listeners = [];
     this.stop();
   }
 
-  start(displacement = 0) {
+  start(displacement = 0): void {
     if (!this._isListening) {
       MapLibreGLLocationManager.start(displacement);
 
@@ -77,21 +138,21 @@ class LocationManager {
     }
   }
 
-  stop() {
+  stop(): void {
     MapLibreGLLocationManager.stop();
 
     if (this._isListening) {
-      this.subscription.remove();
+      this.subscription?.remove();
     }
 
     this._isListening = false;
   }
 
-  setMinDisplacement(minDisplacement) {
+  setMinDisplacement(minDisplacement: number): void {
     MapLibreGLLocationManager.setMinDisplacement(minDisplacement);
   }
 
-  onUpdate(location) {
+  onUpdate(location: Location): void {
     this._lastKnownLocation = location;
 
     this._listeners.forEach(l => l(location));

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

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

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

@@ -1,38 +1,54 @@
+import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+
 import {NativeModules} from 'react-native';
 
 const MapLibreGLOfflineManager = 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: Record<string, any> | null;
+
+  constructor(pack: OfflineCreatePackOptions) {
     this.pack = pack;
     this._metadata = null;
   }
 
-  get name() {
+  get name(): string | null {
     const {metadata} = this;
     return metadata && metadata.name;
   }
 
-  get bounds() {
+  get bounds(): string {
     return this.pack.bounds;
   }
 
-  get metadata() {
+  get metadata(): Record<string, any> | null {
     if (!this._metadata && this.pack.metadata) {
       this._metadata = JSON.parse(this.pack.metadata);
     }
     return this._metadata;
   }
 
-  status() {
+  status(): Promise<OfflinePackStatus> {
     return MapLibreGLOfflineManager.getPackStatus(this.name);
   }
 
-  resume() {
+  resume(): Promise<void> {
     return MapLibreGLOfflineManager.resumePackDownload(this.name);
   }
 
-  pause() {
+  pause(): Promise<void> {
     return MapLibreGLOfflineManager.pausePackDownload(this.name);
   }
 }

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

@@ -1,9 +1,15 @@
 import {isUndefined, isFunction, isAndroid} from '../../utils';
 
-import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+import OfflineCreatePackOptions, {
+  OfflineCreatePackInputOptions,
+} from './OfflineCreatePackOptions';
 import OfflinePack from './OfflinePack';
 
-import {NativeModules, NativeEventEmitter} from 'react-native';
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EventSubscription,
+} from 'react-native';
 
 const MapLibreGL = NativeModules.MGLModule;
 const MapLibreGLOfflineManager = NativeModules.MGLOfflineModule;
@@ -11,12 +17,49 @@ 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 +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: OfflineCreatePackInputOptions,
+    progressListener: ProgressListener,
+    errorListener: ErrorListener,
+  ): Promise<void> {
     await this._initialize();
 
     const packOptions = new OfflineCreatePackOptions(options);
@@ -64,9 +111,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 +127,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 +149,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 +174,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async invalidateAmbientCache() {
+  async invalidateAmbientCache(): Promise<void> {
     await this._initialize();
     await MapLibreGLOfflineManager.invalidateAmbientCache();
   }
@@ -142,7 +188,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async clearAmbientCache() {
+  async clearAmbientCache(): Promise<void> {
     await this._initialize();
     await MapLibreGLOfflineManager.clearAmbientCache();
   }
@@ -157,7 +203,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 +216,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async resetDatabase() {
+  async resetDatabase(): Promise<void> {
     await this._initialize();
     await MapLibreGLOfflineManager.resetDatabase();
   }
@@ -183,7 +229,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],
@@ -199,7 +245,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 +259,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 +274,7 @@ class OfflineManager {
    * @param {Number} limit Map tile limit count.
    * @return {void}
    */
-  setTileCountLimit(limit) {
+  setTileCountLimit(limit: number): void {
     MapLibreGLOfflineManager.setTileCountLimit(limit);
   }
 
@@ -242,7 +288,7 @@ class OfflineManager {
    * @param {Number} throttleValue event throttle value in ms.
    * @return {void}
    */
-  setProgressEventThrottle(throttleValue) {
+  setProgressEventThrottle(throttleValue: number): void {
     MapLibreGLOfflineManager.setProgressEventThrottle(throttleValue);
   }
 
@@ -260,7 +306,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) {
@@ -305,7 +355,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 +374,7 @@ class OfflineManager {
     }
   }
 
-  async _initialize() {
+  async _initialize(): Promise<boolean> {
     if (this._hasInitialized) {
       return true;
     }
@@ -333,14 +383,16 @@ 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) {
+  _onProgress(e: ProgressEvent): void {
     const {name, state} = e.payload;
 
     if (!this._hasListeners(name, this._progressListeners)) {
@@ -356,7 +408,7 @@ class OfflineManager {
     }
   }
 
-  _onError(e) {
+  _onError(e: ErrorEvent): void {
     const {name} = e.payload;
 
     if (!this._hasListeners(name, this._errorListeners)) {
@@ -367,7 +419,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])
     );