Skip to content

Commit c329a0f

Browse files
matejetzmatejetz
committed
add thin and dashed lines between off track start and end pointers and the real start and end nodes
1 parent 2df9f5c commit c329a0f

File tree

1 file changed

+149
-134
lines changed

1 file changed

+149
-134
lines changed

‎web/static/leaflet_script.js‎

Lines changed: 149 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
var map = L.map('map', {
2-
maxBounds: [
3-
[47.3, 5.9], // Southwest coordinates
4-
[54.9, 16.9512215] // Northeast coordinates
5-
],
2+
maxBounds: [
3+
[47.3, 5.9], // Southwest coordinates
4+
[54.9, 16.9512215] // Northeast coordinates
5+
],
66
}).setView([51.1657, 10.4515], 6);
77
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
8-
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
9-
maxZoom: 18,
10-
minZoom: 6,
11-
id: 'mapbox.streets',
12-
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
8+
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
9+
maxZoom: 18,
10+
minZoom: 6,
11+
id: 'mapbox.streets',
12+
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
1313
}).addTo(map);
1414

1515
map.on('click', onMapClick);
@@ -25,169 +25,184 @@ var last_path;
2525
let xhr = new XMLHttpRequest();
2626

2727
function onMapClick(e) {
28-
if (tmpMarker) {
29-
map.removeLayer(tmpMarker);
30-
}
31-
tmpMarker = L.marker(e.latlng).addTo(map);
32-
tmpMarker.setLatLng(e.latlng);
33-
tmpMarker.bindPopup("<button class='set-point set-start' onclick='setStart()''>Set Start</button><button class='set-point set-end' onclick='setEnd()''>Set End</button>").openPopup();
28+
if (tmpMarker) {
29+
map.removeLayer(tmpMarker);
30+
}
31+
tmpMarker = L.marker(e.latlng).addTo(map);
32+
tmpMarker.setLatLng(e.latlng);
33+
tmpMarker.bindPopup("<button class='set-point set-start' onclick='setStart()''>Set Start</button><button class='set-point set-end' onclick='setEnd()''>Set End</button>").openPopup();
3434
}
3535

3636
function setStart() {
37-
let coords = tmpMarker.getLatLng();
38-
let lat = Math.round(coords.lat * 1000) / 1000;
39-
let lng = Math.round(coords.lng * 1000) / 1000;
40-
document.getElementById("start-text").innerHTML = "latitude: " + lat.toString() + "<br> longitude: " + lng.toString();
41-
if (startMarker) {
42-
map.removeLayer(startMarker);
43-
}
44-
startPoint = tmpMarker.getLatLng();
45-
startMarker = L.marker(coords, {
46-
icon: greenIcon
47-
}).addTo(map);
48-
map.removeLayer(tmpMarker);
49-
if (typeof last_path === 'object') {
50-
map.removeLayer(last_path);
51-
}
37+
let coords = tmpMarker.getLatLng();
38+
let lat = Math.round(coords.lat * 1000) / 1000;
39+
let lng = Math.round(coords.lng * 1000) / 1000;
40+
document.getElementById("start-text").innerHTML = "latitude: " + lat.toString() + "<br> longitude: " + lng.toString();
41+
if (startMarker) {
42+
map.removeLayer(startMarker);
43+
}
44+
startPoint = tmpMarker.getLatLng();
45+
startMarker = L.marker(coords, {
46+
icon: greenIcon
47+
}).addTo(map);
48+
map.removeLayer(tmpMarker);
49+
if (typeof last_path === 'object') {
50+
map.removeLayer(last_path);
51+
}
5252
}
5353

5454
function setEnd() {
55-
let coords = tmpMarker.getLatLng();
56-
let lat = Math.round(coords.lat * 1000) / 1000;
57-
let lng = Math.round(coords.lng * 1000) / 1000;
58-
document.getElementById("end-text").innerHTML = "latitude: " + lat.toString() + "<br> longitude: " + lng.toString();
59-
if (endMarker) {
60-
map.removeLayer(endMarker);
61-
}
62-
endPoint = tmpMarker.getLatLng();
63-
endMarker = L.marker(coords, {
64-
icon: redIcon
65-
}).addTo(map);
66-
map.removeLayer(tmpMarker);
67-
if (typeof last_path === 'object') {
68-
map.removeLayer(last_path);
69-
}
55+
let coords = tmpMarker.getLatLng();
56+
let lat = Math.round(coords.lat * 1000) / 1000;
57+
let lng = Math.round(coords.lng * 1000) / 1000;
58+
document.getElementById("end-text").innerHTML = "latitude: " + lat.toString() + "<br> longitude: " + lng.toString();
59+
if (endMarker) {
60+
map.removeLayer(endMarker);
61+
}
62+
endPoint = tmpMarker.getLatLng();
63+
endMarker = L.marker(coords, {
64+
icon: redIcon
65+
}).addTo(map);
66+
map.removeLayer(tmpMarker);
67+
if (typeof last_path === 'object') {
68+
map.removeLayer(last_path);
69+
}
7070
}
7171

7272
function query() {
73-
hide_result();
74-
hide_invalid_request();
75-
hide_no_path_found();
76-
hide_select_start_and_end();
77-
78-
if (typeof last_path === 'object') {
79-
map.removeLayer(last_path);
80-
}
81-
82-
if (typeof startPoint === 'undefined' || typeof endPoint === 'undefined') {
83-
show_select_start_and_end();
84-
return;
85-
}
86-
87-
var xhr = new XMLHttpRequest();
88-
xhr.open("POST", url + "dijkstra", true);
89-
xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
90-
91-
xhr.onreadystatechange = function() {
92-
if (xhr.readyState === 4 && xhr.status === 200) {
93-
var json = JSON.parse(xhr.responseText);
94-
if (json.path != "") {
95-
printPath(json.path);
96-
show_result(json.cost);
97-
} else {
98-
show_no_path_found();
99-
}
100-
} else if (xhr.readyState === 4) {
101-
show_invalid_request();
102-
}
103-
};
104-
105-
var travel_type = document.getElementById("travel-type").value;
106-
var optimization = document.getElementById("optimization").value == "distance";
107-
var body = {
108-
"start": {
109-
"latitude": startPoint.lat,
110-
"longitude": startPoint.lng
111-
},
112-
"end": {
113-
"latitude": endPoint.lat,
114-
"longitude": endPoint.lng
115-
},
116-
"travel_type": travel_type,
117-
"by_distance": optimization,
118-
};
119-
var data = JSON.stringify(body);
120-
// console.log("request: " + data);
121-
xhr.send(data);
73+
hide_result();
74+
hide_invalid_request();
75+
hide_no_path_found();
76+
hide_select_start_and_end();
77+
78+
if (typeof last_path === 'object') {
79+
map.removeLayer(last_path);
80+
}
81+
82+
if (typeof startPoint === 'undefined' || typeof endPoint === 'undefined') {
83+
show_select_start_and_end();
84+
return;
85+
}
86+
87+
var xhr = new XMLHttpRequest();
88+
xhr.open("POST", url + "dijkstra", true);
89+
xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
90+
91+
xhr.onreadystatechange = function () {
92+
if (xhr.readyState === 4 && xhr.status === 200) {
93+
var json = JSON.parse(xhr.responseText);
94+
if (json.path != "") {
95+
printPath(json.path);
96+
show_result(json.cost);
97+
} else {
98+
show_no_path_found();
99+
}
100+
} else if (xhr.readyState === 4) {
101+
show_invalid_request();
102+
}
103+
};
104+
105+
var travel_type = document.getElementById("travel-type").value;
106+
var optimization = document.getElementById("optimization").value == "distance";
107+
var body = {
108+
"start": {
109+
"latitude": startPoint.lat,
110+
"longitude": startPoint.lng
111+
},
112+
"end": {
113+
"latitude": endPoint.lat,
114+
"longitude": endPoint.lng
115+
},
116+
"travel_type": travel_type,
117+
"by_distance": optimization,
118+
};
119+
var data = JSON.stringify(body);
120+
// console.log("request: " + data);
121+
xhr.send(data);
122122
}
123123

124124

125125
function printPath(path) {
126-
// create [lat, lng] array for leaflet map
127-
let points = path.map(function(node) {
128-
return [node.latitude, node.longitude]
126+
// create [lat, lng] array for leaflet map
127+
let points = path.map(function (node) {
128+
return [node.latitude, node.longitude]
129+
});
130+
off_track_start = L.polyline([startPoint, points[0]], {
131+
'dashArray': 10,
132+
'weight': 2
133+
});
134+
start_to_end = L.polyline(points);
135+
off_track_end = L.polyline([points[points.length - 1], endPoint], {
136+
'dashArray': 10,
137+
'weight': 2
129138
});
130-
last_path = L.polyline(points);
131-
map.addLayer(last_path);
132-
map.fitBounds(last_path.getBounds().pad(Math.sqrt(2) / 4));
139+
140+
last_path = L.layerGroup([off_track_start, start_to_end, off_track_end]);
141+
142+
map.addLayer(last_path);
143+
map.fitBounds([startPoint, endPoint]);
133144
}
134145

135146

136147
function show_invalid_request() {
137-
document.getElementById("invalid-request").style.display = "block";
148+
document.getElementById("invalid-request").style.display = "block";
138149
}
150+
139151
function hide_invalid_request() {
140-
var x = document.getElementById("invalid-request");
141-
if (x.style.display === "block") {
142-
x.style.display = "none";
143-
}
152+
var x = document.getElementById("invalid-request");
153+
if (x.style.display === "block") {
154+
x.style.display = "none";
155+
}
144156
}
145157

146158
function show_no_path_found() {
147-
document.getElementById("no-path-found").style.display = "block";
159+
document.getElementById("no-path-found").style.display = "block";
148160
}
161+
149162
function hide_no_path_found() {
150-
var x = document.getElementById("no-path-found");
151-
if (x.style.display === "block") {
152-
x.style.display = "none";
153-
}
163+
var x = document.getElementById("no-path-found");
164+
if (x.style.display === "block") {
165+
x.style.display = "none";
166+
}
154167
}
155168

156169
function show_select_start_and_end() {
157-
document.getElementById("select-start-and-end").style.display = "block";
170+
document.getElementById("select-start-and-end").style.display = "block";
158171
}
172+
159173
function hide_select_start_and_end() {
160-
var x = document.getElementById("select-start-and-end");
161-
if (x.style.display === "block") {
162-
x.style.display = "none";
163-
}
174+
var x = document.getElementById("select-start-and-end");
175+
if (x.style.display === "block") {
176+
x.style.display = "none";
177+
}
164178
}
165179

166180
function show_result(costs) {
167-
var tmp = document.getElementById("result")
168-
tmp.innerHTML = costs;
169-
tmp.style.display = "block";
181+
var tmp = document.getElementById("result")
182+
tmp.innerHTML = costs;
183+
tmp.style.display = "block";
170184
}
185+
171186
function hide_result() {
172-
var x = document.getElementById("result");
173-
if (x.style.display === "block") {
174-
x.style.display = "none";
175-
}
187+
var x = document.getElementById("result");
188+
if (x.style.display === "block") {
189+
x.style.display = "none";
190+
}
176191
}
177192

178193
var greenIcon = new L.Icon({
179-
iconUrl: 'img/marker-green.png',
180-
shadowUrl: 'img/marker-shadow.png',
181-
iconSize: [25, 41],
182-
iconAnchor: [12, 41],
183-
popupAnchor: [1, -34],
184-
shadowSize: [41, 41]
194+
iconUrl: 'img/marker-green.png',
195+
shadowUrl: 'img/marker-shadow.png',
196+
iconSize: [25, 41],
197+
iconAnchor: [12, 41],
198+
popupAnchor: [1, -34],
199+
shadowSize: [41, 41]
185200
});
186201
var redIcon = new L.Icon({
187-
iconUrl: 'img/marker-red.png',
188-
shadowUrl: 'img/marker-shadow.png',
189-
iconSize: [25, 41],
190-
iconAnchor: [12, 41],
191-
popupAnchor: [1, -34],
192-
shadowSize: [41, 41]
202+
iconUrl: 'img/marker-red.png',
203+
shadowUrl: 'img/marker-shadow.png',
204+
iconSize: [25, 41],
205+
iconAnchor: [12, 41],
206+
popupAnchor: [1, -34],
207+
shadowSize: [41, 41]
193208
});

0 commit comments

Comments
 (0)