@maplibre/maplibre-react-native 10.0.0-alpha.18 → 10.0.0-alpha.19

package/CHANGELOG.md

@@ -6,6 +6,10 @@ PR Title ([#123](link to my pr))
 
 ```
 
+## 10.0.0-alpha.19
+
+feat: MapLibre Android SDK 11.5.0 ([#455](https://github.com/maplibre/maplibre-react-native/pull/455))
+
 ## 10.0.0-alpha.18
 
 fix: make MarkerView props with defaults optional ([#460](https://github.com/maplibre/maplibre-react-native/pull/460))

package/android/rctmln/build.gradle

@@ -33,7 +33,7 @@ dependencies {
     implementation("com.facebook.react:react-android")
 
     // MapLibre SDK
-    implementation "org.maplibre.gl:android-sdk:11.0.1"
+    implementation "org.maplibre.gl:android-sdk:11.5.0"
     implementation "org.maplibre.gl:android-sdk-turf:6.0.1"
 
     // Dependencies
@@ -45,9 +45,9 @@ dependencies {
 
 
     // MapLibre plugins
-    implementation ("org.maplibre.gl:android-plugin-localization-v9:3.0.0")
-    implementation ("org.maplibre.gl:android-plugin-annotation-v9:3.0.0")
-    implementation ("org.maplibre.gl:android-plugin-markerview-v9:3.0.0")
+    implementation ("org.maplibre.gl:android-plugin-localization-v9:3.0.1")
+    implementation ("org.maplibre.gl:android-plugin-annotation-v9:3.0.1")
+    implementation ("org.maplibre.gl:android-plugin-markerview-v9:3.0.1")
 }
 
 allprojects {

package/android/rctmln/src/main/java/com/maplibre/rctmln/components/mapview/RCTMLNMapView.java

@@ -27,7 +27,7 @@ import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeArray;
 import com.facebook.react.bridge.WritableNativeMap;
-import com.mapbox.android.gestures.MoveGestureDetector;
+import org.maplibre.android.gestures.MoveGestureDetector;
 import org.maplibre.geojson.Feature;
 import org.maplibre.geojson.FeatureCollection;
 import org.maplibre.android.camera.CameraPosition;
@@ -229,7 +229,7 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
             feature = (AbstractMapFeature) childView;
         } else if (childView instanceof RCTMLNNativeUserLocation) {
             feature = (AbstractMapFeature) childView;
-        }  else if (childView instanceof RCTMLNPointAnnotation) {
+        } else if (childView instanceof RCTMLNPointAnnotation) {
             RCTMLNPointAnnotation annotation = (RCTMLNPointAnnotation) childView;
             mPointAnnotations.put(annotation.getID(), annotation);
             feature = (AbstractMapFeature) childView;
@@ -350,7 +350,8 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
         mMap.moveCamera(cameraUpdate);
     }
 
-    public void easeCamera(CameraUpdate cameraUpdate, int duration, boolean easingInterpolator, MapLibreMap.CancelableCallback callback) {
+    public void easeCamera(CameraUpdate cameraUpdate, int duration, boolean easingInterpolator,
+            MapLibreMap.CancelableCallback callback) {
         mMap.easeCamera(cameraUpdate, duration, easingInterpolator, callback);
     }
 
@@ -435,7 +436,6 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
         return true;
     }
 
-
     @Override
     public void onMapReady(final MapLibreMap mapboxMap) {
         mMap = mapboxMap;
@@ -446,7 +446,6 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
             mMap.setStyle(new Style.Builder().fromUri(mStyleURL));
         }
 
-
         reflow();
 
         mMap.getStyle(new Style.OnStyleLoaded() {
@@ -501,7 +500,8 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
             }
 
             @Override
-            public void onMoveEnd(MoveGestureDetector detector) {}
+            public void onMoveEnd(MoveGestureDetector detector) {
+            }
         });
     }
 
@@ -572,15 +572,15 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
     }
 
     private void setupLocalization(Style style) {
-      mLocalizationPlugin = new LocalizationPlugin(RCTMLNMapView.this, mMap, style);
-      if (mLocalizeLabels) {
-          try {
-              mLocalizationPlugin.matchMapLanguageWithDeviceDefault();
-          } catch (Exception e) {
-              final String localeString = Locale.getDefault().toString();
-              Logger.w(LOG_TAG, String.format("Could not find matching locale for %s", localeString));
-          }
-      }
+        mLocalizationPlugin = new LocalizationPlugin(RCTMLNMapView.this, mMap, style);
+        if (mLocalizeLabels) {
+            try {
+                mLocalizationPlugin.matchMapLanguageWithDeviceDefault();
+            } catch (Exception e) {
+                final String localeString = Locale.getDefault().toString();
+                Logger.w(LOG_TAG, String.format("Could not find matching locale for %s", localeString));
+            }
+        }
     }
 
     @Override
@@ -645,8 +645,7 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
                 source.onPress(new RCTSource.OnPressEvent(
                         hits.get(source.getID()),
                         point,
-                        screenPoint
-                        ));
+                        screenPoint));
                 return true;
             }
         }
@@ -870,11 +869,11 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
             mLogoGravity |= Gravity.BOTTOM;
         }
         float density = getDisplayDensity();
-        mLogoMargins = new int[]{
-            position.hasKey("left") ? (int) density * position.getInt("left") : 0,
-            position.hasKey("top") ? (int) density * position.getInt("top") : 0,
-            position.hasKey("right") ? (int) density * position.getInt("right") : 0,
-            position.hasKey("bottom") ? (int) density * position.getInt("bottom") : 0
+        mLogoMargins = new int[] {
+                position.hasKey("left") ? (int) density * position.getInt("left") : 0,
+                position.hasKey("top") ? (int) density * position.getInt("top") : 0,
+                position.hasKey("right") ? (int) density * position.getInt("right") : 0,
+                position.hasKey("bottom") ? (int) density * position.getInt("bottom") : 0
         };
         updateUISettings();
     }
@@ -924,11 +923,11 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
             mAttributionGravity |= Gravity.BOTTOM;
         }
         float density = getDisplayDensity();
-        mAttributionMargin = new int[]{
-            position.hasKey("left") ? Math.round(density * position.getInt("left")) : 0,
-            position.hasKey("top") ? Math.round(density * position.getInt("top")) : 0,
-            position.hasKey("right") ? Math.round(density * position.getInt("right")) : 0,
-            position.hasKey("bottom") ? Math.round(density * position.getInt("bottom")) : 0
+        mAttributionMargin = new int[] {
+                position.hasKey("left") ? Math.round(density * position.getInt("left")) : 0,
+                position.hasKey("top") ? Math.round(density * position.getInt("top")) : 0,
+                position.hasKey("right") ? Math.round(density * position.getInt("right")) : 0,
+                position.hasKey("bottom") ? Math.round(density * position.getInt("bottom")) : 0
         };
         updateUISettings();
     }
@@ -1048,7 +1047,8 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
         manager.onClick(this);
     }
 
-    public void setSourceVisibility(final boolean visible, @NonNull final String sourceId, @Nullable final String sourceLayerId) {
+    public void setSourceVisibility(final boolean visible, @NonNull final String sourceId,
+            @Nullable final String sourceLayerId) {
         if (mMap == null) {
             return;
         }
@@ -1121,15 +1121,12 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
                 (uiSettings.getAttributionMarginLeft() != mAttributionMargin[0] ||
                         uiSettings.getAttributionMarginTop() != mAttributionMargin[1] ||
                         uiSettings.getAttributionMarginRight() != mAttributionMargin[2] ||
-                        uiSettings.getAttributionMarginBottom() != mAttributionMargin[3]
-                )
-        ) {
+                        uiSettings.getAttributionMarginBottom() != mAttributionMargin[3])) {
             uiSettings.setAttributionMargins(
-                mAttributionMargin[0],
-                mAttributionMargin[1],
-                mAttributionMargin[2],
-                mAttributionMargin[3]
-            );
+                    mAttributionMargin[0],
+                    mAttributionMargin[1],
+                    mAttributionMargin[2],
+                    mAttributionMargin[3]);
         }
 
         if (mTintColor != null) {
@@ -1145,18 +1142,15 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
         }
 
         if (mLogoMargins != null &&
-            (uiSettings.getLogoMarginLeft() != mLogoMargins[0] ||
-                uiSettings.getLogoMarginTop() != mLogoMargins[1] ||
-                uiSettings.getLogoMarginRight() != mLogoMargins[2] ||
-                uiSettings.getLogoMarginBottom() != mLogoMargins[3]
-            )
-        ) {
+                (uiSettings.getLogoMarginLeft() != mLogoMargins[0] ||
+                        uiSettings.getLogoMarginTop() != mLogoMargins[1] ||
+                        uiSettings.getLogoMarginRight() != mLogoMargins[2] ||
+                        uiSettings.getLogoMarginBottom() != mLogoMargins[3])) {
             uiSettings.setLogoMargins(
-                mLogoMargins[0],
-                mLogoMargins[1],
-                mLogoMargins[2],
-                mLogoMargins[3]
-            );
+                    mLogoMargins[0],
+                    mLogoMargins[1],
+                    mLogoMargins[2],
+                    mLogoMargins[3]);
         }
 
         if (mCompassEnabled != null && uiSettings.isCompassEnabled() != mCompassEnabled) {
@@ -1220,7 +1214,7 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
 
     public double[] getContentInset() {
         if (mInsets == null) {
-            double[] result = {0,0,0,0};
+            double[] result = { 0, 0, 0, 0 };
 
             return result;
         }
@@ -1245,7 +1239,8 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
 
         final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
 
-        double[] result = {left * metrics.scaledDensity, top * metrics.scaledDensity, right * metrics.scaledDensity, bottom * metrics.scaledDensity};
+        double[] result = { left * metrics.scaledDensity, top * metrics.scaledDensity, right * metrics.scaledDensity,
+                bottom * metrics.scaledDensity };
         return result;
     }
 
@@ -1288,7 +1283,7 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
 
     private WritableMap makeRegionPayload(Boolean isAnimated) {
         CameraPosition position = mMap.getCameraPosition();
-        if(position == null || position.target == null) {
+        if (position == null || position.target == null) {
             return new WritableNativeMap();
         }
         LatLng latLng = new LatLng(position.target.getLatitude(), position.target.getLongitude());
@@ -1305,8 +1300,9 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
         try {
             VisibleRegion visibleRegion = mMap.getProjection().getVisibleRegion();
             properties.putArray("visibleBounds", GeoJSONUtils.fromLatLngBounds(visibleRegion.latLngBounds));
-        } catch(Exception ex) {
-            Logger.e(LOG_TAG, String.format("An error occurred while attempting to make the region: %s", ex.getMessage()));
+        } catch (Exception ex) {
+            Logger.e(LOG_TAG,
+                    String.format("An error occurred while attempting to make the region: %s", ex.getMessage()));
         }
 
         return GeoJSONUtils.toPointFeature(latLng, properties);
@@ -1316,7 +1312,7 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
         IEvent event = new MapChangeEvent(this, EventTypes.REGION_DID_CHANGE,
                 makeRegionPayload(new Boolean(isAnimated)));
 
-                mManager.handleEvent(event);
+        mManager.handleEvent(event);
         mCameraChangeTracker.setReason(CameraChangeTracker.EMPTY);
     }
 
@@ -1471,25 +1467,27 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
     }
 
     /**
-    * Adds the marker image to the map for use as a SymbolLayer icon
-    */
+     * Adds the marker image to the map for use as a SymbolLayer icon
+     */
     private void setUpImage(@NonNull Style loadedStyle) {
         loadedStyle.addImage("MARKER_IMAGE_ID", BitmapFactory.decodeResource(
-            this.getResources(), R.drawable.red_marker)
-        );
+                this.getResources(), R.drawable.red_marker));
     }
 
     /**
-     * PointAnnotations are rendered to a canvas, but react native Image component is
-     * implemented on top of Fresco, and fresco will not load images when their view is
-     * not attached to the window. So we'll have an offscreen view where we add those views
+     * PointAnnotations are rendered to a canvas, but react native Image component
+     * is
+     * implemented on top of Fresco, and fresco will not load images when their view
+     * is
+     * not attached to the window. So we'll have an offscreen view where we add
+     * those views
      * so they can rendered full to canvas.
      */
     public ViewGroup offscreenAnnotationViewContainer() {
         if (mOffscreenAnnotationViewContainer == null) {
             mOffscreenAnnotationViewContainer = new FrameLayout(getContext());
-            FrameLayout.LayoutParams flParams = new FrameLayout.LayoutParams(0,0);
-            flParams.setMargins(-10000, -10000, -10000,-10000);
+            FrameLayout.LayoutParams flParams = new FrameLayout.LayoutParams(0, 0);
+            flParams.setMargins(-10000, -10000, -10000, -10000);
             mOffscreenAnnotationViewContainer.setLayoutParams(flParams);
             addView(mOffscreenAnnotationViewContainer);
         }
@@ -1518,10 +1516,12 @@ public class RCTMLNMapView extends MapView implements OnMapReadyCallback, MapLib
     }
 
     public void setTintColor(@Nullable Integer tintColor) {
-        if (mTintColor == tintColor) return;
+        if (mTintColor == tintColor)
+            return;
         mTintColor = tintColor;
         updateUISettings();
-        if (mLocationComponentManager == null) return;
+        if (mLocationComponentManager == null)
+            return;
         mLocationComponentManager.update(getMapboxMap().getStyle());
     }
 }

package/android/rctmln/src/main/java/com/maplibre/rctmln/components/styles/RCTMLNStyleFactory.java

@@ -582,6 +582,9 @@ public class RCTMLNStyleFactory {
             case "fillExtrusionBaseTransition":
               RCTMLNStyleFactory.setFillExtrusionBaseTransition(layer, styleValue);
               break;
+            case "fillExtrusionVerticalGradient":
+              RCTMLNStyleFactory.setFillExtrusionVerticalGradient(layer, styleValue);
+              break;
         }
       }
     }
@@ -1207,7 +1210,7 @@ public class RCTMLNStyleFactory {
       if (styleValue.isExpression()) {
         layer.setProperties(PropertyFactory.iconPadding(styleValue.getExpression()));
       } else {
-        layer.setProperties(PropertyFactory.iconPadding(styleValue.getFloat(VALUE_KEY)));
+        layer.setProperties(PropertyFactory.iconPadding(styleValue.getFloatArray(VALUE_KEY)));
       }
     }
 
@@ -1975,6 +1978,14 @@ public class RCTMLNStyleFactory {
       }
     }
 
+    public static void setFillExtrusionVerticalGradient(FillExtrusionLayer layer, RCTMLNStyleValue styleValue) {
+      if (styleValue.isExpression()) {
+        layer.setProperties(PropertyFactory.fillExtrusionVerticalGradient(styleValue.getExpression()));
+      } else {
+        layer.setProperties(PropertyFactory.fillExtrusionVerticalGradient(styleValue.getBoolean(VALUE_KEY)));
+      }
+    }
+
     public static void setVisibility(RasterLayer layer, RCTMLNStyleValue styleValue) {
       layer.setProperties(PropertyFactory.visibility(styleValue.getString(VALUE_KEY)));
     }

package/docs/FillExtrusionLayer.md

@@ -19,6 +19,7 @@
 * <a href="#name-5">fillExtrusionPattern</a><br/>
 * <a href="#name-6">fillExtrusionHeight</a><br/>
 * <a href="#name-7">fillExtrusionBase</a><br/>
+* <a href="#name-8">fillExtrusionVerticalGradient</a><br/>
 
 ___
 
@@ -317,3 +318,21 @@ The transition affecting any changes to this layer’s fillExtrusionBase propery
 `{duration: 300, delay: 0}`
 
 
+___
+
+#### Name
+`fillExtrusionVerticalGradient`
+
+#### Description
+Whether to apply a vertical gradient to the sides of a fillExtrusion layer. If true, sides will be shaded slightly darker farther down.
+
+#### Type
+`boolean`
+#### Default Value
+`true`
+
+
+#### Expression
+
+Parameters: `zoom`
+

package/docs/RasterLayer.md

@@ -329,7 +329,7 @@ ___
 `rasterFadeDuration`
 
 #### Description
-Fade duration when a new tile is added.
+Fade duration when a new tile is added, or when a video is started or its coordinates are updated.
 
 #### Type
 `number`

package/docs/SymbolLayer.md

@@ -389,12 +389,12 @@ ___
 `iconPadding`
 
 #### Description
-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.
+Size of additional area round the icon bounding box used for detecting symbol collisions.
 
 #### Type
-`number`
+`array<number>`
 #### Default Value
-`2`
+`[2]`
 
 #### Units
 `pixels`
@@ -1122,7 +1122,7 @@ ___
 `iconColor`
 
 #### Description
-The color of the icon. This can only be used with sdf icons.
+The color of the icon. This can only be used with SDF icons.
 
 #### Type
 `color`
@@ -1204,7 +1204,9 @@ ___
 `iconHaloWidth`
 
 #### Description
-Distance of halo to the icon outline.
+Distance of halo to the icon outline. 
+
+The unit is in pixels only for SDF sprites that were created with a blur radius of 8, multiplied by the display density. I.e., the radius needs to be 16 for `@2x` sprites, etc.
 
 #### Type
 `number`

package/docs/docs.json

@@ -1072,6 +1072,23 @@
           ]
         },
         "transition": true
+      },
+      {
+        "name": "fillExtrusionVerticalGradient",
+        "type": "boolean",
+        "values": [],
+        "default": true,
+        "description": "Whether to apply a vertical gradient to the sides of a fillExtrusion layer. If true, sides will be shaded slightly darker farther down.",
+        "requires": [],
+        "disabledBy": [],
+        "allowedFunctionTypes": [],
+        "expression": {
+          "interpolated": false,
+          "parameters": [
+            "zoom"
+          ]
+        },
+        "transition": false
       }
     ]
   },
@@ -2966,7 +2983,7 @@
         "minimum": 0,
         "units": "milliseconds",
         "default": 300,
-        "description": "Fade duration when a new tile is added.",
+        "description": "Fade duration when a new tile is added, or when a video is started or its coordinates are updated.",
         "requires": [],
         "disabledBy": [],
         "allowedFunctionTypes": [],
@@ -3733,11 +3750,13 @@
       },
       {
         "name": "iconPadding",
-        "type": "number",
+        "type": "array<number>",
         "values": [],
         "units": "pixels",
-        "default": 2,
-        "description": "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.",
+        "default": [
+          2
+        ],
+        "description": "Size of additional area round the icon bounding box used for detecting symbol collisions.",
         "requires": [
           "iconImage"
         ],
@@ -4460,7 +4479,7 @@
         "type": "color",
         "values": [],
         "default": "#000000",
-        "description": "The color of the icon. This can only be used with sdf icons.",
+        "description": "The color of the icon. This can only be used with SDF icons.",
         "requires": [
           "iconImage"
         ],
@@ -4504,7 +4523,7 @@
         "minimum": 0,
         "units": "pixels",
         "default": 0,
-        "description": "Distance of halo to the icon outline.",
+        "description": "Distance of halo to the icon outline. \n\nThe unit is in pixels only for SDF sprites that were created with a blur radius of 8, multiplied by the display density. I.e., the radius needs to be 16 for `@2x` sprites, etc.",
         "requires": [
           "iconImage"
         ],

package/ios/RCTMLN/RCTMLNStyle.h

@@ -177,6 +177,7 @@
 - (void)setFillExtrusionHeightTransition:(MLNFillExtrusionStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 - (void)setFillExtrusionBase:(MLNFillExtrusionStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 - (void)setFillExtrusionBaseTransition:(MLNFillExtrusionStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
+- (void)setFillExtrusionVerticalGradient:(MLNFillExtrusionStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 - (void)setRasterStyleLayerVisibility:(MLNRasterStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 - (void)setRasterOpacity:(MLNRasterStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 - (void)setRasterOpacityTransition:(MLNRasterStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;

package/ios/RCTMLN/RCTMLNStyle.m

@@ -499,6 +499,8 @@
       [self setFillExtrusionBase:layer withReactStyleValue:styleValue];
     } else if ([prop isEqualToString:@"fillExtrusionBaseTransition"]) {
       [self setFillExtrusionBaseTransition:layer withReactStyleValue:styleValue];
+    } else if ([prop isEqualToString:@"fillExtrusionVerticalGradient"]) {
+      [self setFillExtrusionVerticalGradient:layer withReactStyleValue:styleValue];
     } else {
       // TODO throw exception
     }
@@ -1457,6 +1459,11 @@
     layer.fillExtrusionBaseTransition = [styleValue getTransition];
 }
 
+- (void)setFillExtrusionVerticalGradient:(MLNFillExtrusionStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
+{
+    layer.fillExtrusionHasVerticalGradient = styleValue.mlnStyleValue;
+}
+
 
 
 - (void)setRasterStyleLayerVisibility:(MLNRasterStyleLayer *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue

package/javascript/components/annotations/Annotation.tsx

@@ -127,7 +127,10 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
 
     const children = [];
     const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
-      ? { ...props.style, iconImage: props.icon }
+      ? {
+          ...props.style,
+          iconImage: typeof props.icon === "string" ? props.icon : undefined,
+        }
       : undefined;
 
     if (symbolStyle) {