OpenLayers - OS Leisure Layer

Question

I am trying to add this layer to an OSM with a display projection similar to the other layers, however this code results in a blank pink screen. The grid lines are skewed but no tiles are displayed. Is there a simple fix to allow this layer in the layer switcher?

var osLeisure = new OpenLayers.Layer.XYZ(
"OS Leisure",'https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=' + apiKey, 
{
    type: 'base',
    visible: true,
    view: new ol.View({
        projection: 'EPSG:27700',
        displayProjection: "EPSG:31467",
        transitionEffect: 'resize',
        extent: [ -238375.0, 0.0, 900000.0, 1376256.0 ],
        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 ],
        minZoom: 7,
        maxZoom: 20,
        center: ol.proj.fromLonLat([ -2.968, 54.425 ]),
        zoom: 14
    })
}
);

Answer 1

This code appears to work using OpenLayers 2:

// Register and transform projections
proj4.defs("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"
);
proj4.defs("EPSG:3857",
"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 " +
"+units=m +nadgrids=@null +wktext  +no_defs"
);

OpenLayers.Projection.addTransform("EPSG:3857", "EPSG:27700", 
function(coordinates) {
  return proj4("EPSG:3857", "EPSG:27700").forward(coordinates);
});
OpenLayers.Projection.addTransform("EPSG:27700", "EPSG:3857", 
function(coordinates) {
  return proj4("EPSG:27700", "EPSG:3857").inverse(coordinates); 
});
  
// Create the EPSG:27700 projection object
  var proj27700 = new OpenLayers.Projection("EPSG:27700");
  var proj3857 = new OpenLayers.Projection("EPSG:3857");

  var osLeisure = new OpenLayers.Layer.XYZ(
  "OS Leisure",
  "https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/${z}/${x}/${y}.png? 
 key=APIKEY",
  {
    projection: proj27700,
    displayProjection: proj3857,
    //displayProjection: new OpenLayers.Projection("EPSG:4326"
    units: "m",
    numZoomLevels: 18,
    maxResolution: 896,
    maxExtent: new OpenLayers.Bounds(-238375.0, 0.0, 700000.0, 1376256.0),
    displayOutsideMaxExtent: true,
    tileOrigin: new OpenLayers.LonLat(-238375.0, 1376256.0),
    resolutions: [896, 448, 224, 112, 56, 28, 14, 7, 3.5, 1.75, 0.875],
    transitionEffect: 'resize',
    attribution: 'Contains OS data © Crown copyright and database 
    rights 2025 <a href=//www.ordnancesurvey.co.uk>UK Ordnance 
    Survey</a>',
    }
    );  

Answer 2

Base your code on the OS examples - see https://labs.os.uk/public/os-data-hub-examples/os-maps-api/zxy-example-change-style#openlayers for adding a layer switcher. You cannot mix Openlayers 2 code with later versions or reproject tiles with it. This will display OS Leisure and OSM in an OpenLayers 10 EPSG:31467 view:

proj4.defs("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");
proj4.defs("EPSG:31467", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +towgs84=612.4,77,440.2,-0.054,0.057,-2.797,2.55 +units=m +no_defs +type=crs");
ol.proj.proj4.register(proj4);

const tilegrid = new ol.tilegrid.TileGrid({
    resolutions: [ 896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75 ],
    extent: [ -238375.0, 0.0, 900000.0, 1376256.0 ],
});

const map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            title: 'OS Leisure',
            type: 'base',
            source: new ol.source.XYZ({
                url: 'https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=' + apiKey,
                projection: 'EPSG:27700',
                tileGrid: tilegrid
            })
        }),
        new ol.layer.Tile({
            title: 'OpenStreetMap',
            type: 'base',
            visible: false,
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        projection: 'EPSG:31467',
        center: ol.proj.fromLonLat([ -2.968, 54.425 ], 'EPSG:31467'),
        zoom: 14
    })
});

// Add layer switcher control to the map.
const layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);