| | |
| | | //var ttss_base = 'http://www.ttss.krakow.pl/internetservice'; |
| | | var ttss_base = '/proxy.php'; |
| | | var ttss_refresh = 5000; // 5 seconds |
| | | var ttss_refresh = 10000; // 10 seconds |
| | | |
| | | var vehicles_xhr = null; |
| | | var vehicles_timer = null; |
| | |
| | | var stop_points_source = null; |
| | | var stop_points_layer = null; |
| | | |
| | | var feature_id = null; |
| | | |
| | | var map = null; |
| | | var popup_feature_id = null; |
| | | var popup_element = document.getElementById('popup'); |
| | | var popup = null; |
| | | var fail_element = document.getElementById('fail'); |
| | | |
| | | var ignore_hashchange = false; |
| | | |
| | | function fail(msg) { |
| | | console.log(msg); |
| | |
| | | } |
| | | } |
| | | |
| | | 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])) |
| | | return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0])); |
| | | } |
| | | |
| | | function updateVehicles() { |
| | |
| | | if(vehicle.isDeleted) { |
| | | if(vehicle_feature) { |
| | | vehicles_source.removeFeature(vehicle_feature); |
| | | if(popup_feature_id == vehicle_feature.getId()) { |
| | | popupHide(); |
| | | if(feature_id == vehicle_feature.getId()) { |
| | | featureClicked(); |
| | | } |
| | | } |
| | | continue; |
| | |
| | | } |
| | | |
| | | 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, |
| | | image: new ol.style.Icon({ |
| | | src: 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:#3399ff;stroke:'+color_type+';stroke-width:2" /></svg>'), |
| | | rotation: Math.PI * parseFloat(vehicle.heading) / 180.0, |
| | | rotateWithView: true, |
| | | angle: 0 |
| | | }), |
| | | text: new ol.style.Text({ |
| | | font: 'bold 10px sans-serif', |
| | |
| | | } 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()); |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | updateVehicles(); |
| | | }, ttss_refresh); |
| | | }).fail(fail_ajax); |
| | | |
| | | return vehicles_xhr; |
| | | } |
| | | |
| | | function updateStopSource(stops, prefix, source) { |
| | |
| | | |
| | | for(var i = 0; i < stops.length; i++) { |
| | | var stop = stops[i]; |
| | | |
| | | if(stop.category == 'other') continue; |
| | | |
| | | stop.geometry = getGeometry(stop); |
| | | var stop_feature = new ol.Feature(stop); |
| | | |
| | |
| | | } |
| | | |
| | | function updateStops() { |
| | | $.get( |
| | | return $.get( |
| | | ttss_base + '/geoserviceDispatcher/services/stopinfo/stops' |
| | | + '?left=-648000000' |
| | | + '&bottom=-324000000' |
| | |
| | | } |
| | | |
| | | function updateStopPoints() { |
| | | $.get( |
| | | return $.get( |
| | | ttss_base + '/geoserviceDispatcher/services/stopinfo/stopPoints' |
| | | + '?left=-648000000' |
| | | + '&bottom=-324000000' |
| | |
| | | ).done(function(data) { |
| | | updateStopSource(data.stopPoints, 'p', stop_points_source); |
| | | }).fail(fail_ajax); |
| | | } |
| | | |
| | | function featureClicked(feature) { |
| | | if(!feature) { |
| | | feature_id = null; |
| | | |
| | | $(popup_element).removeClass('show'); |
| | | |
| | | ignore_hashchange = true; |
| | | window.location.hash = ''; |
| | | |
| | | return; |
| | | } |
| | | |
| | | var coordinates = feature.getGeometry().getCoordinates(); |
| | | |
| | | deleteChildren(popup_element); |
| | | |
| | | var type; |
| | | var name = feature.get('name'); |
| | | var additional; |
| | | |
| | | switch(feature.getId().substr(0, 1)) { |
| | | 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); |
| | | additional.insertBefore(span, additional.firstChild); |
| | | break; |
| | | case 's': |
| | | type = lang.type_stop; |
| | | break; |
| | | case 'p': |
| | | type = lang.type_stoppoint; |
| | | break; |
| | | } |
| | | |
| | | addParaWithText(popup_element, type).className = 'type'; |
| | | addParaWithText(popup_element, name).className = 'name'; |
| | | |
| | | if(additional) { |
| | | popup_element.appendChild(additional); |
| | | } |
| | | |
| | | ignore_hashchange = true; |
| | | window.location.hash = '#!' + feature.getId(); |
| | | |
| | | map.getView().animate({ |
| | | center: feature.getGeometry().getCoordinates(), |
| | | }); |
| | | |
| | | $(popup_element).addClass('show'); |
| | | |
| | | feature_id = feature.getId(); |
| | | } |
| | | |
| | | function hash() { |
| | | if(ignore_hashchange) { |
| | | ignore_hashchange = false; |
| | | return; |
| | | } |
| | | |
| | | var tramId = null; |
| | | |
| | | var vehicleId = null; |
| | | var stopId = null; |
| | | var stopPointId = null; |
| | | |
| | | var feature = null; |
| | | |
| | | if(window.location.hash.match(/^#!t[0-9]{3}$/)) { |
| | | 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]+$/)) { |
| | | vehicleId = window.location.hash.substr(3); |
| | | } else if(window.location.hash.match(/^#!s[0-9]+$/)) { |
| | | stopId = window.location.hash.substr(3); |
| | | } else if(window.location.hash.match(/^#!p[0-9]+$/)) { |
| | | stopPointId = window.location.hash.substr(3); |
| | | } |
| | | |
| | | if(tramId) { |
| | | vehicleId = tramIdToVehicleId(tramId); |
| | | } |
| | | |
| | | if(vehicleId) { |
| | | feature = vehicles_source.getFeatureById('v' + vehicleId); |
| | | } else if(stopId) { |
| | | feature = stops_source.getFeatureById('s' + stopId); |
| | | } else if(stopPointId) { |
| | | feature = stop_points_source.getFeatureById('p' + stopPointId); |
| | | } |
| | | |
| | | featureClicked(feature); |
| | | } |
| | | |
| | | function init() { |
| | |
| | | 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: [ |
| | |
| | | stop_points_layer, |
| | | vehicles_layer, |
| | | ], |
| | | overlays: [popup], |
| | | view: new ol.View({ |
| | | center: ol.proj.fromLonLat([19.94, 50.06]), |
| | | zoom: 13 |
| | |
| | | // 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(); |
| | | } |
| | | featureClicked(feature); |
| | | }); |
| | | |
| | | // Change mouse cursor when over marker |
| | |
| | | } |
| | | }); |
| | | |
| | | updateVehicles(); |
| | | updateStops(); |
| | | updateStopPoints(); |
| | | $.when( |
| | | updateVehicles(), |
| | | updateStops(), |
| | | updateStopPoints() |
| | | ).done(function() { |
| | | hash(); |
| | | }); |
| | | |
| | | window.addEventListener('hashchange', hash); |
| | | |
| | | setTimeout(function() { |
| | | if(vehicles_xhr) vehicles_xhr.abort(); |