| | |
| | | //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; |
| | |
| | | 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; |
| | |
| | | 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; |
| | | } |
| | |
| | | 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', |
| | |
| | | } |
| | | |
| | | 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; |
| | | } |
| | |
| | | |
| | | 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) { |
| | |
| | | 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(); |
| | | } |
| | | } |
| | |
| | | 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); |
| | | } |
| | | } |
| | | |
| | |
| | | + '?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; |
| | | } |
| | | |
| | |
| | | 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; |
| | |
| | | }).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; |
| | | |
| | |
| | | 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'); |
| | |
| | | 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); |
| | |
| | | |
| | | 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); |
| | | |
| | |
| | | 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; |
| | | } |
| | |
| | | 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) { |
| | |
| | | |
| | | 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) { |
| | |
| | | ]), |
| | | 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)); |
| | |
| | | |
| | | 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); |
| | |
| | | }); |
| | | |
| | | $.when( |
| | | updateVehicleInfo(), |
| | | updateVehicles(), |
| | | updateStops(), |
| | | updateStopPoints() |