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