There is already a map on the wiki that can be panned and zoomed. See here for how it works. Below is the JavaScript that makes it work.
var maps = document.getElementsByClassName("worldmap");
for (var i = 0; i < maps.length; i++) {
var map = maps[i];
It's also found on [lotrminecraftmod.fandom.com/wiki/MediaWiki:Common.js this page]
/* Doesn't work due to missing CORS for image server :-(
getPixel = function(x, y) {
var p = canvas.context.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
return hex;
}
rgbToHex = function(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
var img = document.createElement("img");
img.src = 'vignette.wikia.nocookie.net/lotrminecraftmod/images/7/70/MiddleEarth.png/revision/latest?cb=20150605200727';
img.style.visibility = "hidden";
// document.body.appendChild(img);
var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.style.border = "2px solid red";
canvas.width = img.width;
canvas.height = img.height;
canvas.style.visibility = "hidden";
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
document.body.appendChild(canvas);
alert("debug:" + GetPixel(10, 10));
alert("sucess");
*/
// The current background-position; usually negative
map.offX = -500;
map.offY = -500;
// The position where the dragging was started
map.dragX = 0;
map.dragY = 0;
// The position to which the background will be moved
map.newX = 0;
map.newY = 0;
// The current zoom level. Higher zoom level means bigger map
map.zoom = 1.0;
var MAX_ZOOM = 4.0;
var MIN_ZOOM = 0.2;
var ZOOM_SPEED = 0.1;
// Called when the mouse cursor is pressed down inside the map
var dragStart = function(e) {
e.preventDefault();
map.dragX = e.clientX;
map.dragY = e.clientY;
document.addEventListener("mouseup", dragEnd);
document.addEventListener("mousemove", update);
return false;
}
// Called when the cursor is released anywhere on the screen.
// This event is only triggered after a call of dragStart. It stops the listeners for this event and the update event.
var dragEnd = function(e) {
e.preventDefault();
// If the mouse has not moved, it's no drag but a simple click action
if (map.dragX == e.clientX && map.dragY == e.clientY) {
var x = Math.floor(e.clientX * map.zoom - map.offX);
var y = Math.floor(e.clientY * map.zoom - map.offY);
//alert("Single click at position "+x+"|"+y);
// TODO: Link to biome page
document.removeEventListener("mousemove", update);
document.removeEventListener("mouseup", dragEnd);
return false;
}
map.offX = map.newX;
map.offY = map.newY;
document.removeEventListener("mousemove", update);
document.removeEventListener("mouseup", dragEnd);
return false;
}
// Called whenever the mouse moves while it is dragging the map
var update = function(e) {
map.newX = map.offX + e.clientX - map.dragX;
map.newY = map.offY + e.clientY - map.dragY;
var newpos = map.newX.toString() + "px " + map.newY.toString() + "px";
map.style.backgroundPosition = newpos;
}
// Called whenever the mousewheel is scrolled while the cursor is inside the map
var zoom = function(e) {
e.preventDefault();
// Delta always is a multiple of 3
var delta = e.deltaY / 3;
var old_zoom = map.zoom;
map.zoom -= delta * (map.zoom / 15);
// Apply zoom limits
if (map.zoom < MIN_ZOOM) {
map.zoom = MIN_ZOOM;
return false;
}
if (map.zoom > MAX_ZOOM) {
map.zoom = MAX_ZOOM;
return false;
}
var sizeX = 3200 * map.zoom;
var sizeY = 4000 * map.zoom;
var newsize = "" + sizeX + "px " + sizeY + "px";
map.style.backgroundSize = newsize;
map.offX *= map.zoom / old_zoom;
map.offY *= map.zoom / old_zoom;
map.offX += ZOOM_SPEED * map.zoom * delta * (e.clientX - (map.clientWidth / 2));
map.offY += ZOOM_SPEED * map.zoom * delta * (e.clientY - (map.clientHeight / 2));
var newpos = "" + map.offX + "px " + map.offY + "px";
map.style.backgroundPosition = newpos;
return false;
}
// Start the initial event listeners
map.addEventListener("mousedown", dragStart);
map.addEventListener("wheel", zoom);
}
https://lotrminecraftmod.fandom.com/wiki/MediaWiki:Common.js
Is there any way to make this work together with imagemap?