Leaflet - Tiled map shifted - python-2.7

Question

I have two maps: A tiled satellite map from OpenMapTiles, which is stored locally and displayed in the background. I'd like to display another map above that. At the moment it consists of a simple world map, which I created in Python with mpl_toolkits.basemap and then split into tiles with gdal2tiles.py (later I would like to limit the overlay map to certain regions like USA). But if I display both maps on top of each other, they do not cover the same area (see below).
Shifted map after displaying it with Leaflet
Unfortunately I don't know anything about Leaflet except the tutorials. I have been looking for a solution for over a week and don't even have a clue what it could be. I really would appreciate your help.
The Python script:
# -*- coding: utf-8 -*-
import os
import math
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.basemap import Basemap
import subprocess # to execute shell commands
# Import settings
from settings import *
# 1. CREATE A BASEMAP
width = 4800
height = 4800
dpi = 120
plt.figure( figsize=(width/dpi, height/dpi) )
map = Basemap( projection='merc', resolution='c',
lat_0=51., lon_0=10.,
llcrnrlat=-85.051, urcrnrlat=85.051,
llcrnrlon=-180.000, urcrnrlon=180.000
)
map.fillcontinents(color='coral')
# Save the image
plt.axis('off')
filename = os.path.join(fileSettings.oPath, fileSettings.oFile)
plt.savefig( filename, dpi=float(dpi),
transparent=True,
bbox_inches='tight', pad_inches=0
)
# Call map tile generator
dirname = os.path.join(fileSettings.oPath, "tiles")
subprocess.check_output( "rm -rf " + dirname,
stderr=subprocess.STDOUT,
shell=True,
)
tilesize = 256
minZoom = 0
#maxZoom = 4
maxZoom = int(math.ceil( np.log2(max(width, height)/tilesize) )) # math.ceil: round up
try:
subprocess.check_output( "helpers/mapTileGenerator/gdal2tiles.py --leaflet --profile=raster --zoom=" + str(minZoom) + "-" + str(maxZoom) + " " + filename + " " + dirname,
stderr=subprocess.STDOUT,
shell=True,
)
print("Ready.")
except subprocess.CalledProcessError as e:
print("Error {}: {}".format(e.returncode, e.output))
The .js file:
var map;
function initMap() {
// Define zoom settings
var minZoom = 0, // The smallest zoom level.
maxZoom = 4, // The biggest zoom level.
zoomDelta = 1, // How many zoom levels to zoom in/out when using the zoom buttons or the +/- keys on the keyboard.
zoomSnap = 0; // Fractional zoom, e.g. if you set a value of 0.25, the valid zoom levels of the map will be 0, 0.25, 0.5, 0.75, 1., and so on.
// Example for locally stored map tiles:
var openMapTilesLocation = 'openMapTiles/tiles/{z}/{x}/{y}.png'; // Location of the map tiles.
var openMapTilesAttribution = 'Map data © OpenMapTiles Satellite contributors'; // Appropriate reference to the source of the map tiles.
// Example for including our self-created map tiles:
var myMapLocation = 'tiles/map/{z}/{x}/{y}.png'; // Location of the map tiles.
var myMapAttribution = 'Map data © ... contributors'; // Appropriate reference to the source of the tiles.
// Ceate two base layers
var satellite = L.tileLayer(openMapTilesLocation, { attribution: openMapTilesAttribution }),
myMap = L.tileLayer(myMapLocation, { attribution: myMapAttribution });
// Add the default layers to the map
map = L.map('map', { minZoom: minZoom,
maxZoom: maxZoom,
zoomDelta: zoomDelta, zoomSnap: zoomSnap,
crs: L.CRS.EPSG3857,
layers: [satellite, myMap], // Layers that are displayed at startup.
}
);
// Set the start position and zoom level
var startPosition = new L.LatLng(51., 10.); // The geographical centre of the map (latitude and longitude of the point).
map.setView(startPosition, maxZoom);
// Next, we’ll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key sets the text for the layer in the control (e.g. “Satellite”), while the corresponding value is a reference to the layer (e.g. satellite).
var baseMaps = {
"Satellite": satellite,
};
var overlayMaps = {
"MyMap": myMap,
};
// Now, all that’s left to do is to create a Layers Control and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object.
L.control.layers(baseMaps, overlayMaps).addTo(map);
}