add react-leaflet documentation

[jrhizor]

I imagine many new users for PMTiles on Leaflet these days are using React.

It took me a bit of time to figure out how to set up reading mvt files in react-leaflet but it turned out to be kind of simple. I'd appreciate if you added an example to https://protomaps.com/docs/frontends/leaflet that works with the CDN setup in the docs to save other new users some time.

Here's what I ended up with:

npm install react-leaflet protomaps 
npm install --save-dev @types/react-leaflet

and

import React from "react"
import {MapContainer, useMap} from "react-leaflet";
import {leafletLayer} from "protomaps";

function MapLoader() {
    const map = useMap();

    const layer = leafletLayer({url:'https://CLOUDFLARE_SUBDOMAIN/FILENAME/{z}/{x}/{y}.mvt'});
    layer.addTo(map);

    return null;
}

const MyMap: React.FC = () => {
    return (
        <MapContainer
            center={[0, 0]}
            zoom={14}
            scrollWheelZoom={true}
            style={{height: "500px", width: "500px"}}
        >
            <MapLoader />
        </MapContainer>
    );
}

export default MyMap

[bdon]

Thanks for the example! I'm reluctant to add this because whilereact-leaflet , react-map-gl etc are popular they are only relevant to Leaflet/MapLibre and not anything protomaps or vector tile related directly. So most users would be better served by consulting separate documentation for frameworks that wrap leaflet or maplibre.