Got rid of the issue by setting bounds on my L.tileLayer.
Here is the new code:
<!doctype html>
<html>
<head>
<title>PROJECT TITLE</title>
<meta charset="utf-8" />
<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=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
</head>
<body style="margin: 0;">
<div id="map" style="width: 100vw; height: 100vh; background: #000000;"></div>
<script>
var bounds = [[-50, 50],[50, -50]];
var map = L.map('map', {
center: [0, 0],
zoom: 2
});
L.tileLayer('map/{z}/{x}/{y}.png', {
bounds: bounds,
attribution: 'SOMETHING SOMETHING',
minZoom: 2,
maxZoom: 5,
tileSize: 256,
noWrap: true
}).addTo(map);
</script>
</body>
</html>
To find the correct values for the boundaries, I created a rectangle to try coordinates:
var bounds = [[-50, 50],[50, -50]];
L.rectangle(bounds, {
color: "#ff7800",
weight: 1
}).addTo(map);
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
