Merge branch 'beta' into feat/remove-maplibre-gl

# Conflicts: # docs/components/BackgroundLayer.md # docs/components/CircleLayer.md # docs/components/FillExtrusionLayer.md # docs/components/FillLayer.md # docs/components/HeatmapLayer.md # docs/components/LineLayer.md # docs/components/MapView.md # docs/components/RasterLayer.md # docs/components/SymbolLayer.md # docs/docs.json # packages/examples/src/examples/UserLocation/FollowUserLocationRenderMode.tsx # src/MLRNModule.ts # src/components/MapView.tsx
maplibre · Dec 19, 2024 · cafbd5b · cafbd5b
2 parents 2f2d9a5 + 7b112b0
commit cafbd5b
Show file tree

Hide file tree

Showing 20 changed files with 166 additions and 106 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,27 @@
+# [10.0.0-beta.11](https://github.com/maplibre/maplibre-react-native/compare/v10.0.0-beta.10...v10.0.0-beta.11) (2024-12-17)
+
+
+### Features
+
+* unify `MapView`s `styleURL` and `styleJSON` to `mapStyle` ([#559](https://github.com/maplibre/maplibre-react-native/issues/559)) ([7d22f16](https://github.com/maplibre/maplibre-react-native/commit/7d22f169de2ee8d713fb45e0cb0f8fc8918681f1))
+
+
+### BREAKING CHANGES
+
+* remove `styleURL` and `styleJSON` from `MapView`, use `mapStyle` instead
+
+# [10.0.0-beta.10](https://github.com/maplibre/maplibre-react-native/compare/v10.0.0-beta.9...v10.0.0-beta.10) (2024-12-17)
+
+
+### Features
+
+* remove style property enums ([#558](https://github.com/maplibre/maplibre-react-native/issues/558)) ([b89a0dd](https://github.com/maplibre/maplibre-react-native/commit/b89a0ddb29a3192c15a4ad0792710150128718ac))
+
+
+### BREAKING CHANGES
+
+* Removed style property enums
+
 # [10.0.0-beta.9](https://github.com/maplibre/maplibre-react-native/compare/v10.0.0-beta.8...v10.0.0-beta.9) (2024-12-15)
 
 

diff --git a/README.md b/README.md
@@ -33,6 +33,8 @@ diverged, it has become necessary to separate the projects into specific wrapper
     - [Android](/docs/guides/setup/Android.md)
     - [iOS](/docs/guides/setup/iOS.md)
   - [Expo](/docs/guides/setup/Expo.md)
+- Migrations
+  - [Migrating to v10](/docs/guides/migrations/v10.md)
 
 ### Components
 
@@ -41,9 +43,9 @@ diverged, it has become necessary to separate the projects into specific wrapper
 - [PointAnnotation](/docs/components/PointAnnotation.md)
 - [MarkerView](/docs/components/MarkerView.md)
 - [Callout](/docs/components/Callout.md)
-- [Camera](docs/components/Camera.md)
-- [UserLocation](docs/components/UserLocation.md)
-- [Images](docs/components/Images.md)
+- [Camera](/docs/components/Camera.md)
+- [UserLocation](/docs/components/UserLocation.md)
+- [Images](/docs/components/Images.md)
 
 ### Sources
 

diff --git a/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapView.java b/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapView.java
@@ -8,7 +8,6 @@
 import android.location.Location;
 import android.os.Handler;
 import androidx.annotation.NonNull;
-import androidx.annotation.UiThread;
 
 import android.util.DisplayMetrics;
 import android.util.Pair;
@@ -53,7 +52,6 @@
 import org.maplibre.reactnative.components.AbstractMapFeature;
 import org.maplibre.reactnative.components.annotation.MLRNPointAnnotation;
 import org.maplibre.reactnative.components.annotation.MLRNMarkerView;
-import org.maplibre.reactnative.components.annotation.MarkerView;
 import org.maplibre.reactnative.components.annotation.MarkerViewManager;
 import org.maplibre.reactnative.components.camera.MLRNCamera;
 import org.maplibre.reactnative.components.images.MLRNImages;
@@ -69,6 +67,7 @@
 import org.maplibre.reactnative.events.MapChangeEvent;
 import org.maplibre.reactnative.events.MapClickEvent;
 import org.maplibre.reactnative.events.constants.EventTypes;
+import org.maplibre.reactnative.modules.MLRNModule;
 import org.maplibre.reactnative.utils.BitmapUtils;
 import org.maplibre.reactnative.utils.GeoJSONUtils;
 import org.maplibre.reactnative.utils.GeoViewport;
@@ -85,7 +84,6 @@
 import javax.annotation.Nullable;
 
 import static org.maplibre.android.style.layers.PropertyFactory.visibility;
-import static org.maplibre.reactnative.modules.MLRNOfflineModule.DEFAULT_STYLE_URL;
 
 @SuppressWarnings({ "MissingPermission" })
 public class MLRNMapView extends MapView implements OnMapReadyCallback, MapLibreMap.OnMapClickListener,
@@ -117,7 +115,7 @@ public class MLRNMapView extends MapView implements OnMapReadyCallback, MapLibre
 
     private LocalizationPlugin mLocalizationPlugin;
 
-    private String mStyleURL;
+    private String mMapStyle;
 
     private Integer mPreferredFramesPerSecond;
     private boolean mLocalizeLabels;
@@ -171,7 +169,7 @@ public MLRNMapView(Context context, MLRNMapViewManager manager, MapLibreMapOptio
 
         mHandler = new Handler();
 
-        mStyleURL = DEFAULT_STYLE_URL;
+        mMapStyle = MLRNModule.DEFAULT_STYLE_URL;
 
         setLifecycleListeners();
 
@@ -436,10 +434,10 @@ public boolean isJSONValid(String test) {
     public void onMapReady(final MapLibreMap mapboxMap) {
         mMap = mapboxMap;
 
-        if (isJSONValid(mStyleURL)) {
-            mMap.setStyle(new Style.Builder().fromJson(mStyleURL));
+        if (isJSONValid(mMapStyle)) {
+            mMap.setStyle(new Style.Builder().fromJson(mMapStyle));
         } else {
-            mMap.setStyle(new Style.Builder().fromUri(mStyleURL));
+            mMap.setStyle(new Style.Builder().fromUri(mMapStyle));
         }
 
         reflow();
@@ -776,21 +774,21 @@ private float getDisplayDensity() {
         return mContext.getResources().getDisplayMetrics().density;
     }
 
-    public void setReactStyleURL(String styleURL) {
-        mStyleURL = styleURL;
+    public void setReactMapStyle(String mapStyle) {
+        mMapStyle = mapStyle;
 
         if (mMap != null) {
             removeAllSourcesFromMap();
 
-            if (isJSONValid(mStyleURL)) {
-                mMap.setStyle(new Style.Builder().fromJson(mStyleURL), new Style.OnStyleLoaded() {
+            if (isJSONValid(mMapStyle)) {
+                mMap.setStyle(new Style.Builder().fromJson(mMapStyle), new Style.OnStyleLoaded() {
                     @Override
                     public void onStyleLoaded(@NonNull Style style) {
                         addAllSourcesToMap();
                     }
                 });
             } else {
-                mMap.setStyle(styleURL, new Style.OnStyleLoaded() {
+                mMap.setStyle(mapStyle, new Style.OnStyleLoaded() {
                     @Override
                     public void onStyleLoaded(@NonNull Style style) {
                         addAllSourcesToMap();

diff --git a/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapViewManager.java b/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapViewManager.java
@@ -1,7 +1,6 @@
 package org.maplibre.reactnative.components.mapview;
 
 import android.util.Log;
-import android.view.Gravity;
 import android.view.View;
 
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -11,23 +10,17 @@
 import com.facebook.react.uimanager.LayoutShadowNode;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
-import org.maplibre.android.geometry.LatLngBounds;
-import org.maplibre.android.log.Logger;
+
 import org.maplibre.android.maps.MapLibreMap;
 import org.maplibre.reactnative.components.AbstractEventEmitter;
 import org.maplibre.reactnative.events.constants.EventKeys;
 import org.maplibre.reactnative.utils.ConvertUtils;
 import org.maplibre.reactnative.utils.ExpressionParser;
 import org.maplibre.reactnative.utils.GeoJSONUtils;
-import org.maplibre.geojson.FeatureCollection;
-import org.maplibre.geojson.Point;
 
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.Map;
-import java.util.concurrent.ExecutionException;
-import java.util.concurrent.FutureTask;
-import java.util.concurrent.RunnableFuture;
 
 import javax.annotation.Nullable;
 
@@ -111,9 +104,9 @@ public MLRNMapView getByReactTag(int reactTag) {
 
     //region React Props
 
-    @ReactProp(name="styleURL")
-    public void setStyleURL(MLRNMapView mapView, String styleURL) {
-        mapView.setReactStyleURL(styleURL);
+    @ReactProp(name="mapStyle")
+    public void setMapStyle(MLRNMapView mapView, String mapStyle) {
+        mapView.setReactMapStyle(mapStyle);
     }
 
     @ReactProp(name="preferredFramesPerSecond")

diff --git a/android/src/main/java/org/maplibre/reactnative/modules/MLRNModule.java b/android/src/main/java/org/maplibre/reactnative/modules/MLRNModule.java
@@ -32,6 +32,8 @@
 public class MLRNModule extends ReactContextBaseJavaModule {
     public static final String REACT_CLASS = "MLRNModule";
 
+    public static final String DEFAULT_STYLE_URL = "https://demotiles.maplibre.org/style.json";
+
     private static boolean customHeaderInterceptorAdded = false;
 
     private Handler mUiThreadHandler;
@@ -52,7 +54,7 @@ public String getName() {
     public Map<String, Object> getConstants() {
         // map style urls
         Map<String, String> styleURLS = new HashMap<>();
-        styleURLS.put("Default", "https://demotiles.maplibre.org/style.json");
+        styleURLS.put("Default", DEFAULT_STYLE_URL);
 
         // events
         Map<String, String> eventTypes = new HashMap<>();

diff --git a/android/src/main/java/org/maplibre/reactnative/modules/MLRNOfflineModule.java b/android/src/main/java/org/maplibre/reactnative/modules/MLRNOfflineModule.java
@@ -9,7 +9,6 @@
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.modules.core.RCTNativeAppEventEmitter;
 import org.maplibre.geojson.FeatureCollection;
-// import org.maplibre.android.constants.Style;
 import org.maplibre.android.geometry.LatLngBounds;
 import org.maplibre.android.offline.OfflineManager;
 import org.maplibre.android.offline.OfflineRegion;
@@ -43,7 +42,6 @@ public class MLRNOfflineModule extends ReactContextBaseJavaModule {
     public static final String OFFLINE_ERROR = "MapboxOfflineRegionError";
     public static final String OFFLINE_PROGRESS = "MapboxOfflineRegionProgress";
 
-    public static final String DEFAULT_STYLE_URL = "https://demotiles.maplibre.org/style.json";
     public static final Double DEFAULT_MIN_ZOOM_LEVEL = 10.0;
     public static final Double DEFAULT_MAX_ZOOM_LEVEL = 20.0;
 
@@ -426,7 +424,7 @@ public void setProgressEventThrottle(double eventThrottle) {
 
     private OfflineRegionDefinition makeDefinition(LatLngBounds latLngBounds, ReadableMap options) {
         return new OfflineTilePyramidRegionDefinition(
-                ConvertUtils.getString("styleURL", options, DEFAULT_STYLE_URL),
+                ConvertUtils.getString("styleURL", options, MLRNModule.DEFAULT_STYLE_URL),
                 latLngBounds,
                 ConvertUtils.getDouble("minZoom", options, DEFAULT_MIN_ZOOM_LEVEL),
                 ConvertUtils.getDouble("maxZoom", options, DEFAULT_MAX_ZOOM_LEVEL),

diff --git a/docs/components/MapView.md b/docs/components/MapView.md
@@ -8,8 +8,7 @@ MapView backed by MapLibre Native
 | ---- | :--: | :-----: | :------: | :----------: |
 | contentInset | `number[] \| number` | `none` | `false` | The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport. |
 | style | `ViewProps["style"]` | `none` | `false` | Style for wrapping React Native View |
-| styleURL | `string` | `none` | `false` | Style URL for map - notice, if non is set it _will_ default to `StyleURL.Default` |
-| styleJSON | `string` | `none` | `false` | StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec |
+| mapStyle | `string \| object` | `none` | `false` | Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default` |
 | preferredFramesPerSecond | `number` | `none` | `false` | iOS: The preferred frame rate at which the map view is rendered.<br/>The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,<br/>which will adaptively set the preferred frame rate based on the capability of<br/>the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.<br/><br/>Android: The maximum frame rate at which the map view is rendered, but it can't excess the ability of device hardware.<br/>This property can be set to arbitrary integer values. |
 | localizeLabels | `boolean` | `false` | `false` | Automatically change the language of the map labels to the system’s preferred language,<br/>this is not something that can be toggled on/off |
 | zoomEnabled | `boolean` | `none` | `false` | Enable/Disable zoom on the map |

diff --git a/docs/docs.json b/docs/docs.json
@@ -2405,18 +2405,11 @@
         "description": "Style for wrapping React Native View"
       },
       {
-        "name": "styleURL",
+        "name": "mapStyle",
         "required": false,
-        "type": "string",
-        "default": "none",
-        "description": "Style URL for map - notice, if non is set it _will_ default to `StyleURL.Default`"
-      },
-      {
-        "name": "styleJSON",
-        "required": false,
-        "type": "string",
+        "type": "string \\| object",
         "default": "none",
-        "description": "StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec"
+        "description": "Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default`"
       },
       {
         "name": "preferredFramesPerSecond",

diff --git a/docs/guides/migrations/v10.md b/docs/guides/migrations/v10.md
@@ -0,0 +1,75 @@
+# Migrating to v10
+
+## Changes to `Camera` Component
+
+### Default `animationMode` is now `CameraMode.None`
+
+The default `animationMode` for a controlled `Camera` is now `CameraMode.None`. To reinstate previous behavior, change the following:
+
+```diff
+<Camera
+  centerCoordinates={[0, 0]}
++  animationDuration={2000}
++  animationMode="easeTo"
+/>
+```
+
+### Removed `allowUpdates` and `triggerKey` Props
+
+If you need this functionality, keep your props stable or use the imperative `setCamera`. 
+
+```diff
+<Camera
+  centerCoordinates={[0, 0]}
+-  allowUpdates={false}
+-  triggerKey={someKey}
+/>
+```
+
+## `MapView` props `styleURL` and `styleJSON` unified to `mapStyle`
+
+The props `styleURL` and `styleJSON`, which control the style of the `MapView`, have been unified into a single `mapStyle` prop.
+
+### `styleURL`
+
+```diff
+<MapView
+-  styleURL="https://some-style-url"
++  mapStyle="https://some-style-url"
+/>
+```
+
+### `styleJSON`
+
+A style object is now expected as an object, without `JSON.stringify`.
+
+```diff
+<MapView
+-  styleJSON={JSON.stringify(someStyleObject)}
++  mapStyle={someStyleObject}
+/>
+```
+
+## Removed `Style` component
+
+The `Style` component was redundant, as it's possible to pass a style object to the `MapView` directly.
+
+```diff
+- <MapView>
+-  <Style json={someStyleObject} />
+- </MapView>
++ <MapView mapStyle={someStyleObject} />
+```
+
+## Replaced `OfflineProgressStatus` with `OfflinePackStatus`
+
+The two types have been unified. Simply replace `OfflineProgressStatus` with `OfflinePackStatus`.
+
+# Removed deprecated Methods, Props and Types
+
+- `UserTrackingModes` was removed, use `UserTrackingMode` instead
+- Removed `setCamera` from `MapView`, use imperative methods of `Camera` instead
+- Removed `byId` methods from ShapeSource
+- Removed `children` from SymbolSource
+- Removed `assets` key from `Images`
+- Removed deprecated event keys
diff --git a/ios/MLRN/MLRNMapView.h b/ios/MLRN/MLRNMapView.h
@@ -47,7 +47,7 @@ typedef void (^StyleLoadedBlock) (MLNStyle* __nonnull style);
 @property (nonatomic, assign) NSInteger *reactCompassViewPosition;
 @property (nonatomic, assign) CGPoint reactCompassViewMargins;
 
-@property (nonatomic, copy) NSString *reactStyleURL;
+@property (nonatomic, copy) NSString *reactMapStyle;
 @property (nonatomic, assign) NSInteger reactPreferredFramesPerSecond;
 
 @property (nonatomic, assign) MLNCoordinateBounds maxBounds;

diff --git a/ios/MLRN/MLRNMapView.m b/ios/MLRN/MLRNMapView.m
@@ -374,11 +374,11 @@ - (void)setReactContentInset:(NSArray<NSNumber *> *)reactContentInset
     self.contentInset = UIEdgeInsetsMake(top, left, bottom, right);
 }
 
-- (void)setReactStyleURL:(NSString *)reactStyleURL
+- (void)setReactMapStyle:(NSString *)reactMapStyle
 {
-    _reactStyleURL = reactStyleURL;
+    _reactMapStyle = reactMapStyle;
     [self _removeAllSourcesFromMap];
-    self.styleURL = [self _getStyleURLFromKey:_reactStyleURL];
+    self.styleURL = [self _getStyleURLFromKey:_reactMapStyle];
 }
 
 - (void)setReactPreferredFramesPerSecond:(NSInteger)reactPreferredFramesPerSecond
@@ -500,13 +500,13 @@ - (MLRNSource *)getTouchableSourceWithHighestZIndex:(NSArray<MLRNSource *> *)tou
     return nil;
 }
 
-- (NSURL*)_getStyleURLFromKey:(NSString *)styleURL
+- (NSURL*)_getStyleURLFromKey:(NSString *)mapStyle
 {
-    NSURL *url = [NSURL URLWithString:styleURL];
+    NSURL *url = [NSURL URLWithString:mapStyle];
     if (url) {
         return url;
-    } else if (RCTJSONParse(styleURL, nil)) {
-        return [MLRNUtils styleURLFromStyleJSON:styleURL];
+    } else if (RCTJSONParse(mapStyle, nil)) {
+        return [MLRNUtils styleURLFromStyleJSON:mapStyle];
     }
     return url;
 }

diff --git a/ios/MLRN/MLRNMapViewManager.m b/ios/MLRN/MLRNMapViewManager.m
@@ -80,7 +80,7 @@ - (UIView *)view
 RCT_REMAP_VIEW_PROPERTY(compassViewMargins, reactCompassViewMargins, CGPoint)
 
 RCT_REMAP_VIEW_PROPERTY(contentInset, reactContentInset, NSArray)
-RCT_REMAP_VIEW_PROPERTY(styleURL, reactStyleURL, NSString)
+RCT_REMAP_VIEW_PROPERTY(mapStyle, reactMapStyle, NSString)
 RCT_REMAP_VIEW_PROPERTY(preferredFramesPerSecond, reactPreferredFramesPerSecond, NSInteger)
 
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)

diff --git a/ios/MLRN/MLRNModule.m b/ios/MLRN/MLRNModule.m
@@ -19,10 +19,6 @@ + (BOOL)requiresMainQueueSetup
 {
     // style urls
     NSMutableDictionary *styleURLS = [[NSMutableDictionary alloc] init];
-
-    for (MLNDefaultStyle* style in [MLNStyle predefinedStyles]) {
-      [styleURLS setObject:[style.url absoluteString] forKey:style.name];
-    }
     [styleURLS setObject:[[MLNStyle defaultStyleURL] absoluteString] forKey:@"Default"];
 
     // event types