title: leaflet non-geographical map with tilelayer: the map appears to have a vertical offset?
body: <p>In order to maintain a community project I picked up for a gaming community, I'm trying to understand how leaflet is working. In particular, I'm trying to display a non-geographical map using a custom tile service.</p>
  <p>Based on the leaflet documentation and on a series of tutorials and stackoverflow answers, the best I've been able to come up with is the following code. The markers are added to [0,0] and [maxLat, maxLong] to verify if they are aligned with the map (the issue I'm trying to solve on my project is that they are not):</p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
  
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot;
          integrity=&quot;sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==&quot;
          crossorigin=&quot;&quot;/&gt;
      &lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot;
          integrity=&quot;sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==&quot;
          crossorigin=&quot;&quot;&gt;&lt;/script&gt;
      &lt;style&gt;
          #map { height: 1080px; width: 1920px; }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
  
      &lt;script&gt;
          var yx = L.latLng;
  
          var xy = function(x, y) {
          if (L.Util.isArray(x)) {
              return yx(x[1], x[0]);
          }
          return yx(y, x);
          };
  
  
          var minZoom = 0;
          var maxZoom = 7;
          var img = [
              18475,
              12791
          ];
  
          L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
              transformation: new L.Transformation(1 / 128, 0, 1 / 128, 0)
          });
  
          var bounds = [xy(0, 0), xy(img)];
  
          var map = L.map(&quot;map&quot;, {
              attributionControl: false,
              crs: L.CRS.MySimple,
              maxBounds: bounds,
              minZoom: minZoom,
              maxZoom: maxZoom
          });
  
          L.tileLayer('https://d1w6xpzk1h0aj5.cloudfront.net/kuban/{z}/{x}/{y}.png', {
              bounds: bounds,
              noWrap: true,
              minZoom: minZoom,
              maxZoom: maxZoom,
              tms: true,
              continuousWorld: false,
              maxNativeZoom: 7
          }).addTo(map);
  
          map.fitBounds(bounds);
  
          L.marker(L.latLng([ 0, 0 ])).addTo(map);
          L.marker(L.latLng(xy(img))).addTo(map);
      &lt;/script&gt;
      
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>If I open this on my browser, the map is displayed correctly at all zoom levels (i.e. the tiles are provided in the right order and leaflet is stitching them as expected). The problem is that the map is vertically off-center and the markers, though they're perfectly aligned horizontally, have a vertical offset.</p>
  <p>This is precisely the problem I also have on my main project.</p>
  <p>What am I doing wrong and why?</p>