Fantasy Map: How to Connect Multiple Two-Point Routes? - html

Question

I'm an absolute beginner - that's why I need to ask my question here although I think it's absolutely easily to solve for some of you but: I've not found an answer anywhere online. So heres my "project":
I created a fantasy map using photoshop and now want to use this map to create multiple two-point lines in between different cities. Think of it like a airline destination map, where you can see the departure and arrival airport on a map, and both points connected with a line. Right now, I thought that I can do this by embedding my map .jpg on a html site and then I create a database (with excel) where I specify the name of a city and its coordinates on the image. Afterwards, I thought I can use these data to create those lines between two cities using maybe another database with different origins and destinations on the map. But I now notice, that I need to understand if this all is practicable or a completely wrong approach and how this could be done.
For the two-points on a map connection thingy, I read that there are many solutions for G'maps, but I haven't found a solution for a fantasy map project, yet and am unable to convert those G'map codes to a simple image file.
If you think this can be done and does not need too advanced skills, please let me know.
Anyways, thanks in advance for your help and time,
J.

Answer 1

As this is a 'beginner' project I would suggest using Javascript alongside HTML/CSS. If required, later on setting everything up through a database or other outside source.
The idea in this snippet is to have the map, measure up its width and height (a plastic ruler will do!) and the x, y coordinates of the various places and put the map in the site as an img with a canvas overlaid.
The positioning of the places is made relative to the actual dimensions of the img on the screen, and the places joined by using canvas stroke to draw the lines.
The whole is put inside a function which is called on each resize.
function init() {
const mapW = 300; // width of the map when you measured it (the units you used don't matter as long a you use the same ones for all the measurements)
const mapH = 192; // the height of the map when you measured it (the units you used don't matter)
const places = [{
"name": 'Never Winter Wood',
"x": 125,
"y": 40
}, {
"name": 'Star Mounts',
"x": 165,
"y": 50
}, {
"name": 'Cormanthor',
"x": 275,
"y": 105
}];
const routes = [{
"start": 'Never Winter Wood',
"end": 'Star Mounts'
}, {
"start": 'Cormanthor',
"end": 'Never Winter Wood'
}]
function getPlace(name) {
let result = '';
places.forEach(place => {
if (place.name == name) {
result = place;
}
});
return result;
}
const container = document.querySelector('.container');
const map = document.querySelector('.map');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const h = map.offsetHeight;
const w = h * mapW / mapH;
canvas.width = w;
canvas.height = h;
container.style.width = w + 'px';
container.style.height = h + 'px';
const scale = w / mapW;
function myMoveTo(place) {
ctx.moveTo(scale * place.x, scale * place.y);
}
function myLineTo(place) {
ctx.lineTo(scale * place.x, scale * place.y);
}
routes.forEach(route => {
const place1 = getPlace(route.start);
const place2 = getPlace(route.end);
ctx.lineWidth = 1;
ctx.beginPath();
myMoveTo(place1);
myLineTo(place2);
ctx.stroke();
});
}
window.onresize = init;
init();
.container {
height: 100vh;
position: relative;
}
.map {
height: 100vh;
width: auto;
position: relative;
display: inline-block;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<img class="map" src="https://i.stack.imgur.com/PGdKQ.jpg">
<canvas></canvas>
</div>