Problem with rendering OS Maps Leisure Layers

[nbarrett]

Problem with rendering OS Maps Leisure Layers

[nbarrett]

For anyone else looking for a solution to this (I've seen a few people asking about this on stack overflow and no responses exist on there), the answer was that I needed to add a custom CRS - I did this in the form of a custom hook useCustomCRSFor27700Projection() which returns a crs value which can be passed into the crs prop of the MapContainer. I've enclosed example code for this hook below which was inspired by the leaflet js + plain html example on the os-maps-api website:

import * as L from "leaflet";
import proj4 from "proj4";

export function useCustomCRSFor27700Projection() {

    const zoom = 7 // could be some changeable app state
    const center = [51.505, -0.09] // could be some changeable app state

    const crs = new L.Proj.CRS("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs", {
        resolutions: [896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75],
        origin: [-238375.0, 1376256.0]
    });

    function transformCoords(input) {
        return proj4("EPSG:27700", "EPSG:4326", input).reverse();
    }


    const options = {
        crs,
        minZoom: 0,
        maxZoom: 8,
        center,
        zoom: zoom,
        maxBounds: [
            transformCoords([-238375.0, 0.0]),
            transformCoords([900000.0, 1376256.0])
        ],
        attributionControl: false
    };


    return {crs, options};
}

With that hook defined, you can then use it the vicinity of your MapContainer usage:

    const useCustomCRS = true // some boolean value that determines whether or not you need the custom crs (might change if you want to choose different projections)
    
    const customCRS = useCustomCRSFor27700Projection();
    const crs = useCustomCRS ? customCRS.crs : L.CRS.EPSG3857;
    const layer = "Leisure_27700";
    const key = "my-api-key";

    return  <div style={{height: '80vh', width: '100%'}}>
            <MapContainer crs={crs}
                          minZoom={customCRS.options.minZoom}
                          maxZoom={customCRS.options.maxZoom}
                          zoom={customCRS.options.zoom} center={customCRS.options.center} scrollWheelZoom={true}
                          style={{height: '100%'}}>
                <TileLayer url={`https://api.os.uk/maps/raster/v1/zxy/${layer}/{z}/{x}/{y}.png?key=${key}`}/>
                </MapContainer>
        </div>;

Example of app now working at: https://oscillation-production.up.railway.app/ - and commit that delivered the above