The tiles of the map are displaying incorrectly when hosted on a web server

I’ve made an interactive map as a third party tool for a video game using the leaflet API. All is working fine on my computer, but when I push my project on my host, the map has some tiling errors.

Here is what it looks like on local

Here is what it looks like on my host

So i’ve stripped down my code to the bare minimum (no more markers, layerGroups…) and the bug persists.

Here is my 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/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.7.1/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 map = L.map('map', {
    center: [0, 0],
    zoom: 2
  });
  L.tileLayer('map/{z}/{x}/{y}.png', {
    attribution: 'SOMETHING SOMETHING',
    minZoom: 2,
    maxZoom: 5,
    tileSize: 256,
    noWrap: true
  }).addTo(map);
  </script>
</body>
</html>

Any help appreciated. Thanks !

47 thoughts on “The tiles of the map are displaying incorrectly when hosted on a web server”