-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (111 loc) · 4.5 KB
/
index.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<link rel="stylesheet" href="leaflet/leaflet.css">
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="leaflet/leaflet.js" type="text/javascript"></script>
<script src="js/helpers.js" type="text/javascript"></script>
</head>
<body>
<div id="leftmenu" style="min-width: 300px; height: 600px; float: left;">
<div><h3>Working area</h3></div>
<div id="forms"></div>
</div>
<div id="mapid" style="height: 600px;"></div>
<script>
var apiUrl = 'https://www.cester.net/railwayatlas/api/v1/';
function populateStationEditForm(data) {
console.log(data);
html = '<form action="' + apiUrl + 'station/update.php" method="post">';
html += '<p><b>Object #' + data.id + '</b></p>';
html += '<input name="id" type="hidden" value="' + data.id + '">';
html += 'Type: <br>';
html += 'Name: <input name="name" type="text" maxlength="50" value="' + data.name + '"><br>';
//type: "1", name: "Verona Porta Nuova", lat: "45.428585", lng: "10.982582", min_zoom: "2", value1: "2", value2: "1", value3: "0" }
html += '<p><button onclick="document.getElementById(\'forms\').innerHTML=\'\';">Close</button>';
html += ' <input type="submit"></p>';
html += '</form>';
document.getElementById('forms').innerHTML = html;
}
async function getVisibleStations(map) {
let bounds = map.getBounds();
let nelat = bounds._northEast.lat;
let nelng = bounds._northEast.lng;
let swlat = bounds._southWest.lat;
let swlng = bounds._southWest.lng;
// get the visible stations
let params = "nelat=" + nelat + "&nelng=" + nelng + "&swlat=" + swlat + "&swlng=" + swlng + "&zoom=" + map.getZoom();
const response = await fetch(apiUrl + 'stations/read.php?' + params);
const json = await response.json();
return json
}
function getStationMarkerOptions(station) {
let size_fact = 2 - station.type;
let color_bord = 'gray';
let color_fill = 'white';
// value1 = power : 0 = n/a, 1 = non el., 2 = 3kV, 3 = 15 kV, 4 = 25 kV
switch (station.value1) { // power
case "1": { color_bord = '#ff6600'; } break;
case "2": { color_bord = '#0000aa'; } break;
case "3": { color_bord = '#ff0000'; } break;
case "4": { color_bord = '#339999'; } break;
default: { }
}
// value2 = status : 1 = normale, 2 = dismessa, 3 = lavori, 4 = no pax
switch (station.value2) { // status
case "2": { color_bord = adjustColor(color_bord, +120); } break;
//case "3": { color_fill = '#ffff00'; } break;
case "4": { color_fill = color_bord; } break;
default: { }
}
return {
radius : 5 + 3 * size_fact,
fillColor : color_fill,
color : color_bord,
weight : 2 + size_fact,
opacity : 1,
fillOpacity : 1
}
}
var markersVisible = {};
async function updateMap(map) {
visibleStations = await getVisibleStations(map);
console.debug("Number of stations returned: ", visibleStations.length);
let markersToRemove = markersVisible;
markersVisible = {}
var added = 0;
for (i = 0; i < visibleStations.length; i++) {
let data = visibleStations[i];
if (data.id in markersToRemove) {
markersVisible[data.id] = markersToRemove[data.id];
delete markersToRemove[data.id];
} else {
let marker = L.circleMarker([data.lat, data.lng], getStationMarkerOptions(data));
marker.on('click', function(ev) { populateStationEditForm(data); });
markersVisible[data.id] = marker;
marker.addTo(map);
added = added + 1;
}
}
console.debug("Number of markers displayed: ", Object.keys(markersVisible).length,
"(delta:"+(added-Object.keys(markersToRemove).length)+")");
for (const marker of Object.values(markersToRemove)) {
map.removeLayer(marker);
}
// TODO: get the visible stretches, depending on the visible stations
}
var map = L.map('mapid').setView([45.6723, 12.2422], 8);
// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 14,
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
// show the scale bar on the lower left corner
L.control.scale().addTo(map);
// listeners
map.on("moveend", function(s){ updateMap(map); }); // 'moveend' event includes zoom changes
updateMap(map);
</script>
</body>
</html>