@rnmapbox/maps 10.0.0-beta.76 → 10.0.0-beta.77

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/events/PointAnnotationDragEvent.java

@@ -43,9 +43,11 @@ public class PointAnnotationDragEvent extends MapClickEvent {
     @Override
     public WritableMap getPayload() {
         WritableMap properties = new WritableNativeMap();
-        properties.putString("id", mView.getID());
         properties.putDouble("screenPointX", mScreenPoint.x);
         properties.putDouble("screenPointY", mScreenPoint.y);
-        return GeoJSONUtils.toPointFeature(mTouchedLatLng, properties);
+        WritableMap feature = GeoJSONUtils.toPointFeature(mTouchedLatLng, properties);
+        feature.putString("id", mView.getID());
+        
+        return feature;
     }
 }

package/ios/RCTMGL-v10/RCTMGLCamera.swift

@@ -2,7 +2,7 @@ import Foundation
 import MapboxMaps
 import Turf
 
-protocol RCTMGLMapComponent : AnyObject {
+protocol RCTMGLMapComponent : class {
   func addToMap(_ map: RCTMGLMapView, style: Style)
   func removeFromMap(_ map: RCTMGLMapView)
   
@@ -104,7 +104,7 @@ open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
   }
 }
 
-class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
+class RCTMGLCamera : RCTMGLMapComponentBase {
   var cameraAnimator: BasicCameraAnimator?
   let cameraUpdateQueue = CameraUpdateQueue()
   
@@ -219,7 +219,6 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
   
   func _disableUsetTracking(_ map: MapView) {
     map.viewport.idle()
-    map.location.removeLocationConsumer(consumer: self)
   }
   
   func _toCoordinateBounds(_ bounds: FeatureCollection) throws -> CoordinateBounds  {
@@ -274,10 +273,17 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       }
 
       if let locationModule = RCTMGLLocationModule.shared {
-        map.location.overrideLocationProvider(with: locationModule.locationProvider)
+        var isSameProvider = false
+        if let currentProvider = map.location.locationProvider as? AnyObject, let newProvider = locationModule.locationProvider as? AnyObject {
+          if currentProvider === newProvider {
+            isSameProvider = true
+          }
+        }
+        if !isSameProvider {
+          map.location.overrideLocationProvider(with: locationModule.locationProvider)
+        }
       }
       map.location.locationProvider.requestWhenInUseAuthorization()
-      map.location.addLocationConsumer(newConsumer: self)
       var trackingModeChanged = false
       var followOptions = FollowPuckViewportStateOptions()
       switch userTrackingMode {
@@ -506,32 +512,6 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     map.viewport.removeStatusObserver(self)
     super.removeFromMap(map)
   }
-
-  // MARK: - LocationConsumer
-  
-  func locationUpdate(newLocation: Location) {
-    // viewport manages following user location
-    if false && followUserLocation {
-      withMapView { map in
-        var animationType = CameraMode.none
-        if let m = self.animationMode as? String, let m = CameraMode(rawValue: m) {
-          animationType = m
-        }
-        let _camera = CameraOptions(center: newLocation.coordinate)
-        let _duration = self.animationDuration as? Double ?? 0.5
-        switch (animationType) {
-          case .flight:
-            map.camera.fly(to: _camera, duration: _duration)
-          case .ease:
-            map.camera.ease(to: _camera, duration: _duration, curve: .easeInOut, completion: nil)
-          case .linear:
-            map.camera.ease(to: _camera, duration: _duration, curve: .linear, completion: nil)
-          default:
-            map.mapboxMap.setCamera(to: CameraOptions(center: newLocation.coordinate))
-        }
-      }
-    }
-  }
 }
 
 // MARK: - ViewportStatusObserver

package/ios/RCTMGL-v10/RCTMGLInteractiveElement.swift

@@ -16,7 +16,19 @@ class RCTMGLInteractiveElement : UIView, RCTMGLMapComponent {
     "height": NSNumber(value: hitboxDefault)
   ]
   
-  @objc var id: String! = nil
+  @objc var id: String! = nil {
+    willSet {
+      if id != nil && newValue != id {
+        Logger.log(level:.warn, message: "Changing id from: \(optional: id) to \(optional: newValue), changing of id is supported")
+        if let map = map { removeFromMap(map) }
+      }
+    }
+    didSet {
+      if oldValue != nil && oldValue != id {
+        if let map = map { addToMap(map, style: map.mapboxMap.style) }
+      }
+    }
+  }
   
   @objc var onDragStart: RCTBubblingEventBlock? = nil
   

package/ios/RCTMGL-v10/RCTMGLLayer.swift

@@ -1,6 +1,6 @@
 @_spi(Experimental) import MapboxMaps
 
-protocol RCTMGLSourceConsumer {
+protocol RCTMGLSourceConsumer : class {
   func addToMap(_ map: RCTMGLMapView, style: Style)
   func removeFromMap(_ map: RCTMGLMapView, style: Style)
 }
@@ -9,6 +9,8 @@ protocol RCTMGLSourceConsumer {
 class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
   weak var bridge : RCTBridge? = nil
 
+  var waitingForID: String? = nil
+
   @objc var sourceLayerID : String? = nil {
     didSet { self.optionsChanged() }
   }
@@ -31,7 +33,20 @@ class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
     didSet { optionsChanged() }
   }
   
-  @objc var id: String! = nil
+  @objc var id: String! = nil {
+    willSet {
+      if id != nil && newValue != id {
+        Logger.log(level:.warn, message: "Changing id from: \(optional: id) to \(optional: newValue), changing of id is supported")
+        if let style = style { self.removeFromMap(style) }
+      }
+    }
+    didSet {
+      if oldValue != nil && oldValue != id {
+        if let map = map, let style = style { self.addToMap(map, style: style) }
+      }
+    }
+  }
+
   @objc var sourceID: String? = nil {
     didSet { optionsChanged() }
   }
@@ -74,6 +89,13 @@ class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
   }
   
   @objc weak var map: RCTMGLMapView? = nil
+
+  deinit {
+    if let waitingForID = waitingForID {
+      Logger.log(level:.warn, message: "RCTMGLLayer.removeFromMap - unmetPositionDependency: layer: \(optional: id) was waiting for layer: \(optional: waitingForID) but it hasn't added to map")
+      self.waitingForID = nil
+    }
+  }
   
   var styleLayer: Layer? = nil
   
@@ -86,9 +108,9 @@ class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
   }
   
   func removeAndReaddLayer() {
-    if let style = style {
+    if let map = map, let style = style {
       self.removeFromMap(style)
-      self.insert(style, layerPosition: position())
+      self.addToMap(map, style:style)
     }
   }
    
@@ -248,7 +270,7 @@ class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
   }
   
   private func optionsChanged() {
-    if let style = self.style {
+    if let style = self.style, self.styleLayer != nil {
       self.setOptions(&self.styleLayer!)
       self.loggedApply(style: style)
     }
@@ -259,10 +281,14 @@ class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
   }
   
   private func removeFromMap(_ style: Style) {
+    if let waitingForID = waitingForID {
+      Logger.log(level:.warn, message: "RCTMGLLayer.removeFromMap - unmetPositionDependency: layer: \(optional: id) was waiting for layer: \(optional: waitingForID) but it hasn't added to map")
+    }
+
     do {
       try style.removeLayer(withId: self.id)
     } catch {
-      Logger.log(level: .error, message: "removing layer failed for layer \(optional: id): \(error.localizedDescription)")
+      Logger.log(level: .error, message: "RCTMGLLayer.removeFromMap: removing layer failed for layer \(optional: id): \(error.localizedDescription)")
     }
   }
   
@@ -279,8 +305,11 @@ class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
       idToWaitFor = nil
     }
     
+    
     if let idToWaitFor = idToWaitFor {
+      self.waitingForID = idToWaitFor
       map!.waitForLayerWithID(idToWaitFor) { _ in
+        self.waitingForID = nil
         self.attemptInsert(style, layerPosition: layerPosition, onInsert: onInsert)
       }
     } else {

package/ios/RCTMGL-v10/RCTMGLLocationModule.swift

@@ -61,6 +61,9 @@ class RCTMGLLocationManager : LocationProviderDelegate {
   var simulatedHeading: Double = 0.0
   var simulatedHeadingIncrement: Double = 1.0
 
+  var startUpdatingLocationCalled = false
+  var startUpdatingHeadingCalled = false
+
   init() {
     provider = AppleLocationProvider()
     provider.setDelegate(self)
@@ -87,9 +90,19 @@ class RCTMGLLocationManager : LocationProviderDelegate {
   }
   
   func stop() {
-    provider.stopUpdatingHeading()
-    provider.stopUpdatingLocation()
-    provider.setDelegate(EmptyLocationProviderDelegate())
+    if !startUpdatingHeadingCalled {
+      provider.stopUpdatingHeading()
+    }
+    if !startUpdatingLocationCalled {
+      provider.stopUpdatingLocation()
+    }
+    _clearProviderDelegateIfNotListening()
+  }
+
+  func _clearProviderDelegateIfNotListening() {
+    if !startUpdatingHeadingCalled && !startUpdatingLocationCalled {
+      provider.setDelegate(EmptyLocationProviderDelegate())
+    }
   }
   
   func _convertToMapboxLocation(_ location: CLLocation?, type: LocationUpdateType) -> RCTMGLLocation {
@@ -144,6 +157,8 @@ class RCTMGLLocationManager : LocationProviderDelegate {
   }
 }
 
+// MARK: LocationProvider
+
 extension RCTMGLLocationManager: LocationProvider {
   var locationProviderOptions: LocationOptions {
     get {
@@ -194,11 +209,15 @@ extension RCTMGLLocationManager: LocationProvider {
   }
   
   func startUpdatingLocation() {
+    startUpdatingLocationCalled = true
     provider.startUpdatingLocation()
   }
   
   func stopUpdatingLocation() {
     provider.stopUpdatingLocation()
+    startUpdatingLocationCalled = false
+
+    _clearProviderDelegateIfNotListening()
   }
   
   var headingOrientation: CLDeviceOrientation {
@@ -211,11 +230,15 @@ extension RCTMGLLocationManager: LocationProvider {
   }
   
   func startUpdatingHeading() {
+    startUpdatingHeadingCalled = true
     provider.startUpdatingHeading()
   }
   
   func stopUpdatingHeading() {
+    startUpdatingHeadingCalled = false
     provider.stopUpdatingHeading()
+
+    _clearProviderDelegateIfNotListening()
   }
   
   func dismissHeadingCalibrationDisplay() {
@@ -276,7 +299,7 @@ extension RCTMGLLocationManager {
 class RCTMGLLocationModule: RCTEventEmitter, RCTMGLLocationManagerDelegate {
 
   static weak var shared : RCTMGLLocationModule? = nil
-  
+
   var locationManager : RCTMGLLocationManager
   var hasListener = false
   

package/ios/RCTMGL-v10/RCTMGLMapView.swift

@@ -859,7 +859,8 @@ class PointAnnotationManager : AnnotationInteractionDelegate {
           if let pt = rctmglPointAnnotation.object {
             let position = pt.superview?.convert(pt.layer.position, to: nil)
             let location = pt.map?.mapboxMap.coordinate(for: position!)
-            var geojson = Feature(geometry: .point(Point(location!)));
+            var geojson = Feature(geometry: .point(Point(location!)))
+            geojson.identifier = .string(pt.id)
             geojson.properties = [
               "screenPointX": .number(Double(position!.x)),
               "screenPointY": .number(Double(position!.y))
@@ -947,7 +948,8 @@ class PointAnnotationManager : AnnotationInteractionDelegate {
         if let rctmglPointAnnotation = userInfo[RCTMGLPointAnnotation.key] as? WeakRef<RCTMGLPointAnnotation> {
           if let pt = rctmglPointAnnotation.object {
             let position = pt.superview?.convert(pt.layer.position, to: nil)
-            var geojson = Feature(geometry: .point(Point(targetPoint)));
+            var geojson = Feature(geometry: .point(Point(targetPoint)))
+            geojson.identifier = .string(pt.id)
             geojson.properties = [
               "screenPointX": .number(Double(position!.x)),
               "screenPointY": .number(Double(position!.y))

package/ios/RCTMGL-v10/RCTMGLSource.swift

@@ -3,6 +3,7 @@
 @objc
 class RCTMGLSource : RCTMGLInteractiveElement {
   var layers: [RCTMGLSourceConsumer] = []
+  var components: [RCTMGLMapComponent] = []
 
   var source : Source? = nil
 
@@ -29,16 +30,32 @@ class RCTMGLSource : RCTMGLInteractiveElement {
   // MARK: - UIView+React
 
   @objc override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
-    if let layer : RCTMGLSourceConsumer = subview as? RCTMGLSourceConsumer {
+    if let layer = subview as? RCTMGLSourceConsumer {
       if let map = map {
         layer.addToMap(map, style: map.mapboxMap.style)
       }
       layers.append(layer)
+    } else if let component = subview as? RCTMGLMapComponent {
+      if let map = map {
+        component.addToMap(map, style: map.mapboxMap.style)
+      }
+      components.append(component)
     }
     super.insertReactSubview(subview, at: atIndex)
   }
   
   @objc override func removeReactSubview(_ subview: UIView!) {
+    if let layer : RCTMGLSourceConsumer = subview as? RCTMGLSourceConsumer {
+      if let map = map {
+        layer.removeFromMap(map, style: map.mapboxMap.style)
+      }
+      layers.removeAll { $0 as AnyObject === layer }
+    } else if let component = subview as? RCTMGLMapComponent {
+      if let map = map {
+        component.removeFromMap(map)
+      }
+      layers.removeAll { $0 as AnyObject === component }
+    }
     super.removeReactSubview(subview)
   }
   
@@ -50,28 +67,29 @@ class RCTMGLSource : RCTMGLInteractiveElement {
   
   override func addToMap(_ map: RCTMGLMapView, style: Style) {
     self.map = map
-    
-    map.onMapStyleLoaded { mapboxMap in
-      if style.sourceExists(withId: self.id) {
-        self.source = try! style.source(withId: self.id)
-      } else {
-        let source = self.makeSource()
-        self.ownsSource = true
-        self.source = source
-        logged("SyleSource.addToMap", info: {"id: \(optional: self.id)"}) {
-          try style.addSource(source, id: self.id)
-        }
-      }
-           
-      for layer in self.layers {
-        layer.addToMap(map, style: map.mapboxMap.style)
+
+    if style.sourceExists(withId: self.id) {
+      self.source = try! style.source(withId: self.id)
+    } else {
+      let source = self.makeSource()
+      self.ownsSource = true
+      self.source = source
+      logged("SyleSource.addToMap", info: {"id: \(optional: self.id)"}) {
+        try style.addSource(source, id: self.id)
       }
     }
+
+    for layer in self.layers {
+      layer.addToMap(map, style: map.mapboxMap.style)
+    }
+    for component in self.components {
+      component.addToMap(map, style: map.mapboxMap.style)
+    }
   }
 
   override func removeFromMap(_ map: RCTMGLMapView) {
     self.map = nil
-    
+
     for layer in self.layers {
       layer.removeFromMap(map, style: map.mapboxMap.style)
     }

package/javascript/Mapbox.ts

@@ -12,7 +12,10 @@ export { default as Light } from './components/Light';
 export { default as PointAnnotation } from './components/PointAnnotation';
 export { default as Annotation } from './components/Annotation';
 export { default as Callout } from './components/Callout';
-export { default as UserLocation } from './components/UserLocation';
+export {
+  default as UserLocation,
+  UserLocationRenderMode,
+} from './components/UserLocation';
 export { default as VectorSource } from './components/VectorSource';
 export { ShapeSource } from './components/ShapeSource';
 export { default as RasterSource } from './components/RasterSource';

package/javascript/components/AbstractLayer.tsx

@@ -1,4 +1,3 @@
-/* eslint react/prop-types:0  */
 import React from 'react';
 import { NativeMethods, processColor } from 'react-native';
 
@@ -9,6 +8,7 @@ import type { BaseProps } from '../types/BaseProps';
 
 type PropsBase = BaseProps & {
   id: string;
+  existing?: boolean;
   sourceID?: string;
   minZoomLevel?: number;
   maxZoomLevel?: number;
@@ -27,6 +27,7 @@ class AbstractLayer<
     return {
       ...this.props,
       id: this.props.id,
+      existing: this.props.existing,
       sourceID: this.props.sourceID,
       reactStyle: this.getStyle(this.props.style),
       minZoomLevel: this.props.minZoomLevel,

package/javascript/components/BackgroundLayer.tsx

@@ -13,10 +13,15 @@ const MapboxGL = NativeModules.MGLModule;
 
 export type Props = {
   /**
-   * A string that uniquely identifies the source in the style to which it is added.
+   * A string that uniquely identifies the layer in the style to which it is added.
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * 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.

package/javascript/components/{Callout.js → Callout.tsx}

@@ -1,15 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import {
   View,
   Text,
   Animated,
   requireNativeComponent,
   StyleSheet,
+  ViewStyle,
+  ViewProps,
+  StyleProp,
 } from 'react-native';
 
-import { viewPropTypes } from '../utils';
-
 export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
 
 const styles = StyleSheet.create({
@@ -48,60 +48,68 @@ const styles = StyleSheet.create({
   },
 });
 
+type NativeProps = {
+  children: ReactNode;
+  style: StyleProp<ViewStyle>;
+};
+
+type Props = Omit<ViewProps, 'style'> & {
+  /**
+   * String that gets displayed in the default callout.
+   */
+  title: string;
+
+  /**
+   * Style property for the Animated.View wrapper, apply animations to this
+   */
+  style?: ViewStyle;
+
+  /**
+   * Style property for the native RCTMGLCallout container, set at your own risk.
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Style property for the content bubble.
+   */
+  contentStyle?: ViewStyle;
+
+  /**
+   * Style property for the triangle tip under the content.
+   */
+  tipStyle?: ViewStyle;
+
+  /**
+   * Style property for the title in the content bubble.
+   */
+  textStyle?: ViewStyle;
+};
+
 /**
  *  Callout that displays information about a selected annotation near the annotation.
  */
-class Callout extends React.PureComponent {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * String that gets displayed in the default callout.
-     */
-    title: PropTypes.string,
-
-    /**
-     * Style property for the Animated.View wrapper, apply animations to this
-     */
-    style: PropTypes.any,
-
-    /**
-     * Style property for the native RCTMGLCallout container, set at your own risk.
-     */
-    containerStyle: PropTypes.any,
-
-    /**
-     * Style property for the content bubble.
-     */
-    contentStyle: PropTypes.any,
-
-    /**
-     * Style property for the triangle tip under the content.
-     */
-    tipStyle: PropTypes.any,
-
-    /**
-     * Style property for the title in the content bubble.
-     */
-    textStyle: PropTypes.any,
-  };
-
+class Callout extends React.PureComponent<Props> {
   get _containerStyle() {
-    return [
+    const style = [
       {
         position: 'absolute',
         zIndex: 999,
         backgroundColor: 'transparent',
-      },
-      this.props.containerStyle,
+      } as ViewStyle,
     ];
+
+    if (this.props.containerStyle) {
+      style.push(this.props.containerStyle);
+    }
+
+    return style;
   }
 
   get _hasChildren() {
     return React.Children.count(this.props.children) > 0;
   }
 
-  _renderDefaultCallout() {
+  _renderDefaultCallout(): ReactNode {
     return (
       <Animated.View style={[styles.container, this.props.style]}>
         <View style={[styles.content, this.props.contentStyle]}>
@@ -114,7 +122,7 @@ class Callout extends React.PureComponent {
     );
   }
 
-  _renderCustomCallout() {
+  _renderCustomCallout(): ReactNode {
     return (
       <Animated.View {...this.props} style={this.props.style}>
         {this.props.children}
@@ -134,6 +142,6 @@ class Callout extends React.PureComponent {
   }
 }
 
-const RCTMGLCallout = requireNativeComponent(NATIVE_MODULE_NAME, Callout);
+const RCTMGLCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Callout;

package/javascript/components/CircleLayer.tsx

@@ -18,6 +18,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * 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.

package/javascript/components/FillExtrusionLayer.tsx

@@ -15,10 +15,15 @@ export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
 
 export type Props = {
   /**
-   * A string that uniquely identifies the source in the style to which it is added.
+   * A string that uniquely identifies the layer in the style to which it is added.
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * 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.

package/javascript/components/FillLayer.tsx

@@ -16,6 +16,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * 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.