Support Maplibre GL JS 4.x

[tordans]

Target Use Case

Maplibre GL JS 4.0.0 was released recently. The changelog list a few things that sound like they are relevant for react-map-gl.

Proposal

I thought we can use this issue to share if everything still works … and if anything needs updating now.

---

A list of things to look at:

• [ ] customAttribution was removed so https://visgl.github.io/react-map-gl/docs/api-reference/attribution-control#other-properties should be updated to reflect that only compact is set. (https://maplibre.org/maplibre-gl-js/docs/API/types/AttributionControlOptions/)

[tordans]

I updated this small Astro Project to Maplibre v4 with the newest pmtiles and it looks like all works great https://github.com/tordans/berlin-bikenetwork-monitoring https://tordans.github.io/berlin-bikenetwork-monitoring/

[andokai]

One thing that might trip some people up is the change of the loadImage function from callback to promise.

So if you're doing something like this

import { useMap } from 'react-map-gl/maplibre';

export function MapImage({ name, url, sdf }) {
   const { current: map } = useMap();

   if (!map.hasImage(name)) {
     map.loadImage(url, (error, image) => {
       if (error) {
         throw error;
       }
       if (!map.hasImage(name)) {
         map.addImage(name, image, { sdf });
       }
     });
   }
  return null;
}

It needs to be changed to something more like this

import { useMap } from 'react-map-gl/maplibre';

export function MapImage({ name, url, sdf }) {
   const { current: map } = useMap();

   if (!map.hasImage(name)) {
     map.loadImage(url).then(({ data }) => {
       if (!map.hasImage(name)) {
         map.addImage(name, data, { sdf });
       }
     });
   }
  return null;
}