Add support for latest Mapbox rendering release (V3) [Feat]

[ReduxMPX]

Target Use Case

The Mapbox team recently released V3 (https://www.mapbox.com/blog/standard-core-style)

React-map-gl does not support this yet even when following the migration guide on the aforementioned URL.

Proposal

This would simply allow us to activate the V3.0 Beta while using this library.

[Pessimistress]

What exactly is not supported?

[ReduxMPX]

After following all of the migration steps to the best of my ability while still working with this library, the expected results do not appear and the map is just as previous.

[Pessimistress]

I suggest you create a Code Sandbox.

[alexandargyurov]

I've managed to add the 3D styles by using: mapStyle={"mapbox://styles/mapbox/standard-beta"}

To change the styling:

onLoad={(e) => {
   // @ts-ignore
   e.target.setConfigProperty("basemap", "lightPreset", "dusk");
}}

[ReduxMPX]

Thanks a ton! Not sure why I couldn't find the style URL, This worked flawlessly and saved me a headache.

🙏

[JClackett]

Anyone know how to set the default to be "dusk", I get a flash of the daytime map before the onLoad is called

[jonenst]

Seems like the official way is to call setConfigProperty in map.on('style.load') ( see https://docs.mapbox.com/mapbox-gl-js/guides/styles/#configure-a-style )? but this is not exposed in the react-map-gl callbacks, and it should fire before onLoad. A hacky way to do it is to call it directly on the ref like in https://visgl.github.io/react-map-gl/docs/api-reference/map#methods but only once and even before onLoad is fired ? Would be nice to be able to avoid something like this (useEffect after every render)

const done = useRef(false);
useEffect( () => {
  if (!done.current && mapRef.current) {
    done.current = true;
    mapRef.current.on('style.load', () => {
      mapRef.current.setConfigProperty('basemap', 'lightPreset', 'dusk');
    });
  }
})

Even if react-map-gl exposes more events like onStyleLoad, in this case it would be nice if mapboxgl allowed to set config properties in the mapStyle url or some other declarative place. Something like 'mapbox://styles/mapbox/standard#lightPreset=dusk' maybe ? Not sure how much such feedback is welcomed by the mapboxgljs team.

[kamami]

Just using mapStyle="mapbox://styles/mapbox/standard" throws this error: Uncaught Error: Style is not done loading

[trumbitta]

Just using mapStyle="mapbox://styles/mapbox/standard" throws this error: Uncaught Error: Style is not done loading

Same: please reopen?

[trumbitta]

@Pessimistress I prepared a repro. All works fine until you add <Source /> to the mix. Then the "Style is not done loading" error happens.

https://codesandbox.io/p/sandbox/frosty-minsky-pdqrlk?file=%2Fsrc%2FApp.js