changed to leaflet for real map
Signed-off-by: Pascal Syma <pascal@syma.dev>
This commit is contained in:
+98
-76
@@ -8,6 +8,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Editor</title>
|
||||
<link crossorigin="" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||
rel="stylesheet"/>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
@@ -19,16 +22,26 @@
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
}
|
||||
|
||||
div {
|
||||
#st {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
margin: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 80%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<script crossorigin=""
|
||||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" rel="stylesheet"/>
|
||||
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div id="st">
|
||||
<table id="stops">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -41,17 +54,27 @@
|
||||
</table>
|
||||
<label><textarea id="inp" rows="3"></textarea></label>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
let route;
|
||||
Number.prototype.mod = function (n) {
|
||||
return ((this % n) + n) % n;
|
||||
};
|
||||
let stops = [];
|
||||
let i = 0;
|
||||
let canvas = document.getElementById("canvas");
|
||||
canvas.focus()
|
||||
let ctx = canvas.getContext("2d");
|
||||
let map = L.map('map').setView([53.01839765015724, 8.636455535888674], 12);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
let line = L.polyline([], {
|
||||
color: '#000',
|
||||
weight: 3
|
||||
}).addTo(map)
|
||||
|
||||
|
||||
let plan, p, a;
|
||||
|
||||
|
||||
let tbl = document.getElementById("stops");
|
||||
let inp = document.getElementById("inp");
|
||||
@@ -67,69 +90,85 @@
|
||||
})
|
||||
inp.value = ''
|
||||
i = 0;
|
||||
canvas.focus();
|
||||
draw()
|
||||
})
|
||||
let map = new Image();
|
||||
map.onload = () => {
|
||||
canvas.width = map.width;
|
||||
canvas.height = map.height
|
||||
draw()
|
||||
|
||||
canvas.addEventListener('contextmenu', ev => {
|
||||
// right
|
||||
ev.preventDefault();
|
||||
stops.splice(i, 0, {
|
||||
name: null,
|
||||
x: ev.offsetX,
|
||||
y: ev.offsetY
|
||||
draw()
|
||||
|
||||
map.on('contextmenu', ev => {
|
||||
// right
|
||||
|
||||
stops.splice(i, 0, {
|
||||
name: null,
|
||||
x: ev.latlng.lat,
|
||||
y: ev.latlng.lng
|
||||
})
|
||||
|
||||
i = (i + 1).mod(stops.length)
|
||||
draw();
|
||||
return false;
|
||||
}, false);
|
||||
|
||||
map.on('click', ev => {
|
||||
// left
|
||||
|
||||
stops[i].x = ev.latlng.lat
|
||||
stops[i].y = ev.latlng.lng
|
||||
|
||||
if (stops[i].marker)
|
||||
stops[i].marker.setLatLng(ev.latlng)
|
||||
else if (stops[i].name)
|
||||
stops[i].marker = L.marker(ev.latlng).addTo(map)
|
||||
|
||||
|
||||
i = (i + 1).mod(stops.length)
|
||||
draw();
|
||||
return false;
|
||||
}, false);
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.which === 38) {
|
||||
// up
|
||||
i = (i - 1).mod(stops.length)
|
||||
draw()
|
||||
e.preventDefault()
|
||||
} else if (e.which === 40) {
|
||||
// down
|
||||
i = (i + 1).mod(stops.length)
|
||||
draw()
|
||||
e.preventDefault()
|
||||
} else if (e.which === 13) {
|
||||
// enter
|
||||
let output = stops.map(s => `${s.x},${s.y}` + (s.name ? `,,${s.name}` : '')).join('\n')
|
||||
|
||||
// console.log(output)
|
||||
|
||||
|
||||
let out = a._selectedRoute.coordinates.map(c => `${c.lat},${c.lng}`)
|
||||
a._selectedRoute.waypointIndices.forEach((j, index) => {
|
||||
out[j] += `,${stops[index].name}`
|
||||
})
|
||||
|
||||
i = (i + 1).mod(stops.length)
|
||||
draw();
|
||||
return false;
|
||||
}, false);
|
||||
console.log(out.join('\n'))
|
||||
|
||||
canvas.addEventListener('click', ev => {
|
||||
// left
|
||||
ev.preventDefault();
|
||||
|
||||
stops[i].x = ev.offsetX
|
||||
stops[i].y = ev.offsetY
|
||||
} else if (e.which === 191) {
|
||||
// #
|
||||
|
||||
|
||||
i = (i + 1).mod(stops.length)
|
||||
draw();
|
||||
return false;
|
||||
}, false);
|
||||
plan = stops.map(s => L.latLng(s.x, s.y))
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.which === 38) {
|
||||
// up
|
||||
i = (i - 1).mod(stops.length)
|
||||
draw()
|
||||
e.preventDefault()
|
||||
} else if (e.which === 40) {
|
||||
// down
|
||||
i = (i + 1).mod(stops.length)
|
||||
draw()
|
||||
e.preventDefault()
|
||||
} else if (e.which === 13) {
|
||||
// enter
|
||||
let output = stops.map(s => `${s.x},${s.y}` + (s.name ? `,,${s.name}` : '')).join('\n')
|
||||
p = L.Routing.plan(plan)
|
||||
|
||||
console.log(output)
|
||||
}
|
||||
})
|
||||
}
|
||||
map.src = "map.png";
|
||||
a = L.Routing.control({
|
||||
plan: p
|
||||
}).addTo(map);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(map, 0, 0)
|
||||
tbl.getElementsByTagName('tbody')[0].innerHTML = "";
|
||||
let last = null;
|
||||
let newLine = [];
|
||||
stops.forEach((s, index) => {
|
||||
const tr = document.createElement('tr');
|
||||
const tdName = document.createElement('td');
|
||||
@@ -145,28 +184,11 @@
|
||||
|
||||
if (s.y === null && s.x === null)
|
||||
return;
|
||||
if (s.name !== null) {
|
||||
ctx.beginPath()
|
||||
ctx.arc(s.x, s.y, 5, 0, 2 * Math.PI);
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeStyle = index === i ? '#f00' : '#000'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = '#000'
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(s.name, s.x, s.y - 10);
|
||||
}
|
||||
if (last) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(last.x, last.y)
|
||||
ctx.lineWidth = 3;
|
||||
ctx.lineTo(s.x, s.y)
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
last = s;
|
||||
|
||||
newLine.push(L.latLng(s.x, s.y))
|
||||
})
|
||||
|
||||
line.setLatLngs(newLine)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user