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);

// 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

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,

var trafficMutant = L.gridLayer.googleMutant({
        maxZoom: 24,

var hybridMutant = L.gridLayer.googleMutant({
        maxZoom: 24,

 //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'});

   var baseMaps = {
"Open Street Map": osm,
"OSM B&W":OpenStreetMap_BlackAndWhite,
"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.

enter image description here


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...


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.