1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
const map = L.map('map').setView([58.40384776751319, 15.578484535217285], 15);
const form = document.querySelector('#path-form')
const markerIsStart = document.querySelector("#marker-point-start")
const markerIsEnd = document.querySelector("#marker-point-end")
form.addEventListener('submit', postShortestPath, false)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
async function postShortestPath(event){
event.preventDefault()
var lat1 = parseFloat(document.querySelector('#lat1').value)
var lng1 = parseFloat(document.querySelector('#lng1').value)
var lat2 = parseFloat(document.querySelector('#lat2').value)
var lng2 = parseFloat(document.querySelector('#lng2').value)
// Check that they're not Nan (stops function if one is Nan)
if(!lat1 || !lng1 || !lat2 || !lng2)
return alert('Formatting Error: Coordinates are not float values.')
req = {lat1, lng1, lat2, lng2} // Dictionary auto-keys
res = await fetch('/shortest-path', {
method:'POST',
credentials: 'same-origin',
body: JSON.stringify(req)
})
res = await res.json()
console.log(res.path)
var poly = L.polyline(res.path).addTo(map)
}
function handleMapClick ({latlng}){
var {lat, lng} = latlng
var marker = L.marker([lat, lng]).addTo(map)
var posNumber = markerIsStart.checked ? '1' : '2'
document.querySelector('#lat' + posNumber).value = lat
document.querySelector('#lng' + posNumber).value = lng
if(markerIsStart.checked)
markerIsEnd.checked = true
}
map.on('click', handleMapClick)
function showMarker(){
var marker = L.marker([58.3984, 15.5733]).addTo(map)
}
showMarker()
async function showMarkers() {
res = await fetch('/show-area');
res = await res.json();
for (let key in res) {
var marker = L.marker(res[key]).addTo(map)
}
}
showMarkers()
|
