[v7] Add fog, light, terrain props (#1669)

docs/api-reference/map.md

@@ -73,17 +73,20 @@ The current cursor [type](https://developer.mozilla.org/en-US/docs/Web/CSS/curso
 
 ### Styling options
 
-#### mapStyle: Style | string | Immutable
+#### fog: Fog | null
 
-Default: (empty style)
+The fog property of the style. Must conform to the [Fog Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/).
+If `null` is provided, removes the fog from the map.
 
-The map's Mapbox style. This must be an a JSON object conforming to the schema described in the [Mapbox Style Specification](https://mapbox.com/mapbox-gl-style-spec/), or a URL to such JSON.
+#### light: Light
 
-#### styleDiffing: boolean
+Light properties of the style. Must conform to the [Light Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#light).
 
-Default: `true`
+#### mapStyle: Style | string | Immutable
 
-Enable diffing when `mapStyle` changes. If `false`, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.
+Default: (empty style)
+
+The map's Mapbox style. This must be an a JSON object conforming to the schema described in the [Mapbox Style Specification](https://mapbox.com/mapbox-gl-style-spec/), or a URL to such JSON.
 
 #### projection: string | ProjectionSpecification
 
@@ -97,6 +100,18 @@ Default: `true`
 
 If `true`, multiple copies of the world will be rendered, when zoomed out.
 
+#### styleDiffing: boolean
+
+Default: `true`
+
+Enable diffing when `mapStyle` changes. If `false`, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.
+
+#### terrain: TerrainSpecification
+
+Terrain property of the style. Must conform to the [Terrain Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/).
+If `null` is provided, removes terrain from the map.
+
+
 ### Camera options
 
 #### initialViewState: object

examples/terrain/src/app.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {useCallback} from 'react';
 import {render} from 'react-dom';
 import Map, {Source, Layer} from 'react-map-gl';
 
@@ -20,11 +19,6 @@ const skyLayer: SkyLayer = {
 };
 
 export default function App() {
-  const onMapLoad = useCallback(evt => {
-    const map = evt.target;
-    map.setTerrain({source: 'mapbox-dem', exaggeration: 1.5});
-  }, []);
-
   return (
     <>
       <Map
@@ -37,7 +31,7 @@ export default function App() {
         }}
         mapStyle="mapbox://styles/mapbox/satellite-v9"
         mapboxAccessToken={TOKEN}
-        onLoad={onMapLoad}
+        terrain={{source: 'mapbox-dem', exaggeration: 1.5}}
       >
         <Source
           id="mapbox-dem"

src/mapbox/create-ref.ts

@@ -29,8 +29,8 @@ const forwardMethods = [
   'fitBounds',
   'fitScreenCoordinates',
   'jumpTo',
-  'getFreeCameraOptions',
-  'setFreeCameraOptions',
+  // 'getFreeCameraOptions',
+  // 'setFreeCameraOptions',
   'easeTo',
   'flyTo',
   'isEasing',
@@ -94,12 +94,12 @@ const forwardMethods = [
   // "getPaintProperty",
   // "setLayoutProperty",
   // "getLayoutProperty",
-  'setLight',
-  'getLight',
-  'setTerrain',
-  'getTerrain',
-  'setFog',
-  'getFog',
+  // 'setLight',
+  // 'getLight',
+  // 'setTerrain',
+  // 'getTerrain',
+  // 'setFog',
+  // 'getFog',
   'setFeatureState',
   'removeFeatureState',
   'getFeatureState',

src/mapbox/mapbox.ts

@@ -9,6 +9,9 @@ import type {
   DragPanOptions,
   InteractiveOptions,
   TransformRequestFunction,
+  Light,
+  Fog,
+  TerrainSpecification,
   MapboxStyle,
   ImmutableLike,
   LngLatBoundsLike,
@@ -247,6 +250,14 @@ export type MapboxProps = ViewState & {
    * @default true
    */
   styleDiffing?: boolean;
+  /** The fog property of the style. Must conform to the Fog Style Specification .
+   * If `null` is provided, removes the fog from the map. */
+  fog?: Fog | null;
+  /** Light properties of the map. */
+  light?: Light;
+  /** Terrain property of the style. Must conform to the Terrain Style Specification .
+   * If `null` is provided, removes terrain from the map. */
+  terrain?: TerrainSpecification | null;
   /** Default layers to query on pointer events */
   interactiveLayerIds?: string[];
   /** The projection the map should be rendered in
@@ -432,6 +443,7 @@ export default class Mapbox {
     }
     const viewStateChanged = this._updateViewState(props, true);
     this._updateStyle(props, oldProps);
+    this._updateStyleComponents(props, oldProps);
     this._updateHandlers(props, oldProps);
 
     // If 1) view state has changed to match props and
@@ -474,6 +486,7 @@ export default class Mapbox {
     }
 
     const map: any = new this._MapClass(mapOptions);
+    // Props that are not part of constructor options
     if (viewState.padding) {
       map.setPadding(viewState.padding);
     }
@@ -502,6 +515,8 @@ export default class Mapbox {
     for (const eventName in otherEvents) {
       map.on(eventName, this._onEvent);
     }
+    map.on('styledata', () => this._updateStyleComponents(this.props, {}));
+    map.on('sourcedata', () => this._updateStyleComponents(this.props, {}));
     map.on('error', this._onError);
     this._map = map;
   }
@@ -575,9 +590,9 @@ export default class Mapbox {
     const map = this._map;
     let changed = false;
     for (const propName of settingNames) {
-      if (!deepEqual(nextProps[propName], currProps[propName])) {
+      if (propName in nextProps && !deepEqual(nextProps[propName], currProps[propName])) {
         changed = true;
-        map[`set${propName[0].toUpperCase()}${propName.slice(1)}`]?.(nextProps[propName]);
+        map[`set${propName[0].toUpperCase()}${propName.slice(1)}`](nextProps[propName]);
       }
     }
     return changed;
@@ -605,6 +620,33 @@ export default class Mapbox {
     return false;
   }
 
+  /* Update fog, light and terrain to match props
+     @param {object} nextProps
+     @param {object} currProps
+     @returns {bool} true if anything is changed
+   */
+  _updateStyleComponents(nextProps: MapboxProps, currProps: MapboxProps): boolean {
+    const map = this._map;
+    let changed = false;
+    if (map.style.loaded()) {
+      if ('light' in nextProps && !deepEqual(nextProps.light, currProps.light)) {
+        changed = true;
+        map.setLight(nextProps.light);
+      }
+      if ('fog' in nextProps && !deepEqual(nextProps.fog, currProps.fog)) {
+        changed = true;
+        map.setFog(nextProps.fog);
+      }
+      if ('terrain' in nextProps && !deepEqual(nextProps.terrain, currProps.terrain)) {
+        if (!nextProps.terrain || map.getSource(nextProps.terrain.source)) {
+          changed = true;
+          map.setTerrain(nextProps.terrain);
+        }
+      }
+    }
+    return changed;
+  }
+
   /* Update interaction handlers to match props
      @param {object} nextProps
      @param {object} currProps

src/types/external.ts

@@ -67,6 +67,9 @@ export type {
   DragPanOptions,
   InteractiveOptions,
   TransformRequestFunction,
+  Light,
+  Fog,
+  TerrainSpecification,
   Style as MapboxStyle,
   BackgroundLayer,
   CircleLayer,