feat: unify styleURL and styleJSON to mapStyle prop

maplibre · Dec 16, 2024 · 6989cd4 · 6989cd4
1 parent ae684d3
commit 6989cd4
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 34 deletions.
diff --git a/packages/examples/src/examples/Map/CreateOfflineRegion.tsx b/packages/examples/src/examples/Map/CreateOfflineRegion.tsx
@@ -182,7 +182,7 @@ export default function CreateOfflineRegion() {
       <MapLibreGL.MapView
         onDidFinishLoadingMap={onDidFinishLoadingStyle}
         style={sheet.matchParent}
-        styleURL={AMERICANA_VECTOR_STYLE}
+        mapStyle={AMERICANA_VECTOR_STYLE}
       >
         <MapLibreGL.Camera
           defaultSettings={{
@@ -192,7 +192,7 @@ export default function CreateOfflineRegion() {
         />
       </MapLibreGL.MapView>
 
-      {isLoading === false && (
+      {!isLoading && (
         <Bubble style={styles.bubble}>
           {offlineRegionStatus === null && (
             <TouchableOpacity onPress={onDownload}>

diff --git a/packages/examples/src/examples/Map/LocalStyleJSON.tsx b/packages/examples/src/examples/Map/LocalStyleJSON.tsx
@@ -7,17 +7,16 @@ import MapLibreDemoTilesWhite from "../../assets/styles/maplibre-demo-tiles-whit
 import Bubble from "../../components/Bubble";
 import { sheet } from "../../styles/sheet";
 
-const STYLE_BLUE = JSON.stringify(MapLibreDemoTilesBlue);
-const STYLE_WHITE = JSON.stringify(MapLibreDemoTilesWhite);
-
 export default function LocalStyleJSON() {
   const [color, setColor] = useState<"blue" | "white">("blue");
 
   return (
     <>
       <MapView
         style={sheet.matchParent}
-        styleJSON={{ blue: STYLE_BLUE, white: STYLE_WHITE }[color]}
+        mapStyle={
+          { blue: MapLibreDemoTilesBlue, white: MapLibreDemoTilesWhite }[color]
+        }
       />
       <Bubble
         onPress={() =>

diff --git a/packages/examples/src/examples/UserLocation/FollowUserLocationRenderMode.tsx b/packages/examples/src/examples/UserLocation/FollowUserLocationRenderMode.tsx
@@ -96,10 +96,7 @@ export default function FollowUserLocationRenderMode() {
         </SettingsGroup>
       )}
 
-      <MapLibreGL.MapView
-        style={sheet.matchParent}
-        styleJSON={JSON.stringify(OSM_RASTER_STYLE)}
-      >
+      <MapLibreGL.MapView style={sheet.matchParent} mapStyle={OSM_RASTER_STYLE}>
         <MapLibreGL.Camera
           followUserLocation={followUserLocation}
           followUserMode={followUserMode}

diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx
@@ -67,13 +67,9 @@ interface MapViewProps extends BaseProps {
    */
   style?: ViewProps["style"];
   /**
-   * Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Default`
+   * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default`
    */
-  styleURL?: string;
-  /**
-   * StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec
-   */
-  styleJSON?: string;
+  mapStyle?: string | object;
   /**
    * iOS: The preferred frame rate at which the map view is rendered.
    * The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,
@@ -163,23 +159,23 @@ interface MapViewProps extends BaseProps {
   /**
    * This event is triggered whenever the currently displayed map region is about to change.
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionWillChange?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
   ): void;
   /**
    * This event is triggered whenever the currently displayed map region is changing.
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionIsChanging?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
   ): void;
   /**
    * This event is triggered whenever the currently displayed map region finished changing
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionDidChange?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
@@ -248,6 +244,7 @@ type CallableProps = {
 }[keyof MapViewProps];
 
 interface NativeProps extends Omit<MapViewProps, "onPress" | "onLongPress"> {
+  styleURL?: string;
   onPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
   onLongPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
 }
@@ -769,21 +766,20 @@ const MapView = memo(
         }
       };
 
-      const _setStyleURL = (props: MapViewProps): void => {
-        // user set a styleURL, no need to alter props
-        if (props.styleURL) {
-          return;
-        }
-
-        // user set styleJSON pass it to styleURL
-        if (props.styleJSON && !props.styleURL) {
-          props.styleURL = props.styleJSON;
+      const nativeProps = useMemo(() => {
+        const { mapStyle, ...otherProps } = props;
+
+        let styleURL = undefined;
+        if (mapStyle) {
+          if (typeof mapStyle === "string") {
+            styleURL = mapStyle;
+          } else if (typeof mapStyle === "object") {
+            styleURL = JSON.stringify(mapStyle);
+          }
         }
-      };
 
-      const nativeProps = useMemo(() => {
         return {
-          ...props,
+          ...otherProps,
           localizeLabels,
           scrollEnabled,
           pitchEnabled,
@@ -793,10 +789,12 @@ const MapView = memo(
           surfaceView,
           regionWillChangeDebounceTime,
           regionDidChangeDebounceTime,
+          styleURL,
           contentInset: contentInsetValue,
           style: styles.matchParent,
         };
       }, [
+        props,
         localizeLabels,
         scrollEnabled,
         pitchEnabled,
@@ -806,12 +804,9 @@ const MapView = memo(
         surfaceView,
         regionWillChangeDebounceTime,
         regionDidChangeDebounceTime,
-        props,
         contentInsetValue,
       ]);
 
-      _setStyleURL(nativeProps);
-
       const callbacks = {
         ref: (ref: MLRNMapViewRefType): void => _setNativeRef(ref),
         onPress: _onPress,