I'm encountering an issue with the leaflet map plugin and simple crs. Initially, I used the default CRS and zoom levels 0-6, and everything was working well. However, I needed to utilize pixel coordinates instead of geographical ones, so I switched to Simple CRS designed for that purpose. Unfortunately, my map stopped showing up and displayed a blank page instead. After some research, I discovered that others were starting with max zoom = 20 rather than min zoom = 0. As a result, I adjusted my map to zoom levels 16-20 (eliminating the lower zoom levels). This change allowed my map to function until I tried zooming in further. Zoom levels 16, 17, and 18 were functioning properly, but level 19 appeared blurry, while level 20 showed a blank map. Investigating network traffic revealed that tiles for zoom levels 19 and 20 were not being requested. Attempting to move two levels higher resulted in another blank map, similar to when using zoom levels 0-6. Additionally, when utilizing zoom levels 0-20, levels 0-10 were also not being requested.
Another issue I encountered is the map's inability to zoom in on its right side; instead, it keeps bouncing to the left.
I have tested this in Chrome and Firefox, deciding against bothering with IE since this is a personal project unrelated to IE use.
The entire map can be viewed here
'use strict';
var map = L.map('map', {
minZoom: 16,
maxZoom: 20,
maxNativeZoom: 20,
continuousWorld: true,
reuseTiles: true,
// noWrap: false,
crs: L.CRS.Simple,
});
map.setView([0, 0], 18);
var southWest = map.unproject([0, 16384], map.getMaxZoom());
var northEast = map.unproject([12288, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
L.tileLayer('?img&z={z}&x={x}&y={y}', {
attribution: 'Map data © ???',
}).addTo(map);
var m = {
x: 200,
y: 400
}
var m2 = {
x: 16000,
y: 12000
}
var marker = L.marker(map.unproject([m.x, m.y], map.getMaxZoom())).addTo(map);
var marker = L.marker(map.unproject([m2.x, m2.y], map.getMaxZoom())).addTo(map);
map.on('click', function(event) {
console.log(event.latlng);
});
Could someone assist me with this matter? Thank you in advance.