How to use Ordance Survey vector tiles with React-Leaflet?

Question

I'm unsure of the correct syntax to add Ordnance Survey vector tiles to a React-Leaflet application.

The example code at https://labs.os.uk/public/os-data-hub-examples/os-vector-tile-api/vts-3857-basic-map loads some vector tile libraries from Mapbox:

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js"></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>

then uses this JavaScript syntax to load the OS vector tiles:

// Load and display vector tile layer on the map.
var gl = L.mapboxGL({
    style: 'https://api.os.uk/maps/vector/v1/vts/resources/styles?key=' + apiKey,
    transformRequest: url => {
        return {
            url: url += '&srs=3857'
        }
    }
});

(I've verified that my OS api key works in the stand-alone demo.)

How can accomplish the equivalent using React and Leaflet?

I'm using React-Leaflet to add Leaflet functionality to my React app, and I've tried adding react-leaflet-vector-tile-layer - I've verified that this works for vector tile layers supplied by Mapbox Studio:

<VectorTileLayer
  styleUrl="mapbox://styles/my-org/my-style"
  accessToken="my-key"
/>

I'm trying to use this approach for the Ordnance Survey vector tile layer too but it's not working as I probably have the syntax wrong:

<VectorTileLayer
  styleUrl="https://api.os.uk/maps/vector/v1/vts/resources/styles?key=my-key"
/>

No error message is shown but the OS vector tile layer does not appear on the map. In the developer console I can see a PBF file has been downloaded but it doesn't draw on the map. Could this be because I'm missing the transformRequest function in their example? Assuming it's required, how can I add this transformation request when using react-leaflet-vector-tile-layer?

Answer 1

The answer came from Ted Piotrowski, the developer of the react-leaflet-vector-tile-layer library. I needed to add the transformRequest parameter using this syntax:

<VectorTileLayer
  styleUrl="https://api.os.uk/maps/vector/v1/vts/resources/styles?key=my-key"
  transformRequest={url => { return { url: url += '&srs=3857' }}}
/>