projection and tile information: large zoom

by Leo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<body>
<div id="map" ></div>
</body>

CSS

html, body, #map {
        margin: 0;
        width: 100%;
        height: 100%;
}

img.leaflet-tile, img.leaflet-tile-loaded
{
  border: solid black 1px;
}

.leaflet-container
{
   cursor: default;
}

JavaScript

proj4.defs([
  [
    'EPSG:4326',
    '+proj=longlat +datum=WGS84 +no_defs'],
  [
    'EPSG:3857',
    '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'
  ],
  [
    'EPSG:3395',
    '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'
  ]
]);



var map = new L.Map('map', {
                center: new L.LatLng(56.010569, 92.852545),
                zoom: 16
            });
            
            
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);


let simpleMarker = L.marker([56.011506157903554, 92.84790515899658]);

var simplelLine = L.polyline( [ [56.00967081729553, 92.84741163253786], [56.00861515705454, 92.84942865371706] ], { strokeColor: 'red',  fillOpacity: 0.2, "nonBubblingEvents": []});


var simplePolygon = L.polygon( [ 
     [56.016136106860394, 92.84676790237428], 
     [56.016136106860394, 92.84945011138917],
     [56.01438494790049,  92.84945011138917],
     [56.01438494790049, 92.84676790237428] 
   ], 
   { strokeColor: 'red',  fillOpacity: 0.2, "nonBubblingEvents": []}
);

let markerAtTheCross = L.marker([56.013737238856876, 92.83998727798463]);

var largePolygon = L.polygon( [ 
     [56.01413306234081, 92.85595178604126], 
     [56.01413306234081, 92.8680620162964],
     [56.00718757062242, 92.8680620162964],
     [56.00718757062242, 92.85595178604126] 
   ], 
   { strokeColor: 'red',  fillOpacity: 0.2, "nonBubblingEvents": []}
);

 
 


map.addLayer(simpleMarker);
map.addLayer(simplelLine);
map.addLayer(simplePolygon);
map.addLayer(largePolygon);




function toTile(xy, zoom, minX, maxX, minY, maxY)
{
    let x = xy.x;
    let y = xy.y;
    let scale = Math.pow(2, zoom);
    let worldWidth = maxX - minX;
    let worldHeight = maxY - minY;
    let tileSizeX = worldWidth / scale;
    let tileSizeY = worldHeight / scale;
    let tileX =...