From 71ca71f861d036f3f3b9c3265ee963ce9cc77ad6 Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Thu, 13 Apr 2017 00:03:41 +0000
Subject: [PATCH] Simplify stops download using stopinfo/stops API method

---
 map.html |   70 +++++++++++++++++++++++++++++++---
 1 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/map.html b/map.html
index 0edfc98..0f16846 100644
--- a/map.html
+++ b/map.html
@@ -1,18 +1,34 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-<title>OpenLayers Demo</title>
+<title>MPK Kraków Map</title>
 <style type="text/css">
 html, body, #map {
 	width: 100%;
 	height: 100%;
 	margin: 0;
 }
+#popup {
+	color: black;
+	background: white;
+	padding: 5px;
+	border: 1px solid black;
+	border-radius: 10px;
+	font: 12px sans-serif;
+}
+#popup p {
+	margin: 0;
+	padding: 5px;
+}
+#popup .line-direction {
+	font-weight: bold;
+}
 </style>
-<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"  crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
-<script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script>
+<script src="https://openlayers.org/en/v4.0.1/build/ol.js" integrity="sha384-DjqoiOTAYD0bxdY6K1Ep7Xd4QQc46AKzKmkgC4+rnKX47PniPHIjRt02uhT8C04h" crossorigin="anonymous"></script>
 <script tyle="text/javascript" src="lang_en.js" id="lang_script"></script>
+<script tyle="text/javascript" src="common.js"></script>
 </head>
 <body>
 <div id="map"><div id="popup"></div></div>
@@ -25,8 +41,10 @@
 var vehicles_source = null;
 var vehicles_xhr = null;
 var vehicles_timer = null;
+var vehicles_last_update = 0;
 
 var map = null;
+var popup_feature_id = null;
 var popup_element = document.getElementById('popup');
 var popup = null;
 
@@ -68,7 +86,7 @@
 		element: popup_element,
 		positioning: 'bottom-center',
 		stopEvent: false,
-		offset: [0, -50]
+		offset: [0, -12]
 	});
 	
 	map = new ol.Map({
@@ -91,12 +109,22 @@
 	// display popup on click
 	map.on('singleclick', function(evt) {
 		var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) { return feature; });
-		if (feature) {
+		if(feature) {
 			var coordinates = feature.getGeometry().getCoordinates();
-			popup_element.innerHtml = feature.name;
+			
+			deleteChildren(popup_element);
+			addParaWithText(popup_element, feature.get('name')).className = 'line-direction';
+			
+			var vehicle_type = parseVehicle(feature.get('id'));
+			if(vehicle_type) {
+				addParaWithText(popup_element, vehicle_type.num + ' ' + vehicle_type.type);
+			}
+			
 			popup.setPosition(coordinates);
+			popup_feature_id = feature.getId();
 		} else {
 			popup.setPosition(undefined);
+			popup_feature_id = null;
 		}
 	});
 
@@ -118,7 +146,10 @@
 		ttss_base + '/geoserviceDispatcher/services/vehicleinfo/vehicles' 
 			+ '?positionType=CORRECTED'
 			+ '&colorType=ROUTE_BASED'
+			+ '&lastUpdate=' + encodeURIComponent(vehicles_last_update)
 	).done(function(data) {
+		vehicles_last_update = data.lastUpdate;
+		
 		for(var i = 0; i < data.vehicles.length; i++) {
 			var vehicle = data.vehicles[i];
 			
@@ -133,21 +164,43 @@
 			var vehicle_name_space = vehicle.name.indexOf(' ');
 			vehicle.line = vehicle.name.substr(0, vehicle_name_space);
 			vehicle.direction = vehicle.name.substr(vehicle_name_space+1);
+			if(special_directions[vehicle.direction]) {
+				vehicle.line = special_directions[vehicle.direction];
+			}
+			
 			vehicle.geometry = new ol.geom.Point(ol.proj.fromLonLat([vehicle.longitude / 3600000.0, vehicle.latitude / 3600000.0]));
+			vehicle.vehicle_type = parseVehicle(vehicle.id);
 			
 			if(!vehicle_feature) {
 				vehicle_feature = new ol.Feature(vehicle);
 				vehicle_feature.setId(vehicle.id);
+				
+				var color_type = 'black';
+				if(vehicle.vehicle_type) {
+					switch(vehicle.vehicle_type.low) {
+						case 0:
+							color_type = 'orange';
+							break;
+						case 1:
+							color_type = 'blue';
+							break;
+						case 2:
+							color_type = 'green';
+							break;
+					}
+				}
+				
 				vehicle_feature.setStyle(new ol.style.Style({
 					image: new ol.style.RegularShape({
 						fill: new ol.style.Fill({color: '#3399ff'}),
-						stroke: new ol.style.Stroke({color: 'black', width: 1}),
+						stroke: new ol.style.Stroke({color: color_type, width: 2}),
 						points: 3,
 						radius: 12,
 						rotation: Math.PI * 2.0 * vehicle.heading / 360.0,
 						angle: 0
 					}),
 					text: new ol.style.Text({
+						font: 'bold 10px sans-serif',
 						text: vehicle.line,
 						fill: new ol.style.Fill({color: 'white'}),
 					}),
@@ -155,6 +208,9 @@
 				vehicles_source.addFeature(vehicle_feature);
 			} else {
 				vehicle_feature.setProperties(vehicle);
+				if(popup_feature_id == vehicle.id) {
+					popup.setPosition(vehicle_feature.getGeometry().getCoordinates());
+				}
 			}
 		}
 		

--
Gitblit v1.9.1