map.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="fantasyMap" background-color="#000000">

<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" href="script.js"></script>
</svg>

script.js

'use strict';

const svg = document.getElementById('fantasyMap');


const svgBox = svg.getBBox();

let x = svgBox.x, y = svgBox.y;
let zoom = 0;
let isMoving = false;
let startingX, startingY;

svg.addEventListener('mousedown', e => {
	startingX = e.offsetX;
	startingY = e.offsetY;
	isMoving = true;
});

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

svg.addEventListener('mouseup', e => {
	isMoving = false;
});

svg.addEventListener('wheel', e => {
	if (e.deltaY < 0) {
		zoom = clamp(zoom + 1, 0, 10);
		movingMap();
	} else if (e.deltaY > 0) {
		zoom = clamp(zoom - 1, 0, 10);
		movingMap();
	}
})

function movingMap(event){
	let width, height;

	// Zoom of 0 is show the whole thing
	if (zoom == 0) {
		x = svgBox.x;
		y = svgBox.y;
		width  = svgBox.width;
		height = svgBox.height;
	} else {
		// Define how big an area we view on the current zoom.
		width  = svgBox.width / Math.pow(2, zoom);
		height = svgBox.height / Math.pow(2, zoom);

		if (event) {
			// Add the new section of drift
			x += (event.clientX - startingX) / Math.pow(2, 3 + zoom);
			y += (event.clientY - startingY) / Math.pow(2, 3 + zoom);
		}

		// Clamp the values to not overflow the box.
		x = clamp(x, svgBox.x, svgBox.width  - width );
		y = clamp(y, svgBox.y, svgBox.height - height);
	}

	// Write the attribute
	svg.setAttribute('viewBox', [x, y, width, height].join(" "));
}

function clamp(num, min, max) {
	return num <= min ? min : num >= max ? max : num;
}

if ('location' in window) {
	const hash = window.location.hash.substring(1).split('!');
	if (hash.length === 3) {
		[zoom, x, y] = hash.map(x => parseInt(x) || 0);
	}
	window.setInterval(() => window.location.hash = [zoom,x,y].map(Math.round).join('!'), 200);
}

movingMap();