ttss/mpk-ttss - git.Jacekk.net

			@@ -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;

			@@ -45,6 +63,18 @@
			fail(lang.error_request_failed_status.replace('$status', data.statusText), data);
			} else {
			fail(lang.error_request_failed, data);
			}
			}

			function popupHide() {
			popup.setPosition(undefined);
			popup_feature_id = null;
			}

			function popupShow(coordinates, id) {
			popup.setPosition(coordinates);
			if(id) {
			popup_feature_id = id;
			}
			}

			@@ -68,7 +98,7 @@
			element: popup_element,
			positioning: 'bottom-center',
			stopEvent: false,
			offset: [0, -50]
			offset: [0, -12]
			});

			map = new ol.Map({
			@@ -89,14 +119,22 @@
			});

			// display popup on click
			map.on('singleclick', function(evt) {
			var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) { return feature; });
			if (feature) {
			map.on('singleclick', function(e) {
			var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) { return feature; });
			if(feature) {
			var coordinates = feature.getGeometry().getCoordinates();
			popup_element.innerHtml = feature.name;
			popup.setPosition(coordinates);

			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);
			}

			popupShow(coordinates, feature.getId());
			} else {
			popup.setPosition(undefined);
			popupHide();
			}
			});

			@@ -118,7 +156,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 +174,44 @@
			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,
			rotation: Math.PI * parseFloat(vehicle.heading) / 180.0,
			rotateWithView: true,
			angle: 0
			}),
			text: new ol.style.Text({
			font: 'bold 10px sans-serif',
			text: vehicle.line,
			fill: new ol.style.Fill({color: 'white'}),
			}),
			@@ -155,6 +219,11 @@
			vehicles_source.addFeature(vehicle_feature);
			} else {
			vehicle_feature.setProperties(vehicle);
			vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading) / 180.0);

			if(popup_feature_id == vehicle_feature.getId()) {
			popupShow(vehicle_feature.getGeometry().getCoordinates());
			}
			}
			}