In the rastercoords leaflet, how do I fix the coordinates of the tiles?

Question

I have a problem that cannot find a solution. I'm generating tiles from a png image, these tiles are generated by gdal2tiles and I need this generated map to be in the same total dimension as a normal platecarree map. The biggest problem is that I can't adjust the tiles to place Shapefiles on top.

/* global L */ (function (window) { function init(mapid) { var minZoom = 2; var maxZoom = 7; var img = [ 1550, // original width of imagekarta.jpg` 1377, // original height of image ];

// create the map
var map = L.map(mapid, {
  crs: L.CRS.Simple,
  minZoom: minZoom,
  maxZoom: maxZoom,
});

// assign map and image dimensions
var rc = new L.RasterCoords(map, img);

// set the view on a marker ...
map.setView(rc.unproject([968, 800]), 2);

// add layer control object
L.control
  .layers(
    {},
    {
    }
  )
  .addTo(map);`

` // the tile layer containing the image generated with gdal2tiles --leaflet ... L.tileLayer("./tiles/{z}/{x}/{y}.png", { noWrap: true, attribution: "True Color", opacity: "0.6", maxNativeZoom: rc.zoomLevel(), }).addTo(map);

var popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
}

map.on("click", onMapClick);

}`

init("map"); })(window);\

Arrange the teams in the right coordinates which are min_lat, max_lat = -60.0, 60.0 min_lon, max_lon = -140.0, -5.0 which is contained in the total image and was then transformed into tiles. And place a shapefile correctly aligned with the continents.