JSFiddle - React, Tailwind, and code Playground

HTML

<div id="window">
  <img id="map" style="zoom: 0.5; transform: translate(0, 0);" src="https://www.tripsavvy.com/thmb/4ZAqNzgjRpAghhiVtjyMgdGHwc8=/3648x2052/smart/filters:no_upscale()/P4080411WEB-ab2cac6c987246f0b4d0b80bd42c6914.jpg" alt="">
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100vh;
    background: #0f0f0f;
    display: flex;
    justify-content: center;
    align-items: center;
}

#window {
    width: 900px;
    height: 600px;
    overflow: hidden;
}

#map {
    visibility: visible;
}

JavaScript

const _window = document.querySelector('#window');
const map = document.querySelector('#map');

const zoom = +getComputedStyle(map).zoom;

_window.onmousedown = (e) => {
  document.ondragstart = () => false;

  _window.onmousemove = (e) => {
    const
      [ x, y ] = map.style.transform.match(/-?[0-9]*\.?[0-9]+/g),
      newX = +x + e.movementX / zoom,
      newY = +y + e.movementY / zoom;

    map.style.transform = `translate(${newX}px, ${newY}px)`;
  };

  window.onmouseup = (mouseUp) => {
    _window.onmousemove = null;
    _window.onmouseup = null;
    document.ondragstart = null;
    document.body.onselectstart = null;
  };
};