add feature to show signals and their routes

2 files changed, 115 insertions, 0 deletions

diff --git a/htdocs/index.html b/htdocs/index.html
index 9b5e2c4..4fa05a4 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -38,6 +38,14 @@
 				color: red;
 			}
 
+			.defroute {
+			    background-color: #afa;
+			}
+
+			td {
+			    border-bottom: 2px solid black;
+			}
+			
 			.no-aa img[role=presentation] {
 				image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
 				image-rendering: -moz-crisp-edges;          /* Firefox                        */
diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js
index a27ee10..543aec9 100644
--- a/htdocs/mapscript.js
+++ b/htdocs/mapscript.js
@@ -195,6 +195,103 @@ function load_tiles(name, id) {
 
 var current_location = "";
 var current_feature = null;
+var signals = {}
+
+
+var signalMarkerOptions = {
+	radius: 8,
+	fillColor: "#ff7800",
+	color: "#000",
+	weight: 1,
+	opacity: 1,
+	fillOpacity: 0.8
+};
+
+
+sig_ids = {}
+
+function go_to_signal(ps) {
+	console.log(ps)
+	if (sig_ids[ps]) {
+		console.log("signal!!")
+		sig_ids[ps].openPopup()
+	}
+}
+
+function load_signals() {
+	var active = 1
+	var xhttp_ps = new XMLHttpRequest();
+	var url = "./geojson/signals.json";
+	xhttp_ps.onreadystatechange = function() {
+		if (this.readyState == 4) {
+			if (this.status == 200) {
+				onEachFeature = null;
+				pointToLayer = null;
+				filter = null;
+				signals = JSON.parse(xhttp_ps.responseText);
+				
+				var json = [];
+				for (var m in signals) {
+					console.log(m);
+					json.push(signals[m]);
+				}
+				onEachFeature = function(feature, layer) {
+					label = String(feature.properties.name);
+					sig_ids[feature.properties.pos] = layer
+					var routes = feature.properties.routes;
+					var s = '<table style="width: 100%"><thead><tr><td>Name<td>RC<td>LN</thead>';
+					for (i=0;i<routes.length;i++) {
+						var r = routes[i];
+						var rstyle="route"
+						var ln = ""
+						var rc = ""
+						if (r.ars["default"]) {
+							rstyle="defroute"
+							r.ars.LN.push("*")
+							r.ars.RC.push("*")
+						}
+						if (r.ars.LN ) {
+							ln = r.ars.LN.join("<br>")
+						}
+						if (r.ars.RC ) {
+							rc = r.ars.RC.join("<br>")
+						}
+						var name = r.name
+						if (r.endpoint) {
+							var e =  r.endpoint.split(",")
+							name = '<a href="#" onclick="latLng2 = L.latLng(' + e[2] + ',' + e[0] + '); jump_to(latLng2); go_to_signal(\''+r.endpoint+'\'); return false;">'+r.name+"</a>"
+							
+						}
+						s = s+ '<tr class="'+rstyle+'"><td>'+name+"<td>"+ln+"<td>"+rc+"</tr>";
+					}
+					layer.bindPopup('<h1>Routes here:</h1>' + s + "</table>");
+				};
+				
+				pointToLayer = function  (feature, latlng) {
+					return L.circleMarker(latlng, signalMarkerOptions);
+				};
+				geojson = L.geoJSON(json, {
+					style: 0,
+					onEachFeature: onEachFeature,
+					pointToLayer: pointToLayer,
+					filter: filter
+				});
+				layers.addOverlay(geojson, name);
+				
+				if (active)
+					geojson.addTo(mymap);
+				return geojson;
+			} else {
+				console.log("Error: Could not load geojson map layer (" + name + ").");
+			}
+		}
+	}
+	;
+	xhttp_ps.open("GET", url, true);
+	xhttp_ps.send();
+}
+
+
 function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
 	var xhttp_ps = new XMLHttpRequest();
 	xhttp_ps.onreadystatechange = function() {
@@ -302,6 +399,7 @@ function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
 					break;
 				}
 				var json = JSON.parse(xhttp_ps.responseText);
+
 				geojson = L.geoJSON(json, {
 					style: style,
 					onEachFeature: onEachFeature,
@@ -323,14 +421,19 @@ function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
 	xhttp_ps.send();
 }
 
+
+
 load_tiles("Satellite (2020-04-09)", 'world-2020-04-09').addTo(mymap);
 load_tiles("Satellite (2019-05-04, wrong coords)", 'world-2019-05-04');
 load_tiles("None", '');
 
 load_geojson("All", "./geojson/all.json", "auto", "auto", 0);
+load_signals();
+// load_geojson("Signals", "./geojson/signals.json", "auto", "auto", 0);
 load_geojson("Streets", "./geojson/streets.json", "street", "auto", 1, style_streets);
 load_geojson("Cities", "./geojson/city_outlines.json", "outline", "auto", 1, style_outlines);
 
+
 L.control.scale().addTo(mymap);
 
 function resolve_latlng(latlng, recenter = 0) {
@@ -451,6 +554,10 @@ function search(e) {
 
 			for (key in layers._layers[i].layer._layers) {
 				item = layers._layers[i].layer._layers[key];
+				if (!item.feature.properties.name) {
+					continue
+				}
+					
 				switch (item.feature.geometry.type) {
 				case "Point":
 					regex = new RegExp(query, 'i');