JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<figure data-media-type="image">





  <div id="js-deepzoom-1545329096195871102" class="quire-deepzoom-entry inset" alt="" aria-live="polite" role="application" aria-label="Zoomable image" data-catalogue-entry="true" data-image="http://gettylabs.org/quire/latest/img/morisot.jpg">
  </div>
  <img style="display: none" src="http://gettylabs.org/quire/latest/img/morisot.jpg" alt="" />






  <div class="quire-image-control quire-image-info">
    <span class="quire-image-info__wrap">
        <span class="quire-image-info__caption"></span>
    <span class="quire-image-info__credit">Image courtesy of Cleveland Museum of Art</span>
    </span>
  </div>


  <a href="http://gettylabs.org/quire/latest/img/morisot.jpg" target="_blank" class="remove-from-epub quire-image-control quire-image-control--download" title="Download image" download>
<svg class="remove-from-epub">
  <switch>
    <use xlink:href="#download-icon"></use>
    <foreignObject width="32" height="32">
        <img class="remove-from-epub" src="//localhost:1313/img/icons/download.png" alt="" />
    </foreignObject>
  </switch>
</svg>
<span class="visually-hidden">Download image</span>
</a>

</figure>






<figure data-media-type="image">





  <div id="js-deepzoom-1545329096195964182" class="quire-deepzoom-entry inset" alt="" aria-live="polite" role="application" aria-label="Zoomable image" data-catalogue-entry="true" data-image="http://gettylabs.org/quire/latest/img/morisot.jpg">
  </div>
  <img style="display: none" src="http://gettylabs.org/quire/latest/img/morisot.jpg" alt="" />






  <div class="quire-image-control quire-image-info">
    <span class="quire-image-info__wrap">
        <span class="quire-image-info__caption"></span>
    <span class="quire-image-info__credit">Image courtesy of Cleveland Museum of Art</span>
    </span>
  </div>


  <a href="http://gettylabs.org/quire/latest/img/morisot.jpg"...

CSS

.quire-deepzoom-entry {
  height: 300px;
}

JavaScript

let image = new Image()
      image.src = imageURL
      imgHeight = image.naturalHeight
      imgWidth = image.naturalWidth
      center = [0, 0]
      defaultZoom = 0
      map = createMap()
      if ($(`#${this.el}`).data('catalogue-entry') === undefined) {
        window.mapID = this.map
      }
      mapSize = map.getSize()
      imgZoomReduction = imgWidth >= 4000 ? 0.5 : imgHeight >= 2500 ? 1 : 2
      maxzoom = Math.ceil(Math.log((mapSize.x / imgWidth > mapSize.y / imgHeight ? imgWidth / mapSize.x : imgHeight / mapSize.y)) / Math.log(2))
      southWest = map.unproject([0, imgHeight], maxzoom + 1)
      northEast = map.unproject([imgWidth, 0], maxzoom + 1)
      let bounds = new L.LatLngBounds(this.southWest, this.northEast)
      console.table(this.map.getMaxZoom())
      this.addTiles(bounds)