From ba6e87c3d748ef2cf442dc9165f6bc56e42fdeae Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Tue, 29 Jan 2019 14:02:13 +0000
Subject: [PATCH] Show bus stops on map (in blue)

---
 map.js |  179 ++++++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 132 insertions(+), 47 deletions(-)

diff --git a/map.js b/map.js
index 550d05d..2b9a038 100644
--- a/map.js
+++ b/map.js
@@ -1,12 +1,14 @@
 //var ttss_base = 'http://www.ttss.krakow.pl/internetservice';
 var ttss_base = 'proxy.php';
 var ttss_refresh = 10000; // 10 seconds
+var ttss_position_type = 'CORRECTED';
 
 var vehicles_xhr = null;
 var vehicles_timer = null;
 var vehicles_last_update = 0;
 var vehicles_source = null;
 var vehicles_layer = null;
+var vehicles_info = {};
 
 var stops_xhr = null;
 var stops_source = null;
@@ -23,8 +25,8 @@
 var route_layer = null;
 
 var map = null;
-var map_sphere = null;
 var popup_element = document.getElementById('popup');
+var popup_close_callback;
 var fail_element = document.getElementById('fail');
 
 var ignore_hashchange = false;
@@ -67,13 +69,13 @@
 	var color_type = 'black';
 	if(vehicle.get('vehicle_type')) {
 		switch(vehicle.get('vehicle_type').low) {
-			case 0:
+			case '0':
 				color_type = 'orange';
 			break;
-			case 1:
+			case '1':
 				color_type = 'blue';
 			break;
-			case 2:
+			case '2':
 				color_type = 'green';
 			break;
 		}
@@ -86,7 +88,7 @@
 	return new ol.style.Style({
 		image: new ol.style.Icon({
 			src: 'data:image/svg+xml;base64,' + btoa(image),
-			rotation: Math.PI * parseFloat(vehicle.get('heading')) / 180.0,
+			rotation: Math.PI * parseFloat(vehicle.get('heading') ? vehicle.get('heading') : 0) / 180.0,
 		}),
 		text: new ol.style.Text({
 			font: 'bold 10px sans-serif',
@@ -97,16 +99,21 @@
 }
 
 function styleStop(stop, selected) {
-	var fill = 'orange';
-	var stroke = 'red';
+	var fill = '#FA0';
+	var stroke = '#B70';
+	var stroke_selected = '#F00';
 	var stroke_width = 1;
 	var radius = 3;
+	
+	if(stop.get('category') == 'bus') {
+		fill = '#07F';
+		stroke = '#05B';
+	}
 	
 	if(selected == 2) {
 		radius = 5;
 	} else if(selected) {
-		fill = 'red';
-		stroke = '#900';
+		stroke = stroke_selected;
 		stroke_width = 2;
 		radius = 5;
 	}
@@ -156,7 +163,7 @@
 	
 	vehicles_xhr = $.get(
 		ttss_base + '/geoserviceDispatcher/services/vehicleinfo/vehicles' 
-			+ '?positionType=CORRECTED'
+			+ '?positionType=' + ttss_position_type
 			+ '&colorType=ROUTE_BASED'
 			+ '&lastUpdate=' + encodeURIComponent(vehicles_last_update)
 	).done(function(data) {
@@ -169,7 +176,7 @@
 			if(vehicle.isDeleted) {
 				if(vehicle_feature) {
 					vehicles_source.removeFeature(vehicle_feature);
-					if(feature_clicked.getId() == vehicle_feature.getId()) {
+					if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) {
 						featureClicked();
 					}
 				}
@@ -194,7 +201,7 @@
 				vehicles_source.addFeature(vehicle_feature);
 			} else {
 				vehicle_feature.setProperties(vehicle);
-				vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading) / 180.0);
+				vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading ? vehicle.heading : 0) / 180.0);
 			}
 		}
 		
@@ -257,7 +264,7 @@
 			+ '?tripId=' + encodeURIComponent(tripId)
 			+ '&mode=departure'
 	).done(function(data) {
-		if(!data.routeName || !data.directionText || data.old.length + data.actual.length == 0) {
+		if(!data.routeName || !data.directionText) {
 			return;
 		}
 		
@@ -293,7 +300,7 @@
 		if(!vehicleId) return;
 	       
 		feature_xhr = $.get(
-			ttss_base + '/internetservice/geoserviceDispatcher/services/pathinfo/vehicle'
+			ttss_base + '/geoserviceDispatcher/services/pathinfo/vehicle'
 				+ '?id=' + encodeURIComponent(vehicleId)
 		).done(function(data) {
 			if(!data || !data.paths || !data.paths[0] || !data.paths[0].wayPoints) return;
@@ -368,6 +375,31 @@
 	}).fail(fail_ajax_popup);
 }
 
+function showPanel(contents, closeCallback) {
+	var old_callback = popup_close_callback;
+	popup_close_callback = null;
+	if(old_callback) old_callback();
+	popup_close_callback = closeCallback;
+	
+	deleteChildren(popup_element);
+	
+	var close = addParaWithText(popup_element, '×');
+	close.className = 'close';
+	close.addEventListener('click', function() { hidePanel(); });
+	
+	popup_element.appendChild(contents);
+	
+	$(popup_element).addClass('show');
+}
+
+function hidePanel() {
+	var old_callback = popup_close_callback;
+	popup_close_callback = null;
+	if(old_callback) old_callback();
+	
+	$(popup_element).removeClass('show');
+}
+
 function featureClicked(feature) {
 	if(feature && !feature.getId()) return;
 	
@@ -375,23 +407,13 @@
 	route_source.clear();
 	
 	if(!feature) {
-		feature_clicked = null;
-		
-		$(popup_element).removeClass('show');
-		
-		ignore_hashchange = true;
-		window.location.hash = '';
-		
+		hidePanel();
 		return;
 	}
 	
 	var coordinates = feature.getGeometry().getCoordinates();
 	
-	deleteChildren(popup_element);
-	
-	var close = addParaWithText(popup_element, '×');
-	close.className = 'close';
-	close.addEventListener('click', function() { featureClicked(); });
+	var div = document.createElement('div');
 	
 	var type;
 	var name = feature.get('name');
@@ -406,14 +428,14 @@
 		case 'v':
 			type = lang.type_vehicle;
 			
-			if(!feature.get('vehicle_type')) {
-				break;
-			}
-			
 			var span = displayVehicle(feature.get('vehicle_type'));
 			
 			additional = document.createElement('p');
-			setText(additional, span.title);
+			if(span.title) {
+				setText(additional, span.title);
+			} else {
+				setText(additional, feature.getId());
+			}
 			additional.insertBefore(span, additional.firstChild);
 			
 			addElementWithText(thead, 'th', lang.header_time);
@@ -458,19 +480,16 @@
 	
 	var loader = addElementWithText(tbody, 'td', lang.loading);
 	loader.className = 'active';
-	loader.colspan = thead.childNodes.length;
+	loader.colSpan = thead.childNodes.length;
 	
-	addParaWithText(popup_element, type).className = 'type';
-	addParaWithText(popup_element, name).className = 'name';
+	addParaWithText(div, type).className = 'type';
+	addParaWithText(div, name).className = 'name';
 	
 	if(additional) {
-		popup_element.appendChild(additional);
+		div.appendChild(additional);
 	}
 	
-	popup_element.appendChild(table);
-	
-	ignore_hashchange = true;
-	window.location.hash = '#!' + feature.getId();
+	div.appendChild(table);
 	
 	styleFeature(feature, true);
 	
@@ -478,7 +497,22 @@
 		center: feature.getGeometry().getCoordinates(),
 	}) }, 10);
 	
-	$(popup_element).addClass('show');
+	ignore_hashchange = true;
+	window.location.hash = '#!' + feature.getId();
+	
+	showPanel(div, function() {
+		if(!ignore_hashchange) {
+			ignore_hashchange = true;
+			window.location.hash = '';
+			
+			feature_clicked = null;
+			unstyleSelectedFeatures();
+			route_source.clear();
+			
+			if(feature_xhr) feature_xhr.abort();
+			if(feature_timer) clearTimeout(feature_timer);
+		}
+	});
 	
 	feature_clicked = feature;
 }
@@ -501,12 +535,14 @@
 		tramId = parseInt(window.location.hash.substr(3));
 	} else if(window.location.hash.match(/^#![A-Za-z]{2}[0-9]{3}$/)) {
 		tramId = parseInt(window.location.hash.substr(4));
-	} else if(window.location.hash.match(/^#!v[0-9]+$/)) {
+	} else if(window.location.hash.match(/^#!v-?[0-9]+$/)) {
 		vehicleId = window.location.hash.substr(3);
-	} else if(window.location.hash.match(/^#!s[0-9]+$/)) {
+	} else if(window.location.hash.match(/^#!s-?[0-9]+$/)) {
 		stopId = window.location.hash.substr(3);
-	} else if(window.location.hash.match(/^#!p[0-9]+$/)) {
+	} else if(window.location.hash.match(/^#!p-?[0-9]+$/)) {
 		stopPointId = window.location.hash.substr(3);
+	} else if(window.location.hash == '#!RAW') {
+		ttss_position_type = 'RAW';
 	}
 	
 	if(tramId) {
@@ -534,7 +570,7 @@
 	
 	var c1 = ol.proj.transform(c1, 'EPSG:3857', 'EPSG:4326');
 	var c2 = ol.proj.transform(c2, 'EPSG:3857', 'EPSG:4326');
-	return map_sphere.haversineDistance(c1, c2);
+	return ol.sphere.getDistance(c1, c2);
 }
 
 function returnClosest(point, f1, f2) {
@@ -616,13 +652,57 @@
 		]),
 		loadTilesWhileAnimating: true,
 	});
-	map_sphere = new ol.Sphere(6378137);
 	
 	// Display popup on click
 	map.on('singleclick', function(e) {
 		var point = e.coordinate;
-		var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) { return feature; });
+		var features = [];
+		map.forEachFeatureAtPixel(e.pixel, function(feature) { if(feature.getId()) features.push(feature); });
 		
+		if(features.length > 1) {
+			var div = document.createElement('div');
+			
+			addParaWithText(div, lang.select_feature);
+			
+			for(var i = 0; i < features.length; i++) {
+				var feature = features[i];
+				
+				var p = document.createElement('p');
+				var a = document.createElement('a');
+				p.appendChild(a);
+				a.addEventListener('click', function(feature) { return function() {
+					featureClicked(feature);
+				}}(feature));
+				
+				var type = '';
+				switch(feature.getId().substr(0, 1)) {
+					case 'v':
+						type = lang.type_vehicle;
+						if(feature.get('vehicle_type').num) {
+							type += ' ' + feature.get('vehicle_type').num;
+						}
+					break;
+					case 's':
+						type = lang.type_stop;
+					break;
+					case 'p':
+						type = lang.type_stoppoint;
+					break;
+				}
+				
+				addElementWithText(a, 'span', type).className = 'small';
+				a.appendChild(document.createTextNode(' '));
+				addElementWithText(a, 'span', feature.get('name'));
+				
+				div.appendChild(p);
+			}
+			
+			showPanel(div);
+			
+			return;
+		}
+		
+		var feature = features[0];
 		if(!feature) {
 			if(stops_layer.getVisible()) {
 				feature = returnClosest(point, feature, stops_source.getClosestFeatureToCoordinate(point));
@@ -641,7 +721,11 @@
 		
 		featureClicked(feature);
 	});
-
+	
+	fail_element.addEventListener('click', function() {
+		fail_element.style.top = '-10em';
+	});
+	
 	// Change mouse cursor when over marker
 	map.on('pointermove', function(e) {
 		var hit = map.hasFeatureAtPixel(e.pixel);
@@ -655,6 +739,7 @@
 	});
 	
 	$.when(
+		updateVehicleInfo(),
 		updateVehicles(),
 		updateStops(),
 		updateStopPoints()

--
Gitblit v1.9.1