Wrong coordinates of mapproxy TMS in Leaflet 0.7

Question

My problem is similar to this question. The coordinates of my Mapproxy cache are wrong: Greenwich has latitude 180 instead of 0. See the picture below. The option tms: true was used as you may see from the code, but the boundaries of the map are still wrong. What should I do to have correct coordinates of the cache?

import L from 'leaflet';

class MapController {
constructor(Map, $window, intercom) {
    'ngInject';


this.$window = $window;
this.Map = Map;
this.intercom = intercom;

this.Map.status = "opened";

// Закрытие окна карты при закрытии окна приложения
this.$window.onunload = () => {
this.Map.status = null;
};

this.intercom.on('map-event', this.mapEventHandler.bind(this));

var osm = L.tileLayer('http://gdb-dev:8080/mapproxy/tms/1.0.0/OSM_4326/EPSG4326/{z}/{x}/{y}.png', {tms: true});
var bing = L.tileLayer('http://gdb-dev:8080/mapproxy/tms/1.0.0/Bing/EPSG4326/{z}/{x}/{y}.png', {tms: true,continuousWorld: true});
var googlemercator = L.tileLayer('http://bankrl:8080/mapproxy/tms/1.0.0/Google-mercator/EPSG900913/{z}/{x}/{y}.png', {tms: true });


let map = new L.map('map', {
  layers: [osm, bing, googlemercator]
});
this.map = map;

map.on('load', () => {
console.log('Map is ready!');
this.Map.status = 'ready';
this.intercom.emit('map-ready', {message: "Hello!"});
});

osm.addTo(map);

var baseMaps = {
    "OSM" : osm,
    "BING" : bing,
    "Google-mercator" : googlemercator
};


L.control.layers(baseMaps).addTo(map);

L.control.mousePosition().addTo(map);

map.fitBounds([
    [-180.0, -90.0],
    [180.0, 90.0]
]);

map.setView(map.getBounds().getCenter(), 1);


}

}

export default MapController;

Answer 1

You should be initializing your leaflet map with the EPSG:4326 CRS. e.g.:

let map = L.map('map', {
   layers: [osm, bing, googlemercator],
   crs: L.CRS.EPSG4326
})

If you don't do that, the tile ranges and tile numbering algorithms will assume a EPSG:3857 CRS, which is why your world is wrapping before it should.

Also, do NOT mix tile layers in EPSG:4326 with tile layers in EPSG:3857. Leaflet can not perform raster reprojections, nor it can change the map's CRS on the fly.