add react-map-gl documentation

[tordans]

It would be great to have a dedicated example for how to add PMTiles to ReactMapGL.

I added some learnings at https://github.com/visgl/react-map-gl/discussions/2165 but there is some room for improvement.

In general, there are two things that make this example different from a regular Maplibre GL JS implementation: (a) until https://github.com/visgl/react-map-gl/issues/2161 is resolved, the main Types for ReactMapGL are Mapbox, which does not support addProtocol. (b) The component structure/pattern gives it a great native React feel but makes it a bit harder to find the right place to add the addProtocol so that React rendering cycles know about PMTiles at the right time.

[bdon]

There's some overlap with #155 here. I think a bit of extra docs related to react is worth it because of the unclear lifecycle and where addProtocol needs to happen, specific to MapLibre.

[bdon]

@tordans I added a "Usage in React" section here: https://protomaps.com/docs/frontends/maplibre#usage-in-react which describes how to use addProtocol on the maplibre object in a root-level hook. Because you pass that same reference to maplibre into react-map-gl I think we don't need any changes to react-map-gl at all.

Full working example sandbox with react-map-gl: https://codesandbox.io/s/black-dream-oycvf2?file=/src/App.js

[bdon]

I'm going to close this for now - please reopen if you encounter other issues!

[tordans]

Full working example sandbox with react-map-gl: https://codesandbox.io/s/black-dream-oycvf2?file=/src/App.js

In case someone comes here … this is what the sandbox looks like when using the <Source>/<Layer> components by react map gl: https://codesandbox.io/p/sandbox/blissful-dewdney-cxdcx7?file=%2Fsrc%2FApp.js%3A19%2C11

[bdon]

@tordans can you make that public?

[tordans]

@tordans can you make that public?

Sorry. It should be public now. https://codesandbox.io/p/sandbox/react-map-gl-example-using-pmtiles-cxdcx7?file=%2Fsrc%2FApp.js%3A4%2C38