Feature: Enable PMTile protocol support

[micheal-w-wells]

@mapcomponents/react-maplibre version:

Feature description

PMTile vector sources can be rendered

Example

<MlPMTileLayer or MlVectorTileLayer

Summary

For react devs using maplibre your library is a clear win, however some of us are using pmtile files and its not super intuitive to add a new protocol just yet

[cioddi]

In my opinion the useAddProtocol hook provides the required functionality to work well with the pmtiles package. We are using pmtiles too in our MapComponents application. iirc there have been some issues with Github pages (where all the examples are hosted) and byte range requests, which are required for pmtiles to work.

The example from pmtiles can be easily adapted to work with MapComponents though. https://github.com/protomaps/PMTiles/blob/main/js/examples/maplibre.html

// This line should be outside of your react component
let protocol = new pmtiles.Protocol();

// This line inside your react component
useAddProtocol({
    protocol: 'pmtiles',
    handler: protocol.tile
});

// In the JSX
<MlVectorTileLayer url={'pmtiles://https://URL_TO_YOUR_PMTILES/{z}/{x}/{y}'} />

If you provide an example that is not working now, we can take a look at it.

[micheal-w-wells]

Thanks very much for the help! Your example is very straight forward, but I don't seem to be able to get it to work. If you checkout https://github.com/bcgov/WetpaddlersV2/tree/issue_example that branch, and cd app && nvm use 20 && npm install && npm run dev you can run the app and you should see some blue circles on the west coast of North America (BC to be more specific). The commented out 'old way' of adding the PMTile layer is in a hook near the top of the file.

EDIT: This branch got a bit closer, but gives a 'invalid PMTile URL error: issue_example_2

[cioddi]

I have created a pull request for your repo that fixes the implementation. PMTiles URL was missing ZXY placeholders. I have now also added them in the example above.

https://github.com/bcgov/WetpaddlersV2/pull/39

The examples in the pmtiles repo are working too though. The props object passed to the protocol handler in the pmtiles repo examples has a type property with the value json, in all of my implementations it has the value arrayBuffer. I do not know yet how that is determined.

[micheal-w-wells]

Thank you again for the help and insight!