195 lines
5.1 KiB
HTML
195 lines
5.1 KiB
HTML
<!--
|
|
~ Copyright (c) 2020. Pascal Syma <pascal@syma.dev>.
|
|
~ All rights reserved.
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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;
|
|
height: 0;
|
|
user-select: none; /* standard syntax */
|
|
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
|
-moz-user-select: none; /* mozilla browsers */
|
|
-khtml-user-select: none; /* webkit (konqueror) browsers */
|
|
-ms-user-select: none; /* IE10+ */
|
|
}
|
|
|
|
#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 id="st">
|
|
<table id="stops">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
<label><textarea id="inp" rows="3"></textarea></label>
|
|
</div>
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
let route;
|
|
Number.prototype.mod = function (n) {
|
|
return ((this % n) + n) % n;
|
|
};
|
|
let stops = [];
|
|
let i = 0;
|
|
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");
|
|
inp.addEventListener('input', () => {
|
|
if (inp.value === null || inp.value === '')
|
|
return;
|
|
stops = inp.value.split('\n').map(l => {
|
|
return {
|
|
name: l,
|
|
x: null,
|
|
y: null
|
|
}
|
|
})
|
|
inp.value = ''
|
|
i = 0;
|
|
draw()
|
|
})
|
|
|
|
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}`
|
|
})
|
|
|
|
console.log(out.join('\n'))
|
|
|
|
} else if (e.which === 191) {
|
|
// #
|
|
|
|
|
|
plan = stops.map(s => L.latLng(s.x, s.y))
|
|
|
|
p = L.Routing.plan(plan)
|
|
|
|
a = L.Routing.control({
|
|
plan: p
|
|
}).addTo(map);
|
|
}
|
|
})
|
|
|
|
|
|
function draw() {
|
|
tbl.getElementsByTagName('tbody')[0].innerHTML = "";
|
|
let newLine = [];
|
|
stops.forEach((s, index) => {
|
|
const tr = document.createElement('tr');
|
|
const tdName = document.createElement('td');
|
|
tdName.innerText = s.name ? s.name : '-';
|
|
const tdI = document.createElement('td');
|
|
if (index === i)
|
|
tdI.innerText = '<';
|
|
|
|
|
|
tr.append(tdName, tdI);
|
|
|
|
tbl.getElementsByTagName('tbody')[0].append(tr)
|
|
|
|
if (s.y === null && s.x === null)
|
|
return;
|
|
|
|
newLine.push(L.latLng(s.x, s.y))
|
|
})
|
|
|
|
line.setLatLngs(newLine)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |