CODEWITHSUNDEEP
leaflet
0324bence
0324bence

Reputation: 33

Leaflet only renders tiles with 0 y coordinate for game map

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);

Upvotes: 2

Views: 944

Answers (2)

ghybs
ghybs

Reputation: 53185

If you make a map not covering a ~sphere (like the Earth), make sure to specify L.CRS.Simple in the map crs option:

A simple CRS that maps longitude and latitude into x and y directly. May be used for maps of flat surfaces (e.g. game maps).

const map = L.map('map', {
  crs: L.CRS.Simple
}).setView([0.0, 0.0], 0);

Otherwise at zoom 0, max and min latitudes of default EPSG3857 CRS will clamp to 256px height, 512px at zoom 1, and 1024px at zoom 2, therefore still within your y = 0 tile (1024px size).

See also the Leaflet tutorial covering this case: Non-geographical maps

Upvotes: 1

Seth Lutske
Seth Lutske

Reputation: 10686

This is probably related to leaflet confusing the zoom with the y value. I recommend following the standard slippymap tile structure. The tiles need to be in a directory structure that follows a zoom/x/y pattern. It looks like you only have one zoom layer (as far as I can tell). Lets say its zoom level 0. Your tiles should be organized like this:

/myproj
  myjavascriptfile.js
  /tiles
    /0
      /0
         0.png
         1.png
      /1
         0.png
         1.png
      /2
         0.png
         1.png

Now you can tell the tilelayer where to find these like this:

const tile = L.tileLayer('tiles/{z}/{y}/{x}.png')

I highly recommend checking out this article on naming map tiles.

Upvotes: 0

Related Questions