Incorporating Ordnance Survey map with other layers in Leaflet

Question

I am trying to incorporate the Ordnance Survey layer into my Leaflet map. The goal is to enable it as another map layer amidst a few existing ones.

One of the code looks like this:

 var link = L.Permalink.getMapLocation();
var map = L.map('map',
{
center: link.center,
zoom: link.zoom
});//.setView([52.53, -0.26], 11);
L.Permalink.setup(map);

// https: also suppported.
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 20
}).addTo(map);;


var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
 });

var trafficMutant = L.gridLayer.googleMutant({
        maxZoom: 24,
        type:'roadmap'
    });
    trafficMutant.addGoogleLayer('TrafficLayer');

var hybridMutant = L.gridLayer.googleMutant({
        maxZoom: 24,
        type:'hybrid'
    });

 //Ordnance Survey map

      var os = L.OSOpenSpace.tilelayer('http://t0.ads.astuntechnology.com/open/osopen/service', {
        layers: 'osopen',
        format: 'image/png',
        maxZoom: 14,
        minZoom: 0,
        continuousWorld: true,
        attribution: 'Astun Data Service &copy; Ordnance Survey.'
        });



    cityfibre = L.layerGroup([Peterboro, Coventry,]).addTo(map);

//layerControl = L.control.layers(null, overlayPane, {position: 'topleft'});
//layerControl.addTo(map);


   var baseMaps = {
"Open Street Map": osm,
"OSM B&W":OpenStreetMap_BlackAndWhite,
"Hybrid":hybridMutant,
"Satellite":googleSat,
"Traffic":trafficMutant,
"Ordnance Survey":os
 };

Unfortunately as a result I am getting only a blank map with OS logo.

I also put another code here https://jsfiddle.net/Krukarius/ywspqdcb/3/. It is based on the working example: http://rob-murray.github.io/os-leaflet/

However, this example shows only 1 layer, in addition binded in:

  function init() {
  }

which is not familiar with my existing layers.

How to pair this layer into existing ones?

At the end I would like to add, that I am aware of the OS api option. I am just waiting for e-mail conformation.

Answer 1

It looks like there is no option to put more than 1 CRS in leaflet unfortunately (as per one answer in comment above). It has been discussed below:

Leaflet proj4leaflet with multiple projections

Alternatively we have to rebuilt our map in another API i.e. OpenLayers...

https://stackoverflow.com/questions/772684/how-can-i-mix-layers-with-different-coordinate-system-in-openlayers