@rnmapbox/maps 10.0.0-beta.65 → 10.0.0-beta.67

package/ios/RCTMGL-v10/RCTMGLOfflineModule.swift

@@ -11,10 +11,14 @@ extension Date {
   }
 }
 
+
+
 @objc(RCTMGLOfflineModule)
 class RCTMGLOfflineModule: RCTEventEmitter {
   var hasListeners = false
   
+  static let RNMapboxInfoMetadataKey = "_rnmapbox"
+
   enum Callbacks : String {
     case error = "MapboOfflineRegionError"
     case progress = "MapboxOfflineRegionProgress"
@@ -37,11 +41,65 @@ class RCTMGLOfflineModule: RCTEventEmitter {
   }()
   
   struct TileRegionPack {
+    init(name: String, state: State = .unknown, progress: TileRegionLoadProgress? = nil, metadata: [String:Any]) {
+      self.name = name
+      self.progress = progress
+      self.metadata = metadata
+      self.state = state
+
+      if let rnMetadata = metadata[RNMapboxInfoMetadataKey] as? [String:Any] {
+        if let styleURI = rnMetadata["styleURI"] as? String {
+          self.styleURI = StyleURI(rawValue: styleURI)
+        }
+        if let bounds = rnMetadata["bounds"] as? JSONObject {
+          self.bounds = logged("RCTMGLOfflineModule.TileRegionPack: cannot decode bounds") {
+            let jsonData = try JSONSerialization.data(withJSONObject: bounds)
+            return try JSONDecoder().decode(Geometry.self, from: jsonData)
+          }
+        }
+        if let zoomRange = rnMetadata["zoomRange"] as? JSONObject {
+          self.zoomRange = logged("RCTMGLOfflineModule.TileRegionPack: cannot decode zoomRange") {
+            let jsonData = try JSONSerialization.data(withJSONObject: zoomRange)
+            return try JSONDecoder().decode(ClosedRange<UInt8>.self, from: jsonData)
+          }
+        }
+      }
+    }
+    
+    init(name: String,
+         state: State = .unknown,
+         styleURI: StyleURI,
+         bounds: Geometry,
+         zoomRange: ClosedRange<UInt8>,
+         metadata: [String:Any]) {
+      self.name = name
+      self.progress = nil
+      self.cancelable = nil
+      self.state = state
+      
+      self.styleURI = styleURI
+      self.bounds = bounds
+      self.zoomRange = zoomRange
+      
+      var metadata = metadata
+      metadata[RNMapboxInfoMetadataKey] = [
+        "styleURI": styleURI.rawValue,
+        "bounds": logged("RCTMGLOfflineModule.TileRegionPack: cannot encode bounds") { try JSONSerialization.jsonObject(with: try! JSONEncoder().encode(bounds)) },
+        "zoomRange": logged("RCTMGLOfflineModule.TileRegionPack: cannot encode zoomRange") { try JSONSerialization.jsonObject(with: try! JSONEncoder().encode(zoomRange))}
+      ]
+      self.metadata = metadata
+    }
+
     var name: String
     var cancelable: Cancelable? = nil
     var progress : TileRegionLoadProgress? = nil
     var state : State = .inactive
     var metadata : [String:Any]? = nil
+
+      // Stored in metadata for resume functionality:
+    var bounds: Geometry? = nil
+    var zoomRange: ClosedRange<UInt8>? = nil
+    var styleURI: StyleURI? = nil
   }
   
   lazy var tileRegionPacks : [String: TileRegionPack] = [:]
@@ -116,7 +174,7 @@ class RCTMGLOfflineModule: RCTEventEmitter {
       if let expires = region.expires {
         result["expires"] = expires.toJSONString()
       }
-      
+
       result["metadata"] = String(data:try! JSONSerialization.data(withJSONObject: metadata, options: [.prettyPrinted]), encoding: .utf8)
       
       result["bounds"] = jsonBounds
@@ -182,9 +240,9 @@ class RCTMGLOfflineModule: RCTEventEmitter {
         let ret = self.convertRegionToJSON(region: region, geometry: geometry, metadata: metadata)
         var pack = self.tileRegionPacks[region.id] ?? TileRegionPack(
           name: region.id,
-          progress: self.toProgress(region: region),
           state: .unknown,
-          metadata: metadata
+          progress: self.toProgress(region: region),
+          metadata: logged("RCTMGLOfflineModule.getPacks metadata is null") { metadata } ?? [:]
         )
 
         if ((region.completedResourceCount == region.completedResourceSize)) {
@@ -327,9 +385,9 @@ class RCTMGLOfflineModule: RCTEventEmitter {
     DispatchQueue.main.async {
       do {
         let metadataStr = options["metadata"] as! String
-        let metadata = try JSONSerialization.jsonObject(with: metadataStr.data(using: .utf8)!, options: []) as! [String:Any]
+        var metadata = try JSONSerialization.jsonObject(with: metadataStr.data(using: .utf8)!, options: []) as! [String:Any]
+        metadata["styleURI"] = options["styleURL"]
         let id = metadata["name"] as! String
-        let stylePackLoadOptions = StylePackLoadOptions(glyphsRasterizationMode: .ideographsRasterizedLocally, metadata: metadata)
 
         let boundsStr = options["bounds"] as! String
         let boundsData = boundsStr.data(using: .utf8)
@@ -337,53 +395,16 @@ class RCTMGLOfflineModule: RCTEventEmitter {
 
         var bounds = self.convertPointPairToBounds(RCTMGLFeatureUtils.fcToGeomtry(boundsFC))
 
-        let descriptorOptions = TilesetDescriptorOptions(
-          styleURI: StyleURI(rawValue: options["styleURL"] as! String)!,
-          zoomRange: (options["minZoom"] as! NSNumber).uint8Value...(options["maxZoom"] as! NSNumber).uint8Value,
-          stylePackOptions: stylePackLoadOptions
-        )
-        let tilesetDescriptor = self.offlineManager.createTilesetDescriptor(for: descriptorOptions)
-
-        let loadOptions = TileRegionLoadOptions(
-          geometry: bounds, // RCTMGLFeatureUtils.geometryToGeometry(bounds),
-          descriptors: [tilesetDescriptor],
-          metadata: metadata,
-          acceptExpired: true,
-          networkRestriction: .none,
-          averageBytesPerSecond: nil)
-
         let actPack = RCTMGLOfflineModule.TileRegionPack(
           name: id,
-          progress: nil,
-          state: .inactive
+          styleURI: StyleURI(rawValue: options["styleURL"] as! String)!,
+          bounds: bounds,
+          zoomRange: (options["minZoom"] as! NSNumber).uint8Value...(options["maxZoom"] as! NSNumber).uint8Value,
+          metadata: metadata
         )
         self.tileRegionPacks[id] = actPack
+        self.startLoading(pack: actPack)
 
-        var lastProgress : TileRegionLoadProgress? = nil
-        let task = self.tileStore.loadTileRegion(forId: id, loadOptions: loadOptions!, progress: {
-          progress in
-          lastProgress = progress
-          self.tileRegionPacks[id]!.progress = progress
-          self.tileRegionPacks[id]!.state = .active
-          self.offlinePackProgressDidChange(progress: progress, metadata: metadata, state: .active)
-        }) { result in
-          switch result {
-          case .success(let value):
-            DispatchQueue.main.async {
-              if let progess = lastProgress {
-                self.offlinePackProgressDidChange(progress: progess, metadata: metadata, state: .complete)
-              }
-              self.tileRegionPacks[id]!.state = .complete
-            }
-          case .failure(let error):
-            DispatchQueue.main.async {
-              self.tileRegionPacks[id]!.state = .inactive
-              self.offlinePackDidReceiveError(name: id, error: error)
-            }
-          }
-        }
-
-        self.tileRegionPacks[id]!.cancelable = task
         resolver([
           "bounds": boundsStr,
           "metadata": String(data:try! JSONSerialization.data(withJSONObject: metadata, options: [.prettyPrinted]), encoding: .utf8)
@@ -394,10 +415,72 @@ class RCTMGLOfflineModule: RCTEventEmitter {
     }
   }
   
+  func startLoading(pack: TileRegionPack) {
+    let id = pack.name
+    guard let bounds = pack.bounds else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there are no bounds in pack")
+      return
+    }
+    guard let zoomRange = pack.zoomRange else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there is no zoom range in pack")
+      return
+    }
+    guard let styleURI = pack.styleURI else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there is no styleURI in pack")
+      return
+    }
+    guard let metadata = pack.metadata else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there is no metadata in pack")
+      return
+    }
+    
+    let stylePackLoadOptions = StylePackLoadOptions(glyphsRasterizationMode: .ideographsRasterizedLocally, metadata: pack.metadata)
+    
+    let descriptorOptions = TilesetDescriptorOptions(
+      styleURI: styleURI,
+      zoomRange: zoomRange,
+      stylePackOptions: stylePackLoadOptions
+    )
+    let tilesetDescriptor = self.offlineManager.createTilesetDescriptor(for: descriptorOptions)
+
+    let loadOptions = TileRegionLoadOptions(
+      geometry: bounds, // RCTMGLFeatureUtils.geometryToGeometry(bounds),
+      descriptors: [tilesetDescriptor],
+      metadata: metadata,
+      acceptExpired: true,
+      networkRestriction: .none,
+      averageBytesPerSecond: nil)
+
+    var lastProgress : TileRegionLoadProgress? = nil
+    let task = self.tileStore.loadTileRegion(forId: id, loadOptions: loadOptions!, progress: {
+      progress in
+      lastProgress = progress
+      self.tileRegionPacks[id]!.progress = progress
+      self.tileRegionPacks[id]!.state = .active
+      self.offlinePackProgressDidChange(progress: progress, metadata: metadata, state: .active)
+    }) { result in
+      switch result {
+      case .success(let value):
+        DispatchQueue.main.async {
+          if let progess = lastProgress {
+            self.offlinePackProgressDidChange(progress: progess, metadata: metadata, state: .complete)
+          }
+          self.tileRegionPacks[id]!.state = .complete
+        }
+      case .failure(let error):
+        DispatchQueue.main.async {
+          self.tileRegionPacks[id]!.state = .inactive
+          self.offlinePackDidReceiveError(name: id, error: error)
+        }
+      }
+    }
+    self.tileRegionPacks[id]!.cancelable = task
+  }
+
   func _getPack(fromName: String) -> TileRegionPack? {
     return self.tileRegionPacks[fromName]
   }
-  
+
   @objc
   func getPackStatus(_ name: String,
                      resolver: @escaping RCTPromiseResolveBlock,
@@ -413,12 +496,10 @@ class RCTMGLOfflineModule: RCTEventEmitter {
         Logger.log(level:.error, message: "Unable to fetch metadata for \(name)")
         rejecter("RCTMGLOfflineModule.getPackStatus", error.localizedDescription, error)
       case .success(let metadata):
-        var pack = self.tileRegionPacks[name] ?? TileRegionPack(name: name)
-        if let metadata = metadata as? [String:Any] {
-          pack.metadata = metadata
-        } else {
-          Logger.log(level:.error, message: "Unexpected metadata format for \(name) \(metadata)")
-        }
+        var pack = self.tileRegionPacks[name] ?? TileRegionPack(
+          name: name,
+          metadata: logged("RCTMGLOfflineModule.getPackStatus") { metadata as? [String:Any] } ?? [:]
+        )
         self.tileRegionPacks[name] = pack
         resolver(self._makeRegionStatusPayload(pack: pack))
       }
@@ -429,7 +510,9 @@ class RCTMGLOfflineModule: RCTEventEmitter {
   @objc
   func resumePackDownload(_ name: String, resolver: RCTPromiseResolveBlock, rejecter: RCTPromiseRejectBlock)
   {
-    //V10todo start download again
+    if let pack = _getPack(fromName: name) {
+      self.startLoading(pack: pack)
+    }
   }
   
   @objc

package/javascript/components/BackgroundLayer.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import {
+  FilterExpression,
+  BackgroundLayerStyleProps,
+} from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: BackgroundLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+class BackgroundLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLBackgroundLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLBackgroundLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default BackgroundLayer;

package/javascript/components/CircleLayer.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  HostComponent,
+  NativeModules,
+  requireNativeComponent,
+} from 'react-native';
+
+import { FilterExpression, CircleLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property
+   * from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: CircleLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * CircleLayer is a style layer that renders one or more filled circles on the map.
+ */
+class CircleLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.props,
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLCircleLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLCircleLayer: HostComponent<Props> =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default CircleLayer;

package/javascript/components/FillExtrusionLayer.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import {
+  FilterExpression,
+  FillExtrusionLayerStyleProps,
+} from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: FillExtrusionLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
+ */
+class FillExtrusionLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.props,
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLFillExtrusionLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default FillExtrusionLayer;

package/javascript/components/FillLayer.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { FilterExpression, FillLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: FillLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
+ */
+class FillLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLFillLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default FillLayer;