'Leaflet map - Bottom few rows not loading in map with local tiles

I am new to leaflet and am trying to get a handle on the basics. As I was building my first map with custom tiles, I found that the bottom row (or few rows), at any zoom level, were not loading at all. They are not listed at all in the source code when viewed in a browser, and scrolling past the bottom of the map does not show any console errors. If I do scroll past the left or right of the map though, I do get errors telling me that Leaflet is attempting to load images that do not exist. But I get no errors when trying to scroll past the bottom of the map.

Sample error:

GET file:///C:/Users/carso/Documents/Programming/MapProject/Web/MapImages/0/-1/0.jpg net::ERR_FILE_NOT_FOUND

Many answers online suggest that you need to include the leaflet CSS files, settings some size attributes of ".leaflet-container", or potentially call map.invalidateSize(). I have all both of these with no luck.

I also do not have any HTML elements with any attributes like "text-align" set, as this post describes. My code is very bare-bones.

Please bear with me for the details of exactly how I have things set up right now ...

For this test, I simply have 4 jpg files, each of which is just a white background with black text of the coordinates of the image. They are in folders like this:

/0/0/0.jpg

/0/0/1.jpg

/0/1/0.jpg

/0/1/1.jpg

My understanding is that those folders go: /(ZoomLevel)/(ColumnIndex)/(RowIndex).jpg

Currently, the top two images in the map are displayed ("/0/0/0.jpg" and "/0/1/0.jpg"). Like this:How the map is currently displaying

Here are my sources:

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">
        <title>Map Test</title>
        <link rel="stylesheet" href="main.css">
        <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>
        <div id="map"></div>
        <script src="app.js"></script>
    </body>
</html>

CSS:

#map {
    position: absolute;
    width:100%;
    height: 100%;
}

.leaflet-container {
    width: 100vw;
    height: 100vh;
}

JavaScript:

var map = L.map('map').setView([0,0], 0);

L.tileLayer('./MapImages/{z}/{x}/{y}.jpg', {
        noWrap: true,
        tileSize: 256,
        minZoom: 0,
        maxZoom: 0,
        attribution: <a>Nobody</a>',
    }).addTo(map)
javascripthtmlleaflettile


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions