JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="toolContainer">
  <div class="toolMenu">
  <div id="toolMenuReset" class="toolMenuItem inline">Reset View</div>
  <div id="toolMenuShips" class="toolMenuItem inline">Ships</div>
  <div id="toolMenuWUS" class="toolMenuItem inline">Western US</div>
  <div id="toolMenuEUS" class="toolMenuItem inline">Eastern US</div>
  <div id="toolMenuHawaii" class="toolMenuItem inline">Hawaii</div>
  <div id="toolMenuAlaska" class="toolMenuItem inline">Alaska</div>
  <div id="toolMenuGermany" class="toolMenuItem inline">Germany</div>
  <div id="toolMenuJapan" class="toolMenuItem inline">Japan</div>
</div>

<div id="worldWindow">

  <img ondragstart="return false" id="dragMap" src="http://falconwood.us/wolfy/jordanjunk/smallWorld.svg"/>
</div>
<input type="button" id="zoomout" class="zoomButton" value="Zoom out">
<input type="button" id="zoomin" class="zoomButton" value="Zoom in">

</div>

CSS

.inline {
  display: inline-block;
}
.toolContainer{
  font-family: sans-serif;
}
.toolMenu {
    margin-left: calc(50% - 340px);
    margin-bottom: -30px;
    z-index: 2;
    position: relative;
}
.toolMenuItem {
  background: #003149b8;
  border: 2px solid #005780;
  color: white;
  padding: 4px 8px;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  border-radius: 2px;
}

.toolMenuItem:hover {
  background: #c5611a;
  border: 2px solid #c5611a;
}

#dragMap {
  cursor: move;
  position: relative;
  width: 100%;
  height: auto;
}

#worldWindow {
  overflow: hidden;
  background: url('http://falconwood.us/wolfy/jordanjunk/graph-paper.svg');
  height: 500px;
  width: 100%;
  box-shadow: inset 0 0 50px #fff;
}

.zoomButton {
  width: 200px;
  height: 50px;
}

JavaScript

var img_ele = null,
  x_cursor = 0,
  y_cursor = 0,
  x_img_ele = 0,
  y_img_ele = 0;

function zoom(zoomincrement) {
  img_ele = document.getElementById('dragMap');
  var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
  img_ele.style.width = (pre_width * zoomincrement) + 'px';
  img_ele.style.height = (pre_height * zoomincrement) + 'px';
  img_ele = null;
}

document.getElementById('zoomout').addEventListener('click', function() {
  zoom(0.5);
});
document.getElementById('zoomin').addEventListener('click', function() {
  zoom(2);
});

function start_drag() {
  img_ele = this;
  x_img_ele = window.event.clientX - document.getElementById('dragMap').offsetLeft;
  y_img_ele = window.event.clientY - document.getElementById('dragMap').offsetTop;

}

function stop_drag() {
  img_ele = null;
}

function while_drag() {
  var x_cursor = window.event.clientX;
  var y_cursor = window.event.clientY;
  if (img_ele !== null) {
    img_ele.style.left = (x_cursor - x_img_ele) + 'px';
    img_ele.style.top = ( window.event.clientY - y_img_ele) + 'px';

      console.log(img_ele.style.left+' - '+img_ele.style.top);

  }
}

document.getElementById('dragMap').addEventListener('mousedown', start_drag);
document.getElementById('worldWindow').addEventListener('mousemove', while_drag);
document.getElementById('worldWindow').addEventListener('mouseup', stop_drag);