JSFiddle - React, Tailwind, and code Playground

by xerxesnoble

HTML

<div id="mosaicContainer">
    
    <div id="map"></div>
    
</div>

CSS

body{
    margin:0px;
    padding:0px;
    
}

#mosaicContainer{
    width:500px;
    height:500px;
    background: orange;  
    overflow:hidden;
}

#map{
    width: 500px;
    height:500px;
    background: url(http://wiredmoney.co.uk/wp-content/uploads/2013/02/Map.jpg);
    background-size: contain;
}

JavaScript

var self = this;
      var scale = 1;  // scale of the image
      var xLast = 0;  // last x location on the screen
      var yLast = 0;  // last y location on the screen
      var xImage = 0; // last x location on the image
      var yImage = 0; // last y location on the image
var map = document.getElementById("map");
	

      // if mousewheel is moved
      function mouseWheelHandler(e){
          e.preventDefault();
          // find current location on screen
          var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
          var xScreen = e.pageX - $(this).offset().left;
          var yScreen = e.pageY - $(this).offset().top;

          // find current location on the image at the current scale
          xImage = xImage + ((xScreen - xLast) / scale);
          yImage = yImage + ((yScreen - yLast) / scale);
          

          // determine the new scale
          if (delta > 0)
          {
              scale += 0.05;
          }
          else
          {
              scale -= 0.05;
          }

          scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);

          // determine the location on the screen at the new scale
          var xNew = (xScreen - xImage) / scale;
          var yNew = (yScreen - yImage) / scale;

          // save the current screen location
          xLast = xScreen;
          yLast = yScreen;

          // redraw
          map.style.transform = 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')';
          map.style.transformOrigin = xImage + 'px ' + yImage + 'px';

      }

var mapContainer = document.getElementById("mosaicContainer");
mapContainer.addEventListener("mousewheel", mouseWheelHandler, false);