JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Will To Live Map</title>
  <meta name="description" content="Map Live">
  <meta name="author" content="Krypton">

  <link rel="stylesheet" href="styles.css?v=1.0">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
	<div class="map-live ui-widget-content" id="map-live">
		<div class="point"></div>
	</div>
</body>
	<script src="scripts.js"></script>
</html>

CSS

body {
	margin: 0;
	overflow: hidden;
}

.map-live {
	position: absolute;
	z-index: 9;
	background-image: url(https://i.ibb.co/d2y5G1y/map.jpg);
	width: 222px;
	height: 222px;
  	transition: all 0.2s linear;
}

.point {
	position: absolute;
	left: 2.477565353101834vh;
	top: 2.477565353101834vh;
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50%;
}

JavaScript

$('.map-live').css('width',  "928px");
$('.map-live').css('height', "928px");
$('.map-live').css('background-size', "100%");
$('.map-live').bind('mousewheel DOMMouseScroll', function(event) {
	var divSize = $('.map-live').css('width');
	console.log(divSize);
	divSize = divSize.replace('px','')
	divSize = parseInt(divSize);
	console.log("oldSize: "+divSize);
    var delta_px = event.originalEvent.wheelDelta > 0 ? (divSize + (divSize * 0.15)) : (divSize - (divSize * 0.15));
    console.log("NewSize: " + delta_px);
    $(this).css('width', delta_px + "px");
    $(this).css('height', delta_px + "px");
    $(this).css('background-size', "100%");

    UpdatePoints();
});

$( function() {
    $( "#map-live" ).draggable();
  } );

document.getElementById('map-live').addEventListener('click', printPosition)

function getPosition(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  return {
    x,
    y
  }
}

function printPosition(e) {
  var position = getPosition(e);
  console.log('X: ' + position.x + ' Y: ' + position.y);
  var divX = parseInt($('.map-live').css('width').replace('px',''));
  var divY = parseInt($('.map-live').css('height').replace('px',''));
  var vhX = (position.x / divX) * 100;
  var vhY = (position.y / divY) * 100;
  console.log('vhX: ' + vhX + ' vhY: ' + vhY);
}

function UpdatePoints(){
	$('.point').css('top', '2.477565353101834vh');
    $('.point').css('left', '2.477565353101834vh');
    $('.point').css('position', 'absolute');
}