MapLibre support

[davedbase]

Hi! Following up on this request @birkskyum I'd love to see MapLibre support alongside Mapbox. I'm a big fan of both products and actively use solid-map-gl in two projects now. My next one could use MapLibre because there's no budget for the service

Could this just be a drop-in replacement? Perhaps MapGL could accept an option to override the library internally?

[birkskyum]

The 1.x versions of the libraries have the same API, but changes start to happen from v2. MapLibre is big on TypeScript, like this library, so the entire codebase was ported. Also, all features from v2 and up are different implementations in the libraries, but that still mainly concerns experimental features like 3d terrain/globe.

The solution you propose could work, but it has to be implemented in such a way that the types can be adapted as they diverge, so that i.e. MapGL accepted either a MapboxMap type or a MapLibreMap type.

There is currently investigative work ongoing towards if it's possible to make MapLibre more reactive, so that the reactive libraries (like solid/react) can trigger the renders. Currently MapLibre request the frames manually internally, and it makes it much harder to make a good wrapper without a delay of 1 frame. There's an issue on it here.

[davedbase]

Ah, thanks for that info. Seems like a bit of work to get v2 supported but worth it IMO.

The reactivity topic is very interesting. Solid's reactivity is extremely small and performant, could use it for both solutions relatively nicely. Also Solid has a universal renderer that might be interesting to explore (https://github.com/solidjs/solid/issues/593) alongside that research.

[KaiHuebner]

Hi guys,

Sorry it took a while, but I added now support for MapLibre. You can use it by simply adding a flag to the MapGL component.

export const App = () => (
  <MapGL
    asMapLibre
    options={{
      style: 'https://demotiles.maplibre.org/style.json',
    }}
    viewport={viewport()}
    onViewportChange={(evt: Viewport) => setViewport(evt)}>
  </MapGL>
)

I haven't completely tested it yet. And some newer Mapbox functionality isn't available in MapLibre. Also I haven't converted all the TypeScript types yet. I will continue working on this. If you find some bugs, please let me know and I will fix it.

[birkskyum]

@KalHuebner, that's awesome! I look forward to trying it out soon

[davedbase]

Same here! Thanks so much for tackling it @KaiHuebner. :-)