@maplibre/maplibre-react-native 8.6.0-beta.1 → 9.0.0

package/docs/snapshotManager.md

@@ -1,5 +1,5 @@
 <!-- This file was autogenerated from snapshotManager.js do not modify -->
-## <MapboxGL.snapshotManager />
+## <MapLibreGL.snapshotManager />
 ### The snapshotManager generates static raster images of the map.<br/>Each snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.<br/>The snapshotter generates the snapshot asynchronous.
 
 
@@ -17,35 +17,35 @@ Takes a snapshot of the base map using the provided Snapshot options. NOTE pitch
 
 ```javascript
 // creates a temp file png of base map
-const uri = await MapboxGL.snapshotManager.takeSnap({
+const uri = await MapLibreGL.snapshotManager.takeSnap({
   centerCoordinate: [-74.126410, 40.797968],
   width: width,
   height: height,
   zoomLevel: 12,
   pitch: 30,
   heading: 20,
-  styleURL: MapboxGL.StyleURL.Dark,
+  styleURL: MapLibreGL.StyleURL.Dark,
   writeToDisk: true, // Create a temporary file
 });
 
 // creates base64 png of base map without logo
-const uri = await MapboxGL.snapshotManager.takeSnap({
+const uri = await MapLibreGL.snapshotManager.takeSnap({
   centerCoordinate: [-74.126410, 40.797968],
   width: width,
   height: height,
   zoomLevel: 12,
   pitch: 30,
   heading: 20,
-  styleURL: MapboxGL.StyleURL.Dark,
+  styleURL: MapLibreGL.StyleURL.Dark,
   withLogo: false, // Disable Mapbox logo (Android only)
 });
 
 // creates snapshot with bounds
-const uri = await MapboxGL.snapshotManager.takeSnap({
+const uri = await MapLibreGL.snapshotManager.takeSnap({
   bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],
   width: width,
   height: height,
-  styleURL: MapboxGL.StyleURL.Dark,
+  styleURL: MapLibreGL.StyleURL.Dark,
 });
 ```
 

package/index.d.ts

@@ -88,7 +88,7 @@ type NamedStyles<T> = {
   | BackgroundLayerStyle;
 };
 
-export type MapboxGLEvent<
+export type MapLibreGLEvent<
   T extends string,
   P = GeoJSON.Feature,
   V = Element
@@ -106,7 +106,7 @@ export type OnPressEvent = {
   }
 };
 
-declare namespace MapboxGL {
+declare namespace MapLibreGL {
   function removeCustomHeader(headerName: string): void;
   function addCustomHeader(headerName: string, headerValue: string): void;
   function setAccessToken(accessToken: string | null): void;
@@ -416,6 +416,7 @@ declare namespace MapboxGL {
     Identity = 3,
   }
 
+  // TODO: Figure out if these are even supported anymore
   enum StyleURL {
     Street = 'mapbox://styles/mapbox/streets-v11',
     Dark = 'mapbox://styles/mapbox/dark-v10',
@@ -451,7 +452,7 @@ export interface RegionPayload {
 
 export interface MapViewProps extends ViewProps {
   animated?: boolean;
-  userTrackingMode?: MapboxGL.UserTrackingModes;
+  userTrackingMode?: MapLibreGL.UserTrackingModes;
   userLocationVerticalAlignment?: number;
   contentInset?: Array<number>;
   style?: StyleProp<ViewStyle>;
@@ -486,7 +487,7 @@ export interface MapViewProps extends ViewProps {
   onRegionDidChange?: (
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
   ) => void;
-  onUserLocationUpdate?: (feature: MapboxGL.Location) => void;
+  onUserLocationUpdate?: (feature: MapLibreGL.Location) => void;
   onWillStartLoadingMap?: () => void;
   onDidFinishLoadingMap?: () => void;
   onDidFailLoadingMap?: () => void;
@@ -516,7 +517,7 @@ export interface CameraProps extends CameraSettings, ViewProps {
   triggerKey?: any;
   alignment?: number[];
   onUserTrackingModeChange?: (
-    event: MapboxGLEvent<
+    event: MapLibreGLEvent<
       'usertrackingmodechange',
       {
         followUserLocation: boolean;
@@ -554,7 +555,7 @@ export interface UserLocationProps {
   children?: ReactNode;
   minDisplacement?: number;
   onPress?: () => void;
-  onUpdate?: (location: MapboxGL.Location) => void;
+  onUpdate?: (location: MapLibreGL.Location) => void;
   renderMode?: 'normal' | 'native';
   showsUserHeadingIndicator?: boolean,
   visible?: boolean;
@@ -950,4 +951,4 @@ export class Logger {
   public static setLogLevel: (level: LogLevel) => void;
 }
 
-export default MapboxGL;
+export default MapLibreGL;

package/ios/RCTMGL/RCTMGLStyle.h

@@ -25,6 +25,7 @@
 - (void)backgroundLayer:(MGLBackgroundStyleLayer *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
 - (void)lightLayer:(MGLLight *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
 
+- (void)setFillSortKey:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setFillStyleLayerVisibility:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setFillAntialias:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setFillOpacity:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
@@ -42,6 +43,7 @@
 - (void)setLineJoin:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setLineMiterLimit:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setLineRoundLimit:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
+- (void)setLineSortKey:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setLineStyleLayerVisibility:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setLineOpacity:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setLineOpacityTransition:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
@@ -131,6 +133,7 @@
 - (void)setTextTranslate:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setTextTranslateTransition:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setTextTranslateAnchor:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
+- (void)setCircleSortKey:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setCircleStyleLayerVisibility:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setCircleRadius:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
 - (void)setCircleRadiusTransition:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;

package/ios/RCTMGL/RCTMGLStyle.m

@@ -30,7 +30,9 @@
 
     RCTMGLStyleValue *styleValue = [RCTMGLStyleValue make:reactStyle[prop]];
 
-    if ([prop isEqualToString:@"visibility"]) {
+    if ([prop isEqualToString:@"fillSortKey"]) {
+      [self setFillSortKey:layer withReactStyleValue:styleValue];
+    } else if ([prop isEqualToString:@"visibility"]) {
       [self setFillStyleLayerVisibility:layer withReactStyleValue:styleValue];
     } else if ([prop isEqualToString:@"fillAntialias"]) {
       [self setFillAntialias:layer withReactStyleValue:styleValue];
@@ -100,6 +102,8 @@
       [self setLineMiterLimit:layer withReactStyleValue:styleValue];
     } else if ([prop isEqualToString:@"lineRoundLimit"]) {
       [self setLineRoundLimit:layer withReactStyleValue:styleValue];
+    } else if ([prop isEqualToString:@"lineSortKey"]) {
+      [self setLineSortKey:layer withReactStyleValue:styleValue];
     } else if ([prop isEqualToString:@"visibility"]) {
       [self setLineStyleLayerVisibility:layer withReactStyleValue:styleValue];
     } else if ([prop isEqualToString:@"lineOpacity"]) {
@@ -350,7 +354,9 @@
 
     RCTMGLStyleValue *styleValue = [RCTMGLStyleValue make:reactStyle[prop]];
 
-    if ([prop isEqualToString:@"visibility"]) {
+    if ([prop isEqualToString:@"circleSortKey"]) {
+      [self setCircleSortKey:layer withReactStyleValue:styleValue];
+    } else if ([prop isEqualToString:@"visibility"]) {
       [self setCircleStyleLayerVisibility:layer withReactStyleValue:styleValue];
     } else if ([prop isEqualToString:@"circleRadius"]) {
       [self setCircleRadius:layer withReactStyleValue:styleValue];
@@ -681,6 +687,11 @@
 
 
 
+- (void)setFillSortKey:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
+{
+    layer.fillSortKey = styleValue.mglStyleValue;
+}
+
 - (void)setFillStyleLayerVisibility:(MGLFillStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
 {
     layer.visible = [styleValue isVisible];
@@ -768,6 +779,11 @@
     layer.lineRoundLimit = styleValue.mglStyleValue;
 }
 
+- (void)setLineSortKey:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
+{
+    layer.lineSortKey = styleValue.mglStyleValue;
+}
+
 - (void)setLineStyleLayerVisibility:(MGLLineStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
 {
     layer.visible = [styleValue isVisible];
@@ -1217,6 +1233,11 @@
 
 
 
+- (void)setCircleSortKey:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
+{
+    layer.circleSortKey = styleValue.mglStyleValue;
+}
+
 - (void)setCircleStyleLayerVisibility:(MGLCircleStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
 {
     layer.visible = [styleValue isVisible];

package/ios/RCTMGL/index.d.ts

@@ -27,6 +27,11 @@ export interface TransitionProps {
 export type TranslationProps = { x: number; y: number } | number[];
 
 export interface fillLayerStyleProps {
+  /**
+   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
+   */
+  fillSortKey: Value<number, ["zoom", "feature"]>;
+
   /**
    * Whether this layer is displayed.
    */
@@ -120,6 +125,11 @@ export interface lineLayerStyleProps {
    */
   lineRoundLimit: Value<number, ["zoom"]>;
 
+  /**
+   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
+   */
+  lineSortKey: Value<number, ["zoom", "feature"]>;
+
   /**
    * Whether this layer is displayed.
    */
@@ -249,17 +259,17 @@ export interface symbolLayerStyleProps {
   symbolSpacing: Value<number, ["zoom"]>;
 
   /**
-   * If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like Mapbox GL JS version 0.42.0 or greater, enabling this property is not needed to prevent clipped labels at tile boundaries.
+   * If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like MapLibre GL JS version 0.42.0 or greater, enabling this property is not needed to prevent clipped labels at tile boundaries.
    */
   symbolAvoidEdges: Value<boolean, ["zoom"]>;
 
   /**
-   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key when they overlap. Features with a lower sort key will have priority over other features when doing placement.
+   * Sorts features in ascending order based on this value. Features with lower sort keys are drawn and placed first.  When `iconAllowOverlap` or `textAllowOverlap` is `false`, features with a lower sort key will have priority during placement. When `iconAllowOverlap` or `textAllowOverlap` is set to `true`, features with a higher sort key will overlap over features with a lower sort key.
    */
   symbolSortKey: Value<number, ["zoom", "feature"]>;
 
   /**
-   * Controls the order in which overlapping symbols in the same layer are rendered
+   * Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their yPosition relative to the viewport. To control the order and prioritization of symbols otherwise, use `symbolSortKey`.
    */
   symbolZOrder: Value<Enum<SymbolZOrderEnum, SymbolZOrderEnumValues>, ["zoom"]>;
 
@@ -267,6 +277,8 @@ export interface symbolLayerStyleProps {
    * If true, the icon will be visible even if it collides with other previously drawn symbols.
    *
    * @requires iconImage
+   *
+   * @disabledBy iconOverlap
    */
   iconAllowOverlap: Value<boolean, ["zoom"]>;
 
@@ -328,11 +340,11 @@ export interface symbolLayerStyleProps {
   iconRotate: Value<number, ["zoom", "feature"]>;
 
   /**
-   * Size of the additional area around the icon bounding box used for detecting symbol collisions.
+   * Size of additional area round the icon bounding box used for detecting symbol collisions. Values are declared using CSS margin shorthand syntax: a single value applies to all four sides; two values apply to [top/bottom, left/right]; three values apply to [top, left/right, bottom]; four values apply to [top, right, bottom, left]. For backwards compatibility, a single bare number is accepted, and treated the same as a oneElement array  padding applied to all sides.
    *
    * @requires iconImage
    */
-  iconPadding: Value<number, ["zoom"]>;
+  iconPadding: Value<number, ["zoom", "feature"]>;
 
   /**
    * If true, the icon may be flipped to prevent it from being rendered upsideDown.
@@ -528,6 +540,8 @@ export interface symbolLayerStyleProps {
    * If true, the text will be visible even if it collides with other previously drawn symbols.
    *
    * @requires textField
+   *
+   * @disabledBy textOverlap
    */
   textAllowOverlap: Value<boolean, ["zoom"]>;
 
@@ -710,6 +724,11 @@ export interface symbolLayerStyleProps {
 }
 
 export interface circleLayerStyleProps {
+  /**
+   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
+   */
+  circleSortKey: Value<number, ["zoom", "feature"]>;
+
   /**
    * Whether this layer is displayed.
    */

package/ios/install.md

@@ -7,12 +7,12 @@ Add the following to your `ios/Podfile`:
 
 ```ruby
   post_install do |installer|
-    $RNMBGL.post_install(installer)
     ... other post install hooks
+    $RNMBGL.post_install(installer)
   end
 ```
 
-Running `pod install` will add version `5.12.2` of the MapLibre SDK.
+Running `pod install` will add version `5.13.0` of the MapLibre SDK.
 
 ```sh
 # Go to the ios directory
@@ -24,9 +24,17 @@ pod install
 
 You are good to go!
 
+## Note on iOS Simulator issues
+
+MapLibre GL Native has some issues on iOS Simulators in many
+environments. The map either does not render at all or appears garbled when panning and zooming.
+It is best to test on a real device if at all possible at this time
+until this is fixed upstream. iOS devs can open the workspace in Xcode and run from there.
+
+
 ## Installing a specific version
 
-The current default MapLibre version is `5.12.2`.
+The current default MapLibre version is `5.13.0`.
 If you want to install a different version, you can override as follows in
 your `Podfile`:
 
@@ -35,7 +43,7 @@ $RNMBGL_Use_SPM = {
   url: "https://github.com/maplibre/maplibre-gl-native-distribution",
   requirement: {
     kind: "upToNextMajorVersion",
-    minimumVersion: "5.12.2"
+    minimumVersion: "5.13.0"
   },
   product_name: "Mapbox"
 }

package/javascript/components/BackgroundLayer.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
 
@@ -72,7 +72,7 @@ class BackgroundLayer extends AbstractLayer {
   };
 
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
   };
 
   render() {

package/javascript/components/Camera.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import {NativeModules, requireNativeComponent} from 'react-native';
 import React from 'react';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
 
@@ -155,7 +155,7 @@ class Camera extends React.Component {
     followUserLocation: PropTypes.bool,
 
     /**
-     * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapboxGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/SetUserTrackingModes.js)
+     * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapLibreGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/SetUserTrackingModes.js)
      */
     followUserMode: PropTypes.oneOf(['normal', 'compass', 'course']),
 
@@ -605,13 +605,13 @@ class Camera extends React.Component {
   _getNativeCameraMode(config) {
     switch (config.animationMode) {
       case Camera.Mode.Flight:
-        return MapboxGL.CameraModes.Flight;
+        return MapLibreGL.CameraModes.Flight;
       case Camera.Mode.Move:
-        return MapboxGL.CameraModes.None;
+        return MapLibreGL.CameraModes.None;
       case Camera.Mode.Linear:
-        return MapboxGL.CameraModes.Linear;
+        return MapLibreGL.CameraModes.Linear;
       default:
-        return MapboxGL.CameraModes.Ease;
+        return MapLibreGL.CameraModes.Ease;
     }
   }
 

package/javascript/components/CircleLayer.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
 
@@ -76,7 +76,7 @@ class CircleLayer extends AbstractLayer {
   };
 
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
   };
 
   render() {

package/javascript/components/FillExtrusionLayer.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
 
@@ -75,7 +75,7 @@ class FillExtrusionLayer extends AbstractLayer {
   };
 
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
   };
 
   render() {

package/javascript/components/FillLayer.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
 
@@ -75,7 +75,7 @@ class FillLayer extends AbstractLayer {
   };
 
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
   };
 
   render() {

package/javascript/components/HeatmapLayer.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
 
@@ -76,7 +76,7 @@ class HeatmapLayer extends AbstractLayer {
   };
 
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
   };
 
   render() {

package/javascript/components/LineLayer.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
 
@@ -75,7 +75,7 @@ class LineLayer extends AbstractLayer {
   };
 
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
   };
 
   render() {