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

package/index.d.ts

@@ -43,6 +43,10 @@ import {
   SymbolLayer as _SymbolLayer,
   Props as _SymbolLayerProps,
 } from './javascript/components/SymbolLayer';
+import {
+  ShapeSource as _ShapeSource,
+  Props as _ShapeSourceProps,
+} from './javascript/components/ShapeSource';
 import type {
   MapboxGLEvent as _MapboxGLEvent,
   AnimatedPoint as _AnimatedPoint,
@@ -148,6 +152,8 @@ declare namespace MapboxGL {
   const MarkerView = _MarkerView;
   const PointAnnotation = _PointAnnotation;
   const SymbolLayer = _SymbolLayer;
+  const ShapeSource = _ShapeSource;
+  type ShapeSource = _ShapeSource;
 
   type MapboxGLEvent = _MapboxGLEvent;
   type UserTrackingMode = _UserTrackingMode;
@@ -244,7 +250,7 @@ declare namespace MapboxGL {
 
   namespace Animated {
     // sources
-    class ShapeSource extends Component<ShapeSourceProps> {}
+    class ShapeSource extends Component<_ShapeSourceProps> {}
     class ImageSource extends Component<ImageSourceProps> {}
 
     // layers
@@ -364,33 +370,6 @@ declare namespace MapboxGL {
    * Sources
    */
   class VectorSource extends Component<VectorSourceProps> {}
-  class ShapeSource extends Component<ShapeSourceProps> {
-    features(
-      filter?: Expression,
-    ): Promise<FeatureCollection<Geometry, Properties>>;
-
-    getClusterExpansionZoom(
-      feature: Feature<Geometry, Properties> | number,
-    ): Promise<number>;
-    /**
-     * Returns all the leaves of a cluster with pagination support.
-     * @param cluster feature cluster
-     * @param limit the number of leaves to return
-     * @param offset the amount of points to skip (for pagination)
-     */
-    getClusterLeaves: (
-      feature: Feature<Geometry, Properties> | number,
-      limit: number,
-      offset: number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-    /**
-     * Returns the children of a cluster (on the next zoom level).
-     * @param cluster feature cluster
-     */
-    getClusterChildren: (
-      feature: Feature<Geometry, Properties> | number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-  }
   class RasterSource extends Component<RasterSourceProps> {}
   class RasterDemSource extends Component<RasterSourceProps> {}
 
@@ -810,30 +789,6 @@ export interface VectorSourceProps extends TileSourceProps {
   };
 }
 
-export interface ShapeSourceProps extends ViewProps {
-  id: string;
-  url?: string;
-  shape?:
-    | GeoJSON.GeometryCollection
-    | GeoJSON.Feature
-    | GeoJSON.FeatureCollection
-    | GeoJSON.Geometry;
-  cluster?: boolean;
-  clusterRadius?: number;
-  clusterMaxZoomLevel?: number;
-  clusterProperties?: object;
-  maxZoomLevel?: number;
-  buffer?: number;
-  tolerance?: number;
-  lineMetrics?: boolean;
-  images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
 export interface RasterSourceProps extends TileSourceProps {
   tileSize?: number;
 }
@@ -875,10 +830,6 @@ export interface RasterLayerProps extends LayerBaseProps {
   style?: StyleProp<RasterLayerStyle>;
 }
 
-export interface SymbolLayerProps extends LayerBaseProps {
-  style?: SymbolLayerStyleProps;
-}
-
 export interface HeatmapLayerProps extends LayerBaseProps {
   style?: StyleProp<HeatmapLayerStyle>;
 }

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/RCTMGLCamera.swift

@@ -14,7 +14,7 @@ enum CameraMode: String, CaseIterable {
 }
 
 enum UserTrackingMode: String {
-  case none,compass, course, normal
+  case none, compass, course, normal
 }
 
 struct CameraUpdateItem {
@@ -188,7 +188,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
 
   func _updateCameraFromTrackingMode() {
     withMapView { map in
-      let userTrackingMode = UserTrackingMode(rawValue: self.followUserMode ?? "none")
+      let userTrackingMode = UserTrackingMode(rawValue: self.followUserMode ?? UserTrackingMode.normal.rawValue)
       guard let userTrackingMode = userTrackingMode else {
         Logger.error("RCTMGLCamera: Unexpected followUserMode \(optional: self.followUserMode)")
         self._disableUsetTracking(map)

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
-

package/ios/RCTMGL-v10/RCTMGLShapeSourceManager.swift

@@ -23,7 +23,7 @@ extension RCTMGLShapeSourceManager {
       let view = viewRegistry![reactTag]
 
       guard let shapeSource = view! as? RCTMGLShapeSource else {
-        RCTLogError("Invalid react tag, could not find RCTMGLShapeSource");
+        RCTMGLLogError("Invalid react tag, could not find RCTMGLShapeSource");
         rejecter(name, "Unknown find reactTag: \(reactTag)", nil)
         return;
       }

package/ios/RCTMGL-v10/RCTMGLUtils.swift

@@ -35,7 +35,7 @@ class RCTMGLUtils {
           RCTMGLImageQueue.sharedInstance.addImage(objects[imageName], scale: scale, bridge:bridge) {
             (error,image) in
             if image == nil {
-              RCTLogWarn("Failed to fetch image: \(imageName) error:\(error)")
+              RCTMGLLogWarn("Failed to fetch image: \(imageName) error:\(error)")
             }
             else {
               DispatchQueue.main.async {

package/ios/RCTMGL-v10/RCTMGLVectorLayer.swift

@@ -15,7 +15,7 @@ class RCTMGLVectorLayer: RCTMGLLayer {
         ((MGLVectorStyleLayer *) self.styleLayer).predicate = predicate;
     }
     @catch (NSException* exception) {
-        RCTLogError(@"Invalid predicate: %@ on layer %@ - %@ reason: %@", predicate, self, exception.name, exception.reason);
+        RCTMGLLogError(@"Invalid predicate: %@ on layer %@ - %@ reason: %@", predicate, self, exception.name, exception.reason);
     }
 }
 

package/ios/install.md

@@ -56,10 +56,11 @@ Add the following to the beginning of your podfile
 $RNMapboxMapsImpl = 'mapbox'
 ```
 
-You can also specify the version to use. *Warning:* if you set a version, then later update, the `rnamapbox/maps` library it's possible that you'll end up using Mapbox older version than supported. Make sure you revise this value with `rnmapbox/maps` updates.
+You can also override the version to use. *Warning:* if you set a version, then later update, the `rnamapbox/maps` library it's possible that you'll end up using Mapbox older version than supported. Make sure you revise this value with `rnmapbox/maps` updates.
 
 ```ruby
-$RNMapboxMapsVersion = '~> 10.9.0'
+# Warning: only for advanced use cases, only do this if you know what you're doing.
+# $RNMapboxMapsVersion = '~> 10.9.0'
 ```
 
 You will need to authorize your download of the Maps SDK with a secret access token with the `DOWNLOADS:READ` scope. This [guide](https://docs.mapbox.com/ios/maps/guides/install/#configure-credentials) explains how to configure the secret token under section `Configure your secret token`.

package/javascript/components/AbstractLayer.tsx

@@ -4,7 +4,7 @@ import { NativeMethods, processColor } from 'react-native';
 
 import { getFilter } from '../utils/filterUtils';
 import { transformStyle } from '../utils/StyleValue';
-import { AllLayerStyleProps } from '../utils/MapboxStyles';
+import { AllLayerStyleProps, Expression } from '../utils/MapboxStyles';
 
 type PropsBase = {
   id: string;
@@ -14,7 +14,7 @@ type PropsBase = {
   aboveLayerID?: string;
   belowLayerID?: string;
   layerIndex?: number;
-  filter?: string[];
+  filter?: Expression;
   style: AllLayerStyleProps;
 };
 
@@ -42,11 +42,11 @@ class AbstractLayer<
     | (React.Component<NativePropsType> & Readonly<NativeMethods>)
     | undefined = undefined;
 
-  setNativeLayer(
+  setNativeLayer = (
     instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
-  ) {
+  ) => {
     this.nativeLayer = instance;
-  }
+  };
 
   getStyleTypeFormatter(styleType: string) {
     if (styleType === 'color') {
@@ -62,7 +62,10 @@ class AbstractLayer<
     if (this.nativeLayer) {
       let propsToPass = props;
       if (props.style) {
-        propsToPass = { ...props, reactStyle: this.getStyle(props.style) };
+        propsToPass = {
+          ...props,
+          reactStyle: this.getStyle(props.style as AllLayerStyleProps),
+        };
       }
       this.nativeLayer?.setNativeProps(propsToPass);
     }

package/javascript/components/AbstractSource.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NativeMethods } from 'react-native';
+
+class AbstractSource<
+  PropsType,
+  NativePropsType extends object,
+> extends React.PureComponent<PropsType> {
+  _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
+
+  setNativeProps(props: NativePropsType) {
+    if (this._nativeRef) {
+      this._nativeRef.setNativeProps(props);
+    }
+  }
+
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void = (instance) => {
+    this._nativeRef = instance;
+  };
+}
+
+export default AbstractSource;

package/javascript/components/HeadingIndicator.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import headingIcon from '../../assets/heading.png';
 
-import SymbolLayer from './SymbolLayer';
+import { SymbolLayer } from './SymbolLayer';
 
 const style = {
   iconImage: headingIcon,

package/javascript/components/Images.js

@@ -4,7 +4,7 @@ import { requireNativeComponent, Image } from 'react-native';
 
 import { viewPropTypes } from '../utils';
 
-import ShapeSource from './ShapeSource';
+import { ShapeSource } from './ShapeSource';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLImages';
 

package/javascript/components/MapView.js

@@ -42,7 +42,10 @@ const defaultStyleURL = MapboxGL.StyleURL.Street;
 /**
  * MapView backed by Mapbox Native GL
  */
-class MapView extends NativeBridgeComponent(React.Component) {
+class MapView extends NativeBridgeComponent(
+  React.Component,
+  NATIVE_MODULE_NAME,
+) {
   static propTypes = {
     ...viewPropTypes,
 
@@ -306,7 +309,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
   };
 
   constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
 
     this.logger = Logger.sharedInstance();
     this.logger.start();