title: How to use leaflet for image viewing and reloading images at zoom
body: <p>I need to built an image viewer which reloads images at every zoom level, to not load really large images, and also retain the sharpness of the image. See this example: <a href="https://www.rijksmuseum.nl/nl/rijksstudio/kunstenaars/rembrandt-van-rijn/objecten#/SK-C-5,0" rel="nofollow noreferrer">https://www.rijksmuseum.nl/nl/rijksstudio/kunstenaars/rembrandt-van-rijn/objecten#/SK-C-5,0</a></p>
  
  <p>I did some research and found out I can use leaflet.js for this. I initially load the 1024x1024 image and when I zoom in leaflet.js needs to load 4 new images that make up the whole image. Zooming in again and you get the same.</p>
  
  <p>The problem is that I don't get it to work. I have the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var map = L.map('image-map', {
    maxZoom: 20,
    minZoom: 20,
    crs: L.CRS.Simple
  }).setView([0, 0], 20);
  
  
  
  var southWest = map.unproject([0, 1024], map.getMaxZoom());
  var northEast = map.unproject([1024, 0], map.getMaxZoom());
  map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
  
  L.tileLayer('/map-tiles/map_{x}_{y}.jpg', {
  
  }).addTo(map);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#image-map {
    border: 1px solid black;
    height: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin=""/&gt;
  &lt;script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
    crossorigin=""&gt;&lt;/script&gt;
  
  
  
  &lt;div id="image-map"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But for some reason nothing gets loaded now. I use this link as an example: <a href="http://omarriott.com/aux/leaflet-js-non-geographical-imagery/#using-the-tiles-in-leaflet" rel="nofollow noreferrer">http://omarriott.com/aux/leaflet-js-non-geographical-imagery/#using-the-tiles-in-leaflet</a></p>
  
  <p>Does anyone know how to fix this issue or another way to implement this? </p>
  
  <p>EDIT: I found this link: <a href="https://medium.com/@jarednielsen/how-to-make-an-interactive-story-map-using-leaflet-and-non-geographical-images-821f49ff3b0d" rel="nofollow noreferrer">https://medium.com/@jarednielsen/how-to-make-an-interactive-story-map-using-leaflet-and-non-geographical-images-821f49ff3b0d</a> </p>
  
  <p>It has the same functionality that I want. Also the source JS files are very clear, and is very useful to figure out. I will try this myself and I hope that I can make this work.</p>