@maplibre/maplibre-react-native 9.0.0 → 9.1.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@ Please add unreleased changes in the following style:
 PR Title ([#123](link to my pr))
 ```
 
+## 9.1.0
+
+Update react to 18.2.0 and react-native to 0.72.1. ([#49](https://github.com/maplibre/maplibre-react-native/pull/49))
+fix(markerview): make PointAnnotationProps component extend ViewProps ([#41](https://github.com/maplibre/maplibre-react-native/issues/41))
+Fix build issue on iOS ([#29](https://github.com/maplibre/maplibre-react-native/issues/29))
+Add clusterProperties to ShapeSource ([#46](https://github.com/maplibre/maplibre-react-native/pull/46))
+
 ## 9.0.0
 
 Completed fork from RNMapbox, removed support for the proprietary Mapbox SDK, and updated to the latest

package/android/build.gradle

@@ -2,7 +2,7 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "28.0.3"
+        buildToolsVersion = "33.0.0"
         minSdkVersion = 16
         compileSdkVersion = 33
         targetSdkVersion = 33
@@ -13,7 +13,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.5.2'
+        classpath 'com.android.tools.build:gradle'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

package/android/rctmgl/build.gradle

@@ -29,10 +29,8 @@ android {
 }
 
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
-
-    // React Native
-    implementation "com.facebook.react:react-native:+"
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
 
     // MapLibre SDK
     implementation "org.maplibre.gl:android-sdk:9.6.0"

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSource.java

@@ -22,6 +22,7 @@ import com.mapbox.rctmgl.R;
 import com.mapbox.rctmgl.components.mapview.RCTMGLMapView;
 import com.mapbox.rctmgl.events.AndroidCallbackEvent;
 import com.mapbox.rctmgl.events.FeatureClickEvent;
+import com.mapbox.rctmgl.utils.ClusterPropertyEntry;
 import com.mapbox.rctmgl.utils.DownloadMapImageTask;
 import com.mapbox.rctmgl.utils.ImageEntry;
 
@@ -44,6 +45,7 @@ public class RCTMGLShapeSource extends RCTSource<GeoJsonSource> {
     private Boolean mCluster;
     private Integer mClusterRadius;
     private Integer mClusterMaxZoom;
+    private List<Map.Entry<String, ClusterPropertyEntry>> mClusterProperties;
 
     private Integer mMaxZoom;
     private Integer mBuffer;
@@ -110,6 +112,10 @@ public class RCTMGLShapeSource extends RCTSource<GeoJsonSource> {
         mClusterMaxZoom = clusterMaxZoom;
     }
 
+    public void setClusterProperties(List<Map.Entry<String, ClusterPropertyEntry>> clusterProperties) {
+        mClusterProperties = clusterProperties;
+    }
+
     public void setMaxZoom(int maxZoom) {
         mMaxZoom = maxZoom;
     }
@@ -145,6 +151,14 @@ public class RCTMGLShapeSource extends RCTSource<GeoJsonSource> {
             options.withClusterMaxZoom(mClusterMaxZoom);
         }
 
+        if (mClusterProperties != null) {
+            for (Map.Entry<String, ClusterPropertyEntry> entry : mClusterProperties) {
+                ClusterPropertyEntry property = entry.getValue();
+
+                options.withClusterProperty(entry.getKey(), property.operator, property.mapping);
+            }
+        }
+
         if (mMaxZoom != null) {
             options.withMaxZoom(mMaxZoom);
         }

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSourceManager.java

@@ -18,11 +18,13 @@ import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.annotations.ReactProp;
+import com.mapbox.mapboxsdk.style.expressions.Expression;
 import com.mapbox.rctmgl.components.AbstractEventEmitter;
 import com.mapbox.rctmgl.components.annotation.RCTMGLCallout;
 import com.mapbox.rctmgl.components.mapview.RCTMGLMapView;
 import com.mapbox.rctmgl.components.styles.layers.RCTLayer;
 import com.mapbox.rctmgl.events.constants.EventKeys;
+import com.mapbox.rctmgl.utils.ClusterPropertyEntry;
 import com.mapbox.rctmgl.utils.ExpressionParser;
 import com.mapbox.rctmgl.utils.ImageEntry;
 import com.mapbox.rctmgl.utils.ResourceUtils;
@@ -113,6 +115,30 @@ public class RCTMGLShapeSourceManager extends AbstractEventEmitter<RCTMGLShapeSo
         source.setClusterMaxZoom(clusterMaxZoom);
     }
 
+    @ReactProp(name = "clusterProperties")
+    public void setClusterProperties(RCTMGLShapeSource source, ReadableMap map) {
+        List<Map.Entry<String, ClusterPropertyEntry>> properties = new ArrayList<>();
+
+        ReadableMapKeySetIterator iterator = map.keySetIterator();
+        while (iterator.hasNextKey()) {
+            String name = iterator.nextKey();
+            ReadableArray expressions = map.getArray(name);
+
+            Expression operator;
+            if (expressions.getType(0) == ReadableType.Array) {
+                operator = ExpressionParser.from(expressions.getArray(0));
+            } else {
+                operator = Expression.literal(expressions.getString(0));
+            }
+
+            Expression mapping = ExpressionParser.from(expressions.getArray(1));
+
+            properties.add(new AbstractMap.SimpleEntry<>(name, new ClusterPropertyEntry(operator, mapping)));
+        }
+
+        source.setClusterProperties(properties);
+    }
+
     @ReactProp(name = "maxZoomLevel")
     public void setMaxZoomLevel(RCTMGLShapeSource source, int maxZoom) {
         source.setMaxZoom(maxZoom);

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/ClusterPropertyEntry.java

@@ -0,0 +1,13 @@
+package com.mapbox.rctmgl.utils;
+
+import com.mapbox.mapboxsdk.style.expressions.Expression;
+
+public class ClusterPropertyEntry {
+    public Expression operator;
+    public Expression mapping;
+
+    public ClusterPropertyEntry(Expression _operator, Expression _mapping) {
+        operator = _operator;
+        mapping = _mapping;
+    }
+}

package/docs/Camera.md

@@ -49,7 +49,7 @@
 |   ne | `array` | `none` | `true` | northEastCoordinates - North east coordinate of bound |
 |   sw | `array` | `none` | `true` | southWestCoordinates - South west coordinate of bound |
 | followUserLocation | `bool` | `none` | `false` | Should the map orientation follow the user's. |
-| followUserMode | `enum` | `none` | `false` | 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 | `enum` | `none` | `false` | 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/Camera/SetUserTrackingModes.js) |
 | followZoomLevel | `number` | `none` | `false` | The zoomLevel on map while followUserLocation is set to `true` |
 | followPitch | `number` | `none` | `false` | The pitch on map while followUserLocation is set to `true` |
 | followHeading | `number` | `none` | `false` | The heading on map while followUserLocation is set to `true` |

package/docs/ShapeSource.md

@@ -11,6 +11,7 @@
 | cluster | `bool` | `none` | `false` | Enables clustering on the source for point shapes. |
 | clusterRadius | `number` | `none` | `false` | Specifies the radius of each cluster if clustering is enabled.<br/>A value of 512 produces a radius equal to the width of a tile.<br/>The default value is 50. |
 | clusterMaxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to cluster points if clustering is enabled.<br/>Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,<br/>the shapes are not clustered. |
+| clusterProperties | `object` | `none` | `false` | Specifies custom properties on the generated clusters if clustering<br/>is enabled, aggregating values from clustered points.<br/><br/>Has the form `{ "property_name": [operator, map_expression]}`, where<br/> `operator` is a custom reduce expression that references a special `["accumulated"]` value -<br/>  it accumulates the property value from clusters/points the cluster contains<br/> `map_expression` produces the value of a single point<br/><br/>Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }` |
 | maxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to create vector tiles.<br/>A greater value produces greater detail at high zoom levels.<br/>The default value is 18. |
 | buffer | `number` | `none` | `false` | Specifies the size of the tile buffer on each side.<br/>A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.<br/>Larger values produce fewer rendering artifacts near tile edges and slower performance.<br/>The default value is 128. |
 | tolerance | `number` | `none` | `false` | Specifies the Douglas-Peucker simplification tolerance.<br/>A greater value produces simpler geometries and improves performance.<br/>The default value is 0.375. |

package/docs/docs.json

@@ -855,7 +855,7 @@
         "required": false,
         "type": "enum",
         "default": "none",
-        "description": "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)"
+        "description": "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/Camera/SetUserTrackingModes.js)"
       },
       {
         "name": "followZoomLevel",
@@ -3934,6 +3934,13 @@
         "default": "none",
         "description": "Specifies the maximum zoom level at which to cluster points if clustering is enabled.\nDefaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,\nthe shapes are not clustered."
       },
+      {
+        "name": "clusterProperties",
+        "required": false,
+        "type": "object",
+        "default": "none",
+        "description": "Specifies custom properties on the generated clusters if clustering\nis enabled, aggregating values from clustered points.\n\nHas the form `{ \"property_name\": [operator, map_expression]}`, where\n `operator` is a custom reduce expression that references a special `[\"accumulated\"]` value -\n  it accumulates the property value from clusters/points the cluster contains\n `map_expression` produces the value of a single point\n\nExample: `{ \"resultingSum\": [[\"+\", [\"accumulated\"], [\"get\", \"resultingSum\"]], [\"get\", \"scalerank\"]] }`"
+      },
       {
         "name": "maxZoomLevel",
         "required": false,

package/index.d.ts

@@ -783,7 +783,7 @@ export interface LightProps extends Omit<ViewProps, 'style'> {
   style?: LightStyle;
 }
 
-export interface PointAnnotationProps {
+export interface PointAnnotationProps extends ViewProps {
   id: string;
   title?: string;
   snippet?: string;
@@ -837,6 +837,7 @@ export interface ShapeSourceProps extends ViewProps {
   cluster?: boolean;
   clusterRadius?: number;
   clusterMaxZoomLevel?: number;
+  clusterProperties?: object;
   maxZoomLevel?: number;
   buffer?: number;
   tolerance?: number;

package/ios/RCTMGL/RCTMGLShapeSource.h

@@ -21,6 +21,7 @@
 @property (nonatomic, strong) NSNumber *cluster;
 @property (nonatomic, strong) NSNumber *clusterRadius;
 @property (nonatomic, strong) NSNumber *clusterMaxZoomLevel;
+@property (nonatomic, strong) NSDictionary<NSString *, NSArray<NSExpression *> *> *clusterProperties;
 
 @property (nonatomic, strong) NSNumber *maxZoomLevel;
 @property (nonatomic, strong) NSNumber *buffer;

package/ios/RCTMGL/RCTMGLShapeSource.m

@@ -82,6 +82,20 @@ static UIImage * _placeHolderImage;
         options[MGLShapeSourceOptionMaximumZoomLevelForClustering] = _clusterMaxZoomLevel;
     }
 
+    if (_clusterProperties != nil) {
+       NSMutableDictionary<NSString *, NSArray *> *properties = [NSMutableDictionary new];
+
+        for (NSString *propertyName in _clusterProperties.allKeys) {
+            NSArray<NSExpression *> *expressions = [_clusterProperties objectForKey: propertyName];
+            NSExpression *firstExpression = [NSExpression expressionWithMGLJSONObject:[expressions objectAtIndex: 0]];
+            NSExpression *secondExpression = [NSExpression expressionWithMGLJSONObject:[expressions objectAtIndex: 1]];
+
+            [properties setObject:@[firstExpression, secondExpression] forKey:propertyName];
+        }
+
+        options[MGLShapeSourceOptionClusterProperties] = properties;
+    }
+    
     if (_maxZoomLevel != nil) {
         options[MGLShapeSourceOptionMaximumZoomLevel] = _maxZoomLevel;
     }

package/ios/RCTMGL/RCTMGLShapeSourceManager.m

@@ -23,6 +23,7 @@ RCT_EXPORT_VIEW_PROPERTY(shape, NSString)
 RCT_EXPORT_VIEW_PROPERTY(cluster, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(clusterRadius, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(clusterMaxZoomLevel, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(clusterProperties, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(buffer, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(tolerance, NSNumber)

package/ios/RCTMGL.xcodeproj/project.pbxproj

@@ -495,6 +495,7 @@
 				D8C1903423F53B0F00223486 /* RCTMGLImagesManager.m */,
 			);
 			name = Images;
+		};
 		DF3CFC0122CFCD8B00A83174 /* Location */ = {
 			isa = PBXGroup;
 			children = (

package/javascript/components/Camera.js

@@ -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 `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)
+     * 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/Camera/SetUserTrackingModes.js)
      */
     followUserMode: PropTypes.oneOf(['normal', 'compass', 'course']),
 

package/javascript/components/ShapeSource.js

@@ -63,6 +63,20 @@ class ShapeSource extends NativeBridgeComponent(AbstractSource) {
      */
     clusterMaxZoomLevel: PropTypes.number,
 
+    /**
+     * Specifies custom properties on the generated clusters if clustering
+     * is enabled, aggregating values from clustered points.
+     *
+     * Has the form `{ "property_name": [operator, map_expression]}`, where
+     *  `operator` is a custom reduce expression that references a special `["accumulated"]` value -
+     *   it accumulates the property value from clusters/points the cluster contains
+     *  `map_expression` produces the value of a single point
+     *
+     * Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
+     *
+     */
+    clusterProperties: PropTypes.object,
+
     /**
      * Specifies the maximum zoom level at which to create vector tiles.
      * A greater value produces greater detail at high zoom levels.
@@ -324,6 +338,7 @@ class ShapeSource extends NativeBridgeComponent(AbstractSource) {
       cluster: this.props.cluster ? 1 : 0,
       clusterRadius: this.props.clusterRadius,
       clusterMaxZoomLevel: this.props.clusterMaxZoomLevel,
+      clusterProperties: this.props.clusterProperties,
       maxZoomLevel: this.props.maxZoomLevel,
       buffer: this.props.buffer,
       tolerance: this.props.tolerance,

package/javascript/components/Style.js

@@ -163,6 +163,9 @@ function getShapeSource(id, source) {
   if (source.clusterMaxZoom !== undefined) {
     sourceProps.clusterMaxZoomLevel = source.clusterMaxZoom;
   }
+  if (source.clusterProperties !== undefined) {
+    sourceProps.clusterProperties = source.clusterProperties;
+  }
   if (source.buffer !== undefined) {
     sourceProps.buffer = source.buffer;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "A MapLibre GL Native plugin for creating maps in React Native",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -49,7 +49,7 @@
     "@types/geojson": "^7946.0.7",
     "@types/node": "^18.11.18",
     "debounce": "^1.2.0",
-    "deprecated-react-native-prop-types": "^2.3.0"
+    "deprecated-react-native-prop-types": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.5",
@@ -58,11 +58,12 @@
     "@babel/runtime": "7.17.2",
     "@react-native-community/eslint-config": "^3.0.1",
     "@react-native-community/eslint-plugin": "^1.3.0",
+    "@react-native/metro-config": "^0.72.7",
     "@sinonjs/fake-timers": "^8.0.1",
     "@testing-library/react-native": "^8.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
     "@typescript-eslint/parser": "^5.8.0",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "^29.6.0",
     "documentation": "^14.0.0",
     "ejs": "^3.1.3",
     "ejs-lint": "^1.1.0",
@@ -79,17 +80,17 @@
     "eslint-plugin-react-native": "^4.0.0",
     "expo-module-scripts": "^3.0.4",
     "husky": "4.3.8",
-    "jest": "^27.5.1",
-    "jest-cli": "^27.5.1",
+    "jest": "^29.6.0",
+    "jest-cli": "^29.6.0",
     "lint-staged": "^12.1.2",
-    "metro-react-native-babel-preset": "^0.70.3",
+    "metro-react-native-babel-preset": "^0.76.7",
     "node-dir": "0.1.17",
     "prettier": "^2.0.4",
     "prop-types": "^15.8.1",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
-    "react-native": "0.68.0",
-    "react-test-renderer": "^18.0.0",
+    "react-native": "0.72.1",
+    "react-test-renderer": "^18.2.0",
     "standard": "*",
     "typescript": "^4.4.3"
   },

package/plugin/build/withMapLibre.js

@@ -41,10 +41,10 @@ const withCocoaPodsInstallerBlocks = c => {
 // used for spm (swift package manager) which Expo doesn't currently support.
 function applyCocoaPodsModifications(contents) {
     // Ensure installer blocks exist
-    let src = addInstallerBlock(contents, 'pre');
-    // src = addInstallerBlock(src, "post");
-    src = addMapLibreInstallerBlock(src, 'pre');
-    // src = addMapLibreInstallerBlock(src, "post");
+    // let src = addInstallerBlock(contents, 'pre');
+    let src = addInstallerBlock(contents, 'post');
+    // src = addMapLibreInstallerBlock(src, 'pre');
+    src = addMapLibreInstallerBlock(src, 'post');
     return src;
 }
 exports.applyCocoaPodsModifications = applyCocoaPodsModifications;

package/setup-jest.js

@@ -110,7 +110,9 @@ NativeModules.MGLSnapshotModule = {
 
 NativeModules.MGLLocationModule = {
   getLastKnownLocation: jest.fn(),
+  setMinDisplacement: jest.fn(),
   start: jest.fn(),
+  stop: jest.fn(),
   pause: jest.fn(),
 };