| New file |
| | |
|---|
| | | //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(); |
|---|
