@rnmapbox/maps 10.0.0-beta.44 → 10.0.0-beta.45

package/docs/docs.json

@@ -1,4 +1,98 @@
 {
+  "Annotation": {
+    "description": "",
+    "displayName": "Annotation",
+    "methods": [
+      {
+        "name": "onPress",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      },
+      {
+        "name": "symbolStyle",
+        "docblock": null,
+        "modifiers": [
+          "get"
+        ],
+        "params": [],
+        "returns": null
+      }
+    ],
+    "props": [
+      {
+        "name": "id",
+        "required": true,
+        "type": "string",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "animated",
+        "required": false,
+        "type": "bool",
+        "default": "false",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "animationDuration",
+        "required": false,
+        "type": "number",
+        "default": "1000",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "animationEasingFunction",
+        "required": false,
+        "type": "func",
+        "default": "Easing.linear",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "coordinates",
+        "required": false,
+        "type": {
+          "name": "array",
+          "value": {
+            "type": "number"
+          }
+        },
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "onPress",
+        "required": false,
+        "type": "func",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "children",
+        "required": false,
+        "type": "any",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "style",
+        "required": false,
+        "type": "any",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "icon",
+        "required": false,
+        "type": "union",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
+      }
+    ],
+    "fileNameWithExt": "Annotation.js",
+    "name": "Annotation"
+  },
   "Atmosphere": {
     "description": "",
     "displayName": "Atmosphere",
@@ -3166,7 +3260,7 @@
     "name": "MapView"
   },
   "MarkerView": {
-    "description": "MarkerView allows you to place a interactive react native marker to the map.\n\nIf you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance\n.\nThis is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android\nand PointAnnotation on iOS.",
+    "description": "MarkerView represents an interactive React Native marker on the map.\n\nIf you have static views, consider using PointAnnotation or SymbolLayer to display\nan image, as they'll offer much better performance. Mapbox suggests using this\ncomponent for a maximum of around 100 views displayed at one time.\n\nThis is implemented with view annotations on [Android](https://docs.mapbox.com/android/maps/guides/annotations/view-annotations/)\nand [iOS](https://docs.mapbox.com/ios/maps/guides/annotations/view-annotations).\n\nThis component has no dedicated `onPress` method. Instead, you should handle gestures\nwith the React views passed in as `children`.",
     "displayName": "MarkerView",
     "methods": [],
     "props": [
@@ -3175,7 +3269,7 @@
         "required": true,
         "type": "tuple",
         "default": "none",
-        "description": "The center point (specified as a map coordinate) of the marker.\nSee also #anchor."
+        "description": "The center point (specified as a map coordinate) of the marker."
       },
       {
         "name": "anchor",
@@ -3188,26 +3282,40 @@
               "required": true,
               "type": "number",
               "default": "none",
-              "description": "`x` of anchor"
+              "description": "FIX ME NO DESCRIPTION"
             },
             {
               "name": "y",
               "required": true,
               "type": "number",
               "default": "none",
-              "description": "`y` of anchor"
+              "description": "FIX ME NO DESCRIPTION"
             }
           ]
         },
         "default": "{ x: 0.5, y: 0.5 }",
-        "description": "Specifies the anchor being set on a particular point of the annotation.\nThe anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],\nwhere (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.\nNote this is only for custom annotations not the default pin view.\nDefaults to the center of the view."
+        "description": "Any coordinate between (0, 0) and (1, 1), where (0, 0) is the top-left corner of\nthe view, and (1, 1) is the bottom-right corner. Defaults to the center at (0.5, 0.5)."
+      },
+      {
+        "name": "allowOverlap",
+        "required": false,
+        "type": "boolean",
+        "default": "false",
+        "description": "@v10\n\nWhether or not nearby markers on the map should all be displayed. If false, adjacent\nmarkers will 'collapse' and only one will be shown. Defaults to false."
+      },
+      {
+        "name": "isSelected",
+        "required": false,
+        "type": "boolean",
+        "default": "false",
+        "description": "FIX ME NO DESCRIPTION"
       },
       {
         "name": "children",
         "required": true,
         "type": "ReactReactElement",
         "default": "none",
-        "description": "Expects one child - can be container with multiple elements"
+        "description": "One or more valid React Native views."
       }
     ],
     "fileNameWithExt": "MarkerView.tsx",
@@ -3237,7 +3345,7 @@
     "name": "NativeUserLocation"
   },
   "PointAnnotation": {
-    "description": "PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.\n\nConsider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,\nthey'll offer much better performance.\n\nIf you need interactive views please use MarkerView,\nas with PointAnnotation on Android child views are rendered onto a bitmap for better performance.",
+    "description": "PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.\n\nConsider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,\nthey'll offer much better performance.\n\nIf you need interactive views please use MarkerView,\nas with PointAnnotation child views are rendered onto a bitmap",
     "displayName": "PointAnnotation",
     "methods": [
       {
@@ -4381,7 +4489,7 @@
       {
         "name": "filter",
         "required": false,
-        "type": "Array",
+        "type": "Expression",
         "default": "none",
         "description": "Filter only the features in the source layer that satisfy a condition that you define"
       },
@@ -6117,100 +6225,6 @@
     "fileNameWithExt": "VectorSource.js",
     "name": "VectorSource"
   },
-  "Annotation": {
-    "description": "",
-    "displayName": "Annotation",
-    "methods": [
-      {
-        "name": "onPress",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      },
-      {
-        "name": "symbolStyle",
-        "docblock": null,
-        "modifiers": [
-          "get"
-        ],
-        "params": [],
-        "returns": null
-      }
-    ],
-    "props": [
-      {
-        "name": "id",
-        "required": true,
-        "type": "string",
-        "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "animated",
-        "required": false,
-        "type": "bool",
-        "default": "false",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "animationDuration",
-        "required": false,
-        "type": "number",
-        "default": "1000",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "animationEasingFunction",
-        "required": false,
-        "type": "func",
-        "default": "Easing.linear",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "coordinates",
-        "required": false,
-        "type": {
-          "name": "array",
-          "value": {
-            "type": "number"
-          }
-        },
-        "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "onPress",
-        "required": false,
-        "type": "func",
-        "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "children",
-        "required": false,
-        "type": "any",
-        "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "style",
-        "required": false,
-        "type": "any",
-        "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
-      },
-      {
-        "name": "icon",
-        "required": false,
-        "type": "union",
-        "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
-      }
-    ],
-    "fileNameWithExt": "Annotation.js",
-    "name": "Annotation"
-  },
   "offlineManager": {
     "name": "offlineManager",
     "fileNameWithExt": "offlineManager.js",

package/index.d.ts

@@ -153,6 +153,7 @@ declare namespace MapboxGL {
   const PointAnnotation = _PointAnnotation;
   const SymbolLayer = _SymbolLayer;
   const ShapeSource = _ShapeSource;
+  type ShapeSource = _ShapeSource;
 
   type MapboxGLEvent = _MapboxGLEvent;
   type UserTrackingMode = _UserTrackingMode;

package/ios/RCTMGL-v10/RCTLog.swift

@@ -1,19 +1,19 @@
-func RCTLogError(_ message: String, _ file: String=#file, _ line: UInt=#line) {
+func RCTMGLLogError(_ message: String, _ file: String=#file, _ line: UInt=#line) {
   RCTMGLSwiftLog.error(message, file: file, line: line)
 }
 
-func RCTLogWarn(_ message: String, _ file: String=#file, _ line: UInt=#line) {
+func RCTMGLLogWarn(_ message: String, _ file: String=#file, _ line: UInt=#line) {
   RCTMGLSwiftLog.warn(message, file: file, line: line)
 }
 
-func RCTLogInfo(_ message: String, _ file: String=#file, _ line: UInt=#line) {
+func RCTMGLLogInfo(_ message: String, _ file: String=#file, _ line: UInt=#line) {
   RCTMGLSwiftLog.info(message, file: file, line: line)
 }
 
-func RCTLog(_ message: String, _ file: String=#file, _ line: UInt=#line) {
+func RCTMGLLog(_ message: String, _ file: String=#file, _ line: UInt=#line) {
   RCTMGLSwiftLog.log(message, file: file, line: line)
 }
 
-func RCTLogTrace(_ message: String, _ file: String=#file, _ line: UInt=#line) {
+func RCTMGLLogTrace(_ message: String, _ file: String=#file, _ line: UInt=#line) {
   RCTMGLSwiftLog.trace(message, file: file, line: line)
 }

package/ios/RCTMGL-v10/RCTMGLMapViewManager.swift

@@ -30,7 +30,7 @@ extension RCTMGLMapViewManager {
         let view = viewRegistry![reactTag]
 
         guard let view = view! as? RCTMGLMapView else {
-          RCTLogError("Invalid react tag, could not find RCTMGLMapView");
+          RCTMGLLogError("Invalid react tag, could not find RCTMGLMapView");
           rejecter(name, "Unknown find reactTag: \(reactTag)", nil)
           return;
         }
@@ -47,7 +47,7 @@ extension RCTMGLMapViewManager {
     {
       withMapView(reactTag, name: name, rejecter: rejecter) { view in
         guard let mapboxMap = view.mapboxMap else {
-          RCTLogError("MapboxMap is not yet available");
+          RCTMGLLogError("MapboxMap is not yet available");
           rejecter(name, "Map not loaded yet", nil)
           return;
         }

package/ios/RCTMGL-v10/RCTMGLMarkerView.swift

@@ -1,152 +1,233 @@
 import MapboxMaps
+import UIKit
 
-class RCTMGLMarkerView : UIView, RCTMGLMapComponent {
+class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
+  // MARK: - Instance variables
+  
   static let key = "RCTMGLMarkerView"
+  let id: String = "marker-\(UUID().uuidString)"
   
-  var map: RCTMGLMapView? = nil
+  var map: RCTMGLMapView?
   
-  // MARK: - react view
-  var reactSubviews : [UIView] = []
-
-  @objc
-  override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
-    if subview is RCTMGLCallout {
-      Logger.log(level: .warn, message: "MarkerView doesn't supports callouts")
-    }
-    reactSubviews.insert(subview, at: atIndex)
-    if reactSubviews.count > 1 {
-      Logger.log(level: .error, message: "MarkerView supports max 1 subview")
+  var didAddToMap = false
+  
+  @objc var coordinate: String? {
+    didSet {
+      update()
     }
   }
-
-  @objc
-  override func removeReactSubview(_ subview: UIView!) {
-    reactSubviews.removeAll(where: { $0 == subview })
-  }
   
-  func view() -> UIView? {
-    return reactSubviews.first
+  @objc var anchor: [String: NSNumber]? {
+    didSet {
+      update()
+    }
   }
   
-  // MARK: - RCTMGLMapComponent
-
-  func waitForStyleLoad() -> Bool {
-    return true
+  @objc var allowOverlap: Bool = false {
+    didSet {
+      update()
+    }
   }
   
-  func addToMap(_ map: RCTMGLMapView, style: Style) {
-    logged("RCTMGLMarkerView.addToMap") {
-      self.map = map
-      let point = try point()
-
-      try point.coordinates.validate()
-
-      guard let view = view() else {
-        Logger.log(level: .error, message: "MarkerView: No subview to render")
-        return
+  @objc var isSelected: Bool = false {
+    didSet {
+      let hasBecomeSelected = isSelected && !oldValue
+      
+      if hasBecomeSelected {
+        setSelected()
+      } else {
+        update()
       }
-      let bounds = view.bounds
-      view.isHidden = true
-      try viewAnnotations()?.add(view, options: ViewAnnotationOptions.init(geometry: Geometry.point(point), width: bounds.width, height: bounds.height, associatedFeatureId: nil, allowOverlap: true, anchor: .center, offsetX: 0, offsetY: 0, selected: false))
     }
   }
+
+  // MARK: - Derived variables
   
-  func viewAnnotations() -> ViewAnnotationManager? {
+  var annotationManager: ViewAnnotationManager? {
     self.map?.viewAnnotations
   }
 
-  func removeFromMap(_ map: RCTMGLMapView) {
-    guard let view = view() else {
-      Logger.log(level: .error, message: "MarkerView: No subview to render")
-      return
+  var point: Point? {
+    guard let _coordinate = coordinate else {
+      Logger.log(level: .error, message: "[getPoint] No coordinates were set")
+      return nil
     }
-    viewAnnotations()?.remove(view)
+     
+    guard let _data = _coordinate.data(using: .utf8) else {
+      Logger.log(level: .error, message: "[getPoint] Cannot serialize coordinate")
+      return nil
+    }
+     
+    guard let _feature = try? JSONDecoder().decode(Feature.self, from: _data) else {
+      Logger.log(level: .error, message: "[getPoint] Cannot parse serialized coordinate")
+      return nil
+    }
+     
+    guard let _geometry = _feature.geometry else {
+      Logger.log(level: .error, message: "[getPoint] Invalid geometry")
+      return nil
+    }
+
+    guard case .point(let _point) = _geometry else {
+      Logger.log(level: .error, message: "[getPoint] Invalid point")
+      return nil
+    }
+
+    return _point
+  }
+
+  // MARK: - RCTMGLMapComponent methods
+
+  func addToMap(_ map: RCTMGLMapView, style: Style) {
     self.map = map
+    add()
   }
-  
-  override func reactSetFrame(_ frame: CGRect) {
-    super.reactSetFrame(frame)
 
-    _updateFrameOrAnchor()
+  func removeFromMap(_ map: RCTMGLMapView) {
+    remove()
   }
   
-  @objc var coordinate : String? {
-    didSet {
-      _updateCoordinate()
+  // MARK: - React methods
+  
+  override func reactSetFrame(_ frame: CGRect) {
+    let prev = self.frame
+    var next = frame
+    
+    let frameDidChange = !next.equalTo(prev)
+    if (frameDidChange) {
+      if prev.minX == 0 || prev.minY == 0 {
+        // Start the view offscreen to make it invisible until the annotation manager sets it to
+        // the correct point on the map.
+        next = CGRect(
+          x: -10000,
+          y: -10000,
+          width: next.width,
+          height: next.height
+        )
+      } else {
+        // Calculate the next position to temporarily place the view before the annotation manager
+        // sets it to the correct point on the map.
+        let dx = (next.width - prev.width) / 2
+        let dy = (next.height - prev.height) / 2
+        next = CGRect(
+          x: prev.minX - dx,
+          y: prev.minY - dy,
+          width: next.width,
+          height: next.height
+        )
+      }
     }
+    
+    super.reactSetFrame(next)
+    addOrUpdate()
   }
   
-  @objc var anchor : [String:NSNumber]? {
-    didSet {
-      _updateFrameOrAnchor()
-    }
+  override func insertReactSubview(_ subview: UIView, at atIndex: Int) {
+    super.insertReactSubview(subview, at: atIndex)
   }
   
-  func point() throws -> Point {
-    guard let coordinate = coordinate else {
-      throw RCTMGLError.failed("no coordinates were set")
-    }
-     
-    guard let data = coordinate.data(using: .utf8) else {
-      throw RCTMGLError.failed("cannot serialize coordiante")
-    }
-     
-    guard let feature = try? JSONDecoder().decode(Feature.self, from: data) else {
-      throw RCTMGLError.failed("cannot parse serialized coordiante")
-    }
-     
-    guard let geometry : Geometry = feature.geometry else {
-      throw RCTMGLError.failed("is not a geometry")
-    }
+  override func removeReactSubview(_ subview: UIView) {
+    super.removeReactSubview(subview)
+  }
+  
+  func waitForStyleLoad() -> Bool {
+    true
+  }
 
-    guard case .point(let point) = geometry else {
-      throw RCTMGLError.failed("is not a point")
-    }
+  // MARK: - Create, update, and remove methods
 
-    return point
-  }
+    private func addOrUpdate() {
+      if didAddToMap {
+        update()
+      } else {
+        add()
+      }
+    }
   
-  func _updateCoordinate() {
-    guard let view = view() else {
+  /// Because the necessary data to add an annotation arrives from different sources at unpredictable times, we let the arrival of each value trigger an attempt to add the annotation, which we only do if all of the data exists, and the annotation not been added already.
+  private func add() {
+    if didAddToMap {
       return
     }
     
-    logged("MarkerView.updateCoordinate") {
-      let point = try point()
+    guard let annotationManager = annotationManager, let _ = point else {
+      return
+    }
 
-      try viewAnnotations()?.update(view, options: ViewAnnotationOptions(geometry: Geometry.point(point)))
+    do {
+      let options = getOptions()
+      try annotationManager.add(self, id: id, options: options)
+      didAddToMap = true
+    } catch {
+      Logger.log(level: .error, message: "[MarkerView] Error adding annotation", error: error)
     }
   }
-  
-  func _updateFrameOrAnchor() {
-    guard let view = view() else {
+
+  private func update() {
+    if !didAddToMap {
       return
     }
-    var options = ViewAnnotationOptions()
-    let defaultX : CGFloat = 0.5
-    let defaultY : CGFloat = 0.5
-    let bounds = view.bounds
-    options.width = bounds.width
-    options.height = bounds.height
     
-    if let anchor = anchor {
-      if let anchorX = anchor["x"] {
-        options.offsetX = bounds.width * (CGFloat(anchorX.floatValue) - defaultX)
-      }
-      if let anchorY = anchor["y"] {
-        options.offsetY = bounds.height * (CGFloat(anchorY.floatValue) - defaultY)
-      }
-      if let view = view as? RCTMGLMarkerViewWrapper {
-        if let anchorX = anchor["x"] {
-          view.anchorX = CGFloat(anchorX.floatValue)
-        }
-        if let anchorY = anchor["y"] {
-          view.anchorY = CGFloat(anchorY.floatValue)
-        }
+    guard let annotationManager = annotationManager else {
+      return
+    }
+    
+    do {
+      let options = getOptions()
+      try annotationManager.update(self, options: options)
+    } catch {
+      Logger.log(level: .error, message: "[MarkerView] Error updating annotation", error: error)
+    }
+  }
+  
+  /// There is a Mapbox bug where `selected` does not cause the marker to move to the front, so we can't simply update the component.
+  /// This forces that effect. See https://github.com/mapbox/mapbox-maps-ios/issues/1599.
+  private func setSelected() {
+    if let options = annotationManager?.options(for: self) {
+      do {
+        annotationManager?.remove(self)
+        try annotationManager?.add(self, id: id, options: options)
+      } catch {
+        Logger.log(level: .error, message: "[MarkerView] Error selecting annotation", error: error)
       }
     }
-    logged("MarkerView.updateFrame") {
-      try viewAnnotations()?.update(view, options: options)
+  }
+  
+  private func remove() {
+    annotationManager?.remove(self)
+  }
+  
+  // MARK: - Helper functions
+  
+  private func getOptions() -> ViewAnnotationOptions {
+    var geometry: GeometryConvertible?
+    if let point = point {
+      geometry = Geometry.point(point)
     }
+    
+    let offset = getOffset()
+  
+    let options = ViewAnnotationOptions(
+      geometry: geometry,
+      width: self.bounds.width,
+      height: self.bounds.height,
+      allowOverlap: allowOverlap,
+      offsetX: offset.dx,
+      offsetY: offset.dy
+    )
+    return options
+  }
+  
+  private func getOffset() -> CGVector {
+    guard let anchor = anchor, let anchorX = anchor["x"]?.CGFloat, let anchorY = anchor["y"]?.CGFloat else {
+      return .zero
+    }
+          
+    // Create a modified offset, normalized from 0..1 to -1..1 and scaled to
+    // the view size.
+    let x = (anchorX * 2 - 1) * (self.bounds.width / 2) * -1
+    let y = (anchorY * 2 - 1) * (self.bounds.height / 2)
+
+    return CGVector(dx: x, dy: y)
   }
 }

package/ios/RCTMGL-v10/RCTMGLMarkerViewManager.m

@@ -6,6 +6,7 @@
 
 RCT_EXPORT_VIEW_PROPERTY(coordinate, NSString)
 RCT_EXPORT_VIEW_PROPERTY(anchor, NSDictionary)
+RCT_EXPORT_VIEW_PROPERTY(allowOverlap, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(isSelected, BOOL)
 
 @end
-