Maplibre v1.15 compatibility

[p-j]

Description

Version 1.15.0 of maplibre has introduced a breaking change, renaming CSS classes from .mapboxgl-* to .maplibregl- (see issue maplibre/maplibre-gl-js#83 for details)

This breaks multiple UI components when used with react-map-gl.

Environment (please complete the following information):

• Library Version: react-map-gl 6.1.16
• Mapbox Version: maplibre-gl 1.15.0+
• React Version: react 17.0.2

Recommandation

Currently, fixing the dependency to 1.14.1-rc.2 fixes the issue.

I've shared this with the maplibre maintainers here: maplibre/maplibre-gl-js#83 (comment); cross-posting here for visibility

[Pessimistress]

A simple solution is to expose a prop cssNamespace that defaults to mapboxgl but you'll set it to maplibregl in this case.

More work will be needed if maplibre starts to diverge more than just renaming. Right now v5.x is dedicated to support mapbox-gl v1.x. Since Mapbox no longer updates v1.x we could diverge 5.x from 6.x code base to ensure mapblibre compatibility when future issues arise. My main concern is that, while I support the effort, I don't follow maplibre development closely so such breakages will most certainly occur again after another maplibre release.

[p-j]

I agree, the discussion on the original issue is getting to a point where maplibre would rollback the breaking changes of the 1.15 by supporting both naming scheme to facilitate transition.
Ultimately they seem to want to remove all mapbox naming in the upcoming v2.
For the rest I don't know what the compatibility would look like nor how the project would be governed in terms of getting feature in or moving forward with breaking changes.
From the discussion it seems unclear as well whether v1 would still be maintained after v2 gets released or not and it is equally unclear what the roadmap for v2 is at this point.

[p-j]

Fixed by maplibre/maplibre-gl-js#203 and the release of v1.15.2