I have just started out with Leaflet, and I wanted to make a map for a game I play (GTA V)
I have all the necessary tiles for building a map. However, when I run my code, only 2 tiles show up, that have 0 as their y coordinate.
My code:
Javascript:
const map = L.map('map', {}).setView([0.0, 0.0], 0);
const tile = L.tileLayer('tiles/minimap_sea_{y}_{x}.png', {
minZoom: 0,
maxZoom: 2,
tileSize: 1024,
bounds: [[0, 0],[3072, 2048]],
maxNativeZoom: 0,
minNativeZoom: 0,
noWrap: true
}).addTo(map);
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<link rel="stylesheet" href="style.css">
<script src="./script.js" type="text/javascript" defer></script>
<title>Test Map</title>
</head>
<body>
<div id="map"></div>
</body>
</html>
CSS:
body {
margin: 0;
height: 100vh;
width: 100vw;
}
#map {
width: 100%;
height: 100%;
background-color: #888888;
}
Tile picture names:
minimap_sea_0_0.png
minimap_sea_0_1.png
minimap_sea_1_0.png
minimap_sea_1_1.png
minimap_sea_2_0.png
minimap_sea_2_1.png
I have already tried setting the bounds but that did not work either.
Solution:
I specified the coordinate system to be simple at map creation, and negated the y length of my bounds.
New code:
Javascript:
const map = L.map('map', {
crs: L.CRS.Simple
}).setView([0.0, 0.0], 0);
const tile = L.tileLayer('tiles/minimap_sea_{y}_{x}.png', {
minZoom: 0,
maxZoom: 2,
tileSize: 1024,
bounds: [[0, 0],[-3072, 2048]],
maxNativeZoom: 0,
minNativeZoom: 0,
tms: true
}).addTo(map);