map2

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="fantasyMap" background-color="#000000" viewBox="0 0 2560 1370">

<rect x="0" y="0" width="800" height="600" fill="#820c02"/>
<rect x="0" y="100" width="100" height="100" fill="#924035"/>
<rect x="0" y="200" width="100" height="100" fill="#9374c1"/>
<rect x="0" y="300" width="100" height="100" fill="#3b3e35"/>
<rect x="0" y="500" width="100" height="100" fill="#28fb9c"/>
<rect x="100" y="0" width="100" height="100" fill="#875603"/>
<rect x="100" y="300" width="100" height="100" fill="#458035"/>
<rect x="100" y="500" width="100" height="100" fill="#b4913c"/>
<rect x="200" y="200" width="100" height="100" fill="#105e99"/>
<rect x="300" y="100" width="100" height="100" fill="#6b4170"/>
<rect x="300" y="400" width="100" height="100" fill="#1322bb"/>
<rect x="300" y="500" width="100" height="100" fill="#3f9acd"/>
<rect x="400" y="0" width="100" height="100" fill="#6ff153"/>
<rect x="400" y="100" width="100" height="100" fill="#41b04a"/>
<rect x="400" y="400" width="100" height="100" fill="#eb55bc"/>
<rect x="500" y="100" width="100" height="100" fill="#ec9103"/>
<rect x="600" y="100" width="100" height="100" fill="#de31cb"/>
<rect x="600" y="200" width="100" height="100" fill="#b5bd5c"/>
<rect x="600" y="300" width="100" height="100" fill="#3416d8"/>
<rect x="700" y="100" width="100" height="100" fill="#de3b52"/>
<rect x="700" y="400" width="100" height="100" fill="#cc6e82"/>
<rect x="700" y="500" width="100" height="100" fill="#81fb8b"/>

<script type="text/javascript"><![CDATA[

        var svg = document.getElementById('fantasyMap');
        console.log(1 < 2);

        var selectedElement = false;
        let isMoving = false
        let viewBox = ""
        let zoom = 1
        const SVGWidth = 2560
        const SVGHeight = 1350
        svg.addEventListener('mousedown',e => {
          console.log('mouse clicked')
          startingX = e.offsetX
          startingY = e.offsetY
          isMoving = true

        })
        svg.addEventListener('mousemove',e =>{
          if(isMoving == true){

            const [offsetX, offsetY, width, height] = svg.getAttribute("viewBox").split(" ")
            movingMap(parseInt(startingX,10),parseInt(startingY,10),parseInt(offsetX,10),parseInt(offsetY,10),parseInt(width,10),parseInt(height,10),e)

          }
            svg.addEventListener('mouseup',e => {
            isMoving = false
          })
        })
        svg.addEventListener('wheel',e=> {
        console.log(e)

        })

        function movingMap(startingX,startingY,x,y,width,height,event){
        console.log('input x',x,"input y",y,'input width',width,'input height',height)
        console.log('starting x',startingX,'starting y',startingY)
            x = clamp(x,10,(SVGWidth - width))
            y = clamp(y,10,(SVGHeight - height))
            x += event.clientX - startingX
            y += event.clientY - startingY
            console.log('type Y',typeof(y),y)
            console.log('type x',typeof(x),x)
            <!-- if(!zoom ==1){ -->
            viewBox = ""
            viewBox = [x,y,width,height].join(" ")
            console.log('viewbox',viewBox)
            <!-- } -->
            svg.setAttribute('viewBox',viewBox)
          }
          function clamp(num, min, max) {
            return num <= min ? min : num >= max ? max : num;
          }
        ]]>
  </script>
</svg>