From 57b8d31119e351b15ffbf90e7f133de7f2818081 Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Sat, 15 Apr 2017 15:40:27 +0000 Subject: [PATCH] Add map showing tram location --- map.js | 315 +++++++++++++++++++++++++++++++++++++++ lang_en.js | 3 index.html | 3 proxy.php | 54 ++++++ map.html | 21 ++ lang_pl.js | 3 map.css | 49 ++++++ 7 files changed, 447 insertions(+), 1 deletions(-) diff --git a/index.html b/index.html index 6657d2d..8cbeda4 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,9 @@ </select> </form> </li> + <li> + <a href="/map.html" data-translate="map">Map</a> + </li> </ul> diff --git a/lang_en.js b/lang_en.js index 5f10c13..675ad2c 100644 --- a/lang_en.js +++ b/lang_en.js @@ -3,6 +3,8 @@ page_title: 'TTSS Krak\u00F3w - Real-time tram departures', page_title_stop_name: 'TTSS Krak\u00F3w - $stop - Real-time tram departures', + map: 'Map', + jquery_not_loaded: 'Required JavaScript jQuery library failed to load. You may try refreshing the page.', enter_stop_name_to_begin: 'Enter the stop name to begin.', select_stop_click_go: 'Select the stop and click "Go".', @@ -64,4 +66,5 @@ error_request_failed_status: 'Internet request failed with error: $status.', error_request_failed_connectivity: 'Request failed - please check your network connectivity.', error_new_version: 'Website has been updated, reloading...', + error_refresh: 'Error! Refresh the page to update information.', }; diff --git a/lang_pl.js b/lang_pl.js index 92a95ac..4d8b347 100644 --- a/lang_pl.js +++ b/lang_pl.js @@ -3,6 +3,8 @@ page_title: 'TTSS Krak\u00F3w - Odjazdy tramwajów na żywo', page_title_stop_name: 'TTSS Krak\u00F3w - $stop - Odjazdy tramwajów na żywo', + map: 'Map', + jquery_not_loaded: 'Wymagana biblioteka jQuery nie została poprawnie załadowana. Spróbuj odświeżyć stronę.', enter_stop_name_to_begin: 'Zacznij wpisywać nazwę przystanku.', select_stop_click_go: 'Wyierz przystanek i kliknij "Dalej".', @@ -64,4 +66,5 @@ error_request_failed_status: 'Wykonanie żądania internetowego nie udało się. Błąd: $status.', error_request_failed_connectivity: 'Wykonanie żądania internetowego nie udało się - sprawdź połączenie z siecią.', error_new_version: 'Strona została zaktualizowana, przeładowuję...', + error_refresh: 'Błąd! Odśwież stronę, by zaktualizować dane.', }; diff --git a/map.css b/map.css new file mode 100644 index 0000000..e497aec --- /dev/null +++ b/map.css @@ -0,0 +1,49 @@ +html, body, #map { + width: 100%; + height: 100%; + margin: 0; + font-family: sans-serif; +} + +#popup { + color: black; + background: white; + padding: 5px; + border: 1px solid black; + border-radius: 10px; + font-size: 12px; +} +#popup p { + margin: 0; + padding: 5px; +} +#popup .bold { + font-weight: bold; +} + +#title { + top: .5em; + left: .5em; + padding: 2px .5em; + font-weight: bold; + background-color: rgba(255,255,255,.6); +} +#fail { + top: -10em; + right: 0.5em; + background: red; + color: white; + font-weight: bold; + padding: 5px; +} +.ol-zoom { + top: 2.2em; +} + +a { + color: #337ab7; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} diff --git a/map.html b/map.html new file mode 100644 index 0000000..1fdf9b5 --- /dev/null +++ b/map.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<title>TTSS Kraków - Map</title> +<link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css" /> +<link rel="stylesheet" href="map.css" type="text/css" /> +</head> +<body> +<div id="map"> +<div id="title" class="ol-unselectable ol-control"><a href="/">TTSS Kraków</a></div> +<div id="fail" class="ol-unselectable ol-control"></div> +<div id="popup"></div> +</div> +<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.1.0/build/ol.js" integrity="sha384-FkrvSU9IkctjoF6eTvw82jZvg4Rn04zw5X2nCQnYF+vT8IbAY+DJ23IIoaVDtiMe" crossorigin="anonymous"></script> +<script tyle="text/javascript" src="lang_en.js" id="lang_script"></script> +<script tyle="text/javascript" src="common.js"></script> +<script tyle="text/javascript" src="map.js"></script> +</body> +</html> diff --git a/map.js b/map.js new file mode 100644 index 0000000..34493f9 --- /dev/null +++ b/map.js @@ -0,0 +1,315 @@ +//var ttss_base = 'http://www.ttss.krakow.pl/internetservice'; +var ttss_base = '/proxy.php'; +var ttss_refresh = 5000; // 5 seconds + +var vehicles_xhr = null; +var vehicles_timer = null; +var vehicles_last_update = 0; +var vehicles_source = null; +var vehicles_layer = null; + +var stops_xhr = null; +var stops_source = null; +var stops_layer = null; +var stop_points_source = null; +var stop_points_layer = null; + +var map = null; +var popup_feature_id = null; +var popup_element = document.getElementById('popup'); +var popup = null; +var fail_element = document.getElementById('fail'); + +function fail(msg) { + console.log(msg); + + setText(fail_element, msg); + fail_element.style.top = '0.5em'; +} + +function fail_ajax(data) { + // abort() is not a failure + if(data.readyState == 0 && data.statusText == 'abort') return; + + if(data.status == 0) { + fail(lang.error_request_failed_connectivity, data); + } else if (data.statusText) { + 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; + } +} + +function getGeometry(object) { + return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0])) +} + +function updateVehicles() { + if(vehicles_timer) clearTimeout(vehicles_timer); + if(vehicles_xhr) vehicles_xhr.abort(); + + vehicles_xhr = $.get( + 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]; + + var vehicle_feature = vehicles_source.getFeatureById('v' + vehicle.id); + if(vehicle.isDeleted) { + if(vehicle_feature) { + vehicles_source.removeFeature(vehicle_feature); + if(popup_feature_id == vehicle_feature.getId()) { + popupHide(); + } + } + continue; + } + + 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 = getGeometry(vehicle); + vehicle.vehicle_type = parseVehicle(vehicle.id); + + if(!vehicle_feature) { + vehicle_feature = new ol.Feature(vehicle); + vehicle_feature.setId('v' + 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: color_type, width: 2}), + points: 3, + radius: 12, + 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'}), + }), + })); + 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()); + } + } + } + + vehicles_timer = setTimeout(function() { + updateVehicles(); + }, ttss_refresh); + }).fail(fail_ajax); +} + +function updateStopSource(stops, prefix, source) { + source.clear(); + + for(var i = 0; i < stops.length; i++) { + var stop = stops[i]; + stop.geometry = getGeometry(stop); + var stop_feature = new ol.Feature(stop); + + stop_feature.setId(prefix + stop.id); + stop_feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({color: 'orange'}), + stroke: new ol.style.Stroke({color: 'red', width: 1}), + radius: 3, + }), + })); + + source.addFeature(stop_feature); + } +} + +function updateStops() { + $.get( + ttss_base + '/geoserviceDispatcher/services/stopinfo/stops' + + '?left=-648000000' + + '&bottom=-324000000' + + '&right=648000000' + + '&top=324000000' + ).done(function(data) { + updateStopSource(data.stops, 's', stops_source); + }).fail(fail_ajax); +} + +function updateStopPoints() { + $.get( + ttss_base + '/geoserviceDispatcher/services/stopinfo/stopPoints' + + '?left=-648000000' + + '&bottom=-324000000' + + '&right=648000000' + + '&top=324000000' + ).done(function(data) { + updateStopSource(data.stopPoints, 'p', stop_points_source); + }).fail(fail_ajax); +} + +function init() { + if(!window.jQuery) { + fail(lang.jquery_not_loaded); + return; + } + + $.ajaxSetup({ + dataType: 'json', + timeout: 10000, + }); + + stops_source = new ol.source.Vector({ + features: [], + }); + stops_layer = new ol.layer.Vector({ + source: stops_source, + }); + + stop_points_source = new ol.source.Vector({ + features: [], + }); + stop_points_layer = new ol.layer.Vector({ + source: stop_points_source, + visible: false, + }); + + vehicles_source = new ol.source.Vector({ + features: [], + }); + vehicles_layer = new ol.layer.Vector({ + source: vehicles_source, + }); + + popup = new ol.Overlay({ + element: popup_element, + positioning: 'bottom-center', + stopEvent: false, + offset: [0, -12] + }); + + map = new ol.Map({ + target: 'map', + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }), + stops_layer, + stop_points_layer, + vehicles_layer, + ], + overlays: [popup], + view: new ol.View({ + center: ol.proj.fromLonLat([19.94, 50.06]), + zoom: 13 + }), + controls: ol.control.defaults({ + attributionOptions: ({ + collapsible: false, + }) + }).extend([ + new ol.control.Control({ + element: document.getElementById('title'), + }), + new ol.control.Control({ + element: fail_element, + }) + ]), + }); + + // Display popup on click + map.on('singleclick', function(e) { + var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) { return feature; }); + if(feature) { + var coordinates = feature.getGeometry().getCoordinates(); + + deleteChildren(popup_element); + + addParaWithText(popup_element, feature.get('name')).className = 'bold'; + switch(feature.getId().substr(0, 1)) { + case 'v': + var vehicle_type = parseVehicle(feature.get('id')); + if(vehicle_type) { + addParaWithText(popup_element, vehicle_type.num + ' ' + vehicle_type.type); + } + break; + } + + popupShow(coordinates, feature.getId()); + } else { + popupHide(); + } + }); + + // Change mouse cursor when over marker + map.on('pointermove', function(e) { + var hit = map.hasFeatureAtPixel(e.pixel); + var target = map.getTargetElement(); + target.style.cursor = hit ? 'pointer' : ''; + }); + + // Change layer visibility on zoom + map.getView().on('change:resolution', function(e) { + if(map.getView().getZoom() >= 16) { + stops_layer.setVisible(false); + stop_points_layer.setVisible(true); + } else { + stops_layer.setVisible(true); + stop_points_layer.setVisible(false); + } + }); + + updateVehicles(); + updateStops(); + updateStopPoints(); + + setTimeout(function() { + if(vehicles_xhr) vehicles_xhr.abort(); + if(vehicles_timer) clearTimeout(vehicles_timer); + + fail(lang.error_refresh); + }, 1800000); +} + +init(); diff --git a/proxy.php b/proxy.php index dad3670..9962f91 100644 --- a/proxy.php +++ b/proxy.php @@ -1,4 +1,17 @@ <?php +function is_number($str) { + $str = (string)$str; + + return + ctype_digit($str) + OR + ( + substr($str, 0, 1) == '-' + AND + ctype_digit(substr($str, 1)) + ); +} + $base_proxy = 'http://www.ttss.krakow.pl/internetservice'; $method = [ '/services/lookup/autocomplete/json' => [ @@ -7,6 +20,14 @@ '/services/passageInfo/stopPassages/stop' => [ 'stop' => 'ctype_alnum', 'mode' => function($mode) { return in_array($mode, ['arrival', 'departure']); }, + #'startTime' => 'ctype_digit', + #'timeFrame' => 'ctype_digit', + ], + '/services/passageInfo/stopPassages/stopPoint' => [ + 'stopPoint' => 'is_number', + 'mode' => function($mode) { return in_array($mode, ['arrival', 'departure']); }, + #'startTime' => 'ctype_digit', + #'timeFrame' => 'ctype_digit', ], '/services/tripInfo/tripPassages' => [ 'tripId' => 'ctype_digit', @@ -14,7 +35,38 @@ #'vehicleId' => 'ctype_digit', ], '/services/routeInfo/routeStops' => [ - 'routeId' => 'ctype_alnum' + 'routeId' => 'ctype_alnum', + ], + '/services/stopInfo/stop' => [ + 'stop' => 'is_number', + ], + '/services/stopInfo/stopPoint' => [ + 'stopPoint' => 'is_number', + ], + + '/geoserviceDispatcher/services/stopinfo/stops' => [ + 'left' => 'is_number', + 'bottom' => 'is_number', + 'right' => 'is_number', + 'top' => 'is_number', + ], + '/geoserviceDispatcher/services/stopinfo/stopPoints' => [ + 'left' => 'is_number', + 'bottom' => 'is_number', + 'right' => 'is_number', + 'top' => 'is_number', + ], + '/geoserviceDispatcher/services/pathinfo/route' => [ + 'id' => 'is_number', + 'direction' => 'is_number', + ], + '/geoserviceDispatcher/services/pathinfo/vehicle' => [ + 'id' => 'is_number', + ], + '/geoserviceDispatcher/services/vehicleinfo/vehicles' => [ + 'lastUpdate' => 'ctype_digit', + 'positionType' => function($type) { return in_array($type, ['CORRECTED']); }, + 'colorType' => function($type) { return in_array($type, ['ROUTE_BASED']); }, ], ]; $rewrite = [ -- Gitblit v1.9.1