I would like to use tiles in a size of 1024x1024 px. When I open the map and display it in Leaflet, it does not load all the required tiles at different zoom levels. Here is a small example:
As you can see from the different zoom levels, only zoom level 0 is displayed correctly and tiles are missing at the other zoom levels.
Here is my code:
<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
<title>MapViewer</title>
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
</head>
<body style = "height: 100%; margin: 0;">
<div id="map" style="width: 100%; height: 100%; background: #FFFFFF; margin: 0;"></div>
<script type="text/javascript">
var maxZoomLevel = 2;
var map = L.map('map').setView([0, 0], 1);
L.tileLayer('map/{z}/{x}/{y}.jpg', {minZoom: 0,maxZoom: maxZoomLevel,
continuesWorld: false,
noWrap: true,
tileSize: 1024}).addTo(map);
</script>
</body>
</html>
Has anyone had a similar problem?