Skip to content

Instantly share code, notes, and snippets.

@javajawa
Forked from Dherman3607/map2
Last active May 4, 2020 22:40
Show Gist options
  • Save javajawa/0e7a49c2923bc95cf79faf89c0707336 to your computer and use it in GitHub Desktop.
Save javajawa/0e7a49c2923bc95cf79faf89c0707336 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<?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>
'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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment