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

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

@@ -645,7 +645,17 @@ extension RCTMGLMapView: GestureManagerDelegate {
   }
   
   func highestZIndex(sources: [RCTMGLInteractiveElement]) -> RCTMGLInteractiveElement? {
-    return sources.first
+    var layersToSource : [String:RCTMGLInteractiveElement] = [:]
+    
+    sources.forEach { source in
+      source.getLayerIDs().forEach { layerId in
+        if layersToSource[layerId] == nil {
+          layersToSource[layerId] = source
+        }
+      }
+    }
+    let orderedLayers = mapboxMap.style.allLayerIdentifiers
+    return orderedLayers.lazy.reversed().compactMap { layersToSource[$0.id] }.first ?? sources.first
   }
   
   @objc
@@ -849,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))
@@ -937,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/ios/RCTMGL-v10/RCTMGLUtils.swift

@@ -30,9 +30,15 @@ class RCTMGLUtils {
       if (forceUpdate || foundImage == nil) {
         let image = objects[imageName]
         if let image = image as? [String:Any] {
-          let hasScale = image["scale"] != nil
-          let scale = hasScale ? (image["scale"] as! NSNumber).doubleValue : 1.0
-          RCTMGLImageQueue.sharedInstance.addImage(objects[imageName], scale: scale, bridge:bridge) {
+          let scale = (image["scale"] as? NSNumber)?.floatValue ?? 1.0
+          let sdf = (image["sdf"] as? NSNumber)?.boolValue ?? false
+          let imageStretchX = image["stretchX"] as? [[NSNumber]]
+          let stretchX: [ImageStretches] = imageStretchX != nil ? RCTMGLImages.convert(stretch: imageStretchX!, scale: scale) : []
+          let imageStretchY = image["stretchY"] as? [[NSNumber]]
+          let stretchY: [ImageStretches] = imageStretchY != nil ? RCTMGLImages.convert(stretch: imageStretchY!, scale: scale) : []
+          let content: ImageContent? = RCTMGLImages.convert(content: image["content"] as? [NSNumber], scale: scale)
+          
+          RCTMGLImageQueue.sharedInstance.addImage(objects[imageName], scale: Double(scale), bridge:bridge) {
             (error,image) in
             if image == nil {
               RCTMGLLogWarn("Failed to fetch image: \(imageName) error:\(error)")
@@ -40,8 +46,11 @@ class RCTMGLUtils {
             else {
               DispatchQueue.main.async {
                 if let image = image {
-                  try! style.addImage(image, id: imageName, stretchX: [], stretchY: [])
-                  imageLoadedBlock()
+                  logged("RCTMGLUtils.fetchImage-\(imageName)") {
+                    print("width=\(image.size.width) height=\(image.size.height) scale=\(image.scale) scale2=\(scale)")
+                    try style.addImage(image, id: imageName, sdf:sdf, stretchX: stretchX, stretchY: stretchY, content: content)
+                    imageLoadedBlock()
+                  }
                 }
               }
             }

package/javascript/MGLModule.ts

@@ -0,0 +1,54 @@
+import { NativeModules } from 'react-native';
+
+interface MGLModule {
+  StyleURL: {
+    Street: URL;
+    Outdoors: URL;
+    Light: URL;
+    Dark: URL;
+    Satellite: URL;
+    SatelliteStreet: URL;
+  };
+  OfflinePackDownloadState: {
+    Inactive: string | number;
+    Active: string | number;
+    Complete: string | number;
+    Unknown?: string | number;
+  };
+  LineJoin: {
+    Bevel: string | number;
+    Round: string | number;
+    Miter: string | number;
+  };
+  StyleSource: {
+    DefaultSourceID: string;
+  };
+  TileServers: {
+    Mapbox: string;
+  };
+
+  removeCustomHeader(headerName: string): void;
+  addCustomHeader(headerName: string, headerValue: string): void;
+  setAccessToken(accessToken: string | null): Promise<string | null>;
+  setWellKnownTileServer(tileServer: string): void;
+  getAccessToken(): Promise<string>;
+  setTelemetryEnabled(telemetryEnabled: boolean): void;
+  setConnected(connected: boolean): void;
+}
+
+const MGLModule: MGLModule = { ...NativeModules.MGLModule };
+
+export const {
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  TileServers,
+  removeCustomHeader,
+  addCustomHeader,
+  setAccessToken,
+  setWellKnownTileServer,
+  getAccessToken,
+  setTelemetryEnabled,
+  setConnected,
+} = MGLModule;

package/javascript/Mapbox.ts

@@ -0,0 +1,100 @@
+export * from './MGLModule';
+export {
+  Camera,
+  UserTrackingMode,
+  type CameraPadding,
+  type CameraAnimationMode,
+  type CameraBounds,
+} from './components/Camera';
+export { Atmosphere } from './components/Atmosphere';
+export { default as MapView, type MapState } from './components/MapView';
+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,
+  UserLocationRenderMode,
+} from './components/UserLocation';
+export { default as VectorSource } from './components/VectorSource';
+export { ShapeSource } from './components/ShapeSource';
+export { default as RasterSource } from './components/RasterSource';
+export { default as RasterDemSource } from './components/RasterDemSource';
+export { default as ImageSource } from './components/ImageSource';
+export { default as Images, type ImageEntry } from './components/Images';
+export { default as Image } from './components/Image';
+export { default as FillLayer } from './components/FillLayer';
+export { default as FillExtrusionLayer } from './components/FillExtrusionLayer';
+export { default as HeatmapLayer } from './components/HeatmapLayer';
+export { default as LineLayer } from './components/LineLayer';
+export { default as CircleLayer } from './components/CircleLayer';
+export { default as SkyLayer } from './components/SkyLayer';
+export { SymbolLayer } from './components/SymbolLayer';
+export { default as RasterLayer } from './components/RasterLayer';
+export { default as BackgroundLayer } from './components/BackgroundLayer';
+export { Terrain } from './components/Terrain';
+export {
+  default as locationManager,
+  type Location,
+} from './modules/location/locationManager';
+export {
+  default as offlineManager,
+  OfflineCreatePackOptions,
+} from './modules/offline/offlineManager';
+export {
+  default as snapshotManager,
+  type SnapshotOptions,
+} from './modules/snapshot/snapshotManager';
+export { default as MarkerView } from './components/MarkerView';
+export { default as Animated } from './utils/animated/Animated';
+export {
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedPoint,
+  AnimatedRouteCoordinatesArray,
+  AnimatedShape,
+} from './classes';
+export { default as Style } from './components/Style';
+export { default as Logger, type LogLevel } from './utils/Logger';
+export { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions';
+export { getAnnotationsLayerID } from './utils/getAnnotationsLayerID';
+export type {
+  FillLayerStyleProps as FillLayerStyle,
+  LineLayerStyleProps as LineLayerStyle,
+  SymbolLayerStyleProps as SymbolLayerStyle,
+  CircleLayerStyleProps as CircleLayerStyle,
+  HeatmapLayerStyleProps as HeatmapLayerStyle,
+  FillExtrusionLayerStyleProps as FillExtrusionLayerStyle,
+  RasterLayerStyleProps as RasterLayerStyle,
+  HillshadeLayerStyleProps as HillshadeLayerStyle,
+  BackgroundLayerStyleProps as BackgroundLayerStyle,
+  SkyLayerStyleProps as SkyLayerStyle,
+  LightLayerStyleProps as LightLayerStyle,
+  AtmosphereLayerStyleProps as AtmosphereLayerStyle,
+  TerrainLayerStyleProps as TerrainLayerStyle,
+} from './utils/MapboxStyles';
+
+import { deprecatedClass } from './utils/deprecation';
+import { AnimatedPoint } from './classes';
+import { UserTrackingMode } from './components/Camera';
+
+/** @deprecated This will be removed in a future release. Use `AnimatedPoint` instead. */
+export const AnimatedMapPoint = deprecatedClass(
+  AnimatedPoint,
+  'AnimatedMapPoint is deprecated please use AnimatedPoint',
+);
+
+// types:
+export enum StyleURL {
+  Street = 'mapbox://styles/mapbox/streets-v11',
+  Dark = 'mapbox://styles/mapbox/dark-v10',
+  Light = 'mapbox://styles/mapbox/light-v10',
+  Outdoors = 'mapbox://styles/mapbox/outdoors-v11',
+  Satellite = 'mapbox://styles/mapbox/satellite-v9',
+  SatelliteStreet = 'mapbox://styles/mapbox/satellite-streets-v11',
+  TrafficDay = 'mapbox://styles/mapbox/navigation-preview-day-v4',
+  TrafficNight = 'mapbox://styles/mapbox/navigation-preview-night-v4',
+}
+
+/** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
+export const UserTrackingModes = UserTrackingMode;

package/javascript/classes/index.d.ts

@@ -1,5 +1,24 @@
+import { Point } from 'geojson';
+import { Animated } from 'react-native';
+
+import WithAnimatedObject = Animated.WithAnimatedObject;
+
 export class AnimatedCoordinatesArray {}
 export class AnimatedExtractCoordinateFromArray {}
-export class AnimatedPoint {}
+export class AnimatedPoint implements WithAnimatedObject<Point> {
+  constructor(point: Point);
+
+  timing({
+    coordinates,
+    easing,
+    duration,
+  }: {
+    coordinates: number[];
+    easing?: (x: number) => number;
+    duration?: number;
+  });
+
+  stopAnimation();
+}
 export class AnimatedRouteCoordinatesArray {}
 export class AnimatedShape {}

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/Annotation.tsx

@@ -0,0 +1,141 @@
+import React, { ReactElement } from 'react';
+import { Animated as RNAnimated, Easing } from 'react-native';
+import { Point } from 'geojson';
+
+import Animated from '../utils/animated/Animated';
+import { AnimatedPoint } from '../classes';
+import { OnPressEvent } from '../types/OnPressEvent';
+import { SymbolLayerStyle } from '../Mapbox';
+
+import { SymbolLayer } from './SymbolLayer';
+
+type Props = {
+  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: Point | AnimatedPoint | null;
+};
+
+class Annotation extends React.Component<Props, AnnotationState> {
+  static defaultProps = {
+    animated: false,
+    animationDuration: 1000,
+    animationEasingFunction: Easing.linear,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    const shape = this._getShapeFromProps(props);
+
+    this.state = {
+      shape: props.animated ? new AnimatedPoint(shape) : shape,
+    };
+
+    this.onPress = this.onPress.bind(this);
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (!Array.isArray(this.props.coordinates)) {
+      this.setState({ shape: null });
+      return;
+    }
+
+    const haveCoordinatesChanged =
+      prevProps.coordinates[0] !== this.props.coordinates[0] ||
+      prevProps.coordinates[1] !== this.props.coordinates[1];
+
+    if (
+      prevProps.animated !== this.props.animated ||
+      (haveCoordinatesChanged && (!this.state.shape || !this.props.animated))
+    ) {
+      const shape = this._getShapeFromProps(this.props);
+
+      this.setState({
+        shape: this.props.animated ? new AnimatedPoint(shape) : shape,
+      });
+    } else if (
+      haveCoordinatesChanged &&
+      this.props.animated &&
+      this.state.shape
+    ) {
+      // flush current animations
+      (this.state.shape as AnimatedPoint).stopAnimation();
+
+      (this.state.shape as AnimatedPoint)
+        .timing({
+          coordinates: this.props.coordinates,
+          easing: this.props.animationEasingFunction,
+          duration: this.props.animationDuration,
+        })
+        .start();
+    }
+  }
+
+  onPress(event: OnPressEvent) {
+    if (this.props.onPress) {
+      this.props.onPress(event);
+    }
+  }
+
+  _getShapeFromProps(props: Partial<Props> = {}): Point {
+    const lng = props.coordinates?.[0] || 0;
+    const lat = props.coordinates?.[1] || 0;
+    return { type: 'Point', coordinates: [lng, lat] };
+  }
+
+  get symbolStyle(): SymbolLayerStyle | undefined {
+    if (!this.props.icon) {
+      return undefined;
+    }
+    return Object.assign({}, this.props.style, {
+      iconImage: this.props.icon,
+    });
+  }
+
+  render() {
+    if (!this.props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+
+    if (this.symbolStyle) {
+      children.push(
+        <SymbolLayer
+          id={`${this.props.id}-symbol`}
+          style={this.symbolStyle as SymbolLayerStyle}
+        />,
+      );
+    }
+
+    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<Point>}
+      >
+        {children}
+      </Animated.ShapeSource>
+    );
+  }
+}
+
+export default Annotation;

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.