| commit | author | age | ||
| 57b8d3 | 1 | //var ttss_base = 'http://www.ttss.krakow.pl/internetservice'; |
| JK | 2 | var ttss_base = '/proxy.php'; |
| 3 | var ttss_refresh = 5000; // 5 seconds | |
| 4 | ||
| 5 | var vehicles_xhr = null; | |
| 6 | var vehicles_timer = null; | |
| 7 | var vehicles_last_update = 0; | |
| 8 | var vehicles_source = null; | |
| 9 | var vehicles_layer = null; | |
| 10 | ||
| 11 | var stops_xhr = null; | |
| 12 | var stops_source = null; | |
| 13 | var stops_layer = null; | |
| 14 | var stop_points_source = null; | |
| 15 | var stop_points_layer = null; | |
| 16 | ||
| 17 | var map = null; | |
| 18 | var popup_feature_id = null; | |
| 19 | var popup_element = document.getElementById('popup'); | |
| 20 | var popup = null; | |
| 21 | var fail_element = document.getElementById('fail'); | |
| 22 | ||
| 23 | function fail(msg) { | |
| 24 | console.log(msg); | |
| 25 | ||
| 26 | setText(fail_element, msg); | |
| 27 | fail_element.style.top = '0.5em'; | |
| 28 | } | |
| 29 | ||
| 30 | function fail_ajax(data) { | |
| 31 | // abort() is not a failure | |
| 32 | if(data.readyState == 0 && data.statusText == 'abort') return; | |
| 33 | ||
| 34 | if(data.status == 0) { | |
| 35 | fail(lang.error_request_failed_connectivity, data); | |
| 36 | } else if (data.statusText) { | |
| 37 | fail(lang.error_request_failed_status.replace('$status', data.statusText), data); | |
| 38 | } else { | |
| 39 | fail(lang.error_request_failed, data); | |
| 40 | } | |
| 41 | } | |
| 42 | ||
| 43 | function popupHide() { | |
| 44 | popup.setPosition(undefined); | |
| 45 | popup_feature_id = null; | |
| 46 | } | |
| 47 | ||
| 48 | function popupShow(coordinates, id) { | |
| 49 | popup.setPosition(coordinates); | |
| 50 | if(id) { | |
| 51 | popup_feature_id = id; | |
| 52 | } | |
| 53 | } | |
| 54 | ||
| 55 | function getGeometry(object) { | |
| 56 | return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0])) | |
| 57 | } | |
| 58 | ||
| 59 | function updateVehicles() { | |
| 60 | if(vehicles_timer) clearTimeout(vehicles_timer); | |
| 61 | if(vehicles_xhr) vehicles_xhr.abort(); | |
| 62 | ||
| 63 | vehicles_xhr = $.get( | |
| 64 | ttss_base + '/geoserviceDispatcher/services/vehicleinfo/vehicles' | |
| 65 | + '?positionType=CORRECTED' | |
| 66 | + '&colorType=ROUTE_BASED' | |
| 67 | + '&lastUpdate=' + encodeURIComponent(vehicles_last_update) | |
| 68 | ).done(function(data) { | |
| 69 | vehicles_last_update = data.lastUpdate; | |
| 70 | ||
| 71 | for(var i = 0; i < data.vehicles.length; i++) { | |
| 72 | var vehicle = data.vehicles[i]; | |
| 73 | ||
| 74 | var vehicle_feature = vehicles_source.getFeatureById('v' + vehicle.id); | |
| 75 | if(vehicle.isDeleted) { | |
| 76 | if(vehicle_feature) { | |
| 77 | vehicles_source.removeFeature(vehicle_feature); | |
| 78 | if(popup_feature_id == vehicle_feature.getId()) { | |
| 79 | popupHide(); | |
| 80 | } | |
| 81 | } | |
| 82 | continue; | |
| 83 | } | |
| 84 | ||
| 85 | var vehicle_name_space = vehicle.name.indexOf(' '); | |
| 86 | vehicle.line = vehicle.name.substr(0, vehicle_name_space); | |
| 87 | vehicle.direction = vehicle.name.substr(vehicle_name_space+1); | |
| 88 | if(special_directions[vehicle.direction]) { | |
| 89 | vehicle.line = special_directions[vehicle.direction]; | |
| 90 | } | |
| 91 | ||
| 92 | vehicle.geometry = getGeometry(vehicle); | |
| 93 | vehicle.vehicle_type = parseVehicle(vehicle.id); | |
| 94 | ||
| 95 | if(!vehicle_feature) { | |
| 96 | vehicle_feature = new ol.Feature(vehicle); | |
| 97 | vehicle_feature.setId('v' + vehicle.id); | |
| 98 | ||
| 99 | var color_type = 'black'; | |
| 100 | if(vehicle.vehicle_type) { | |
| 101 | switch(vehicle.vehicle_type.low) { | |
| 102 | case 0: | |
| 103 | color_type = 'orange'; | |
| 104 | break; | |
| 105 | case 1: | |
| 106 | color_type = 'blue'; | |
| 107 | break; | |
| 108 | case 2: | |
| 109 | color_type = 'green'; | |
| 110 | break; | |
| 111 | } | |
| 112 | } | |
| 113 | ||
| 114 | vehicle_feature.setStyle(new ol.style.Style({ | |
| 115 | image: new ol.style.RegularShape({ | |
| 116 | fill: new ol.style.Fill({color: '#3399ff'}), | |
| 117 | stroke: new ol.style.Stroke({color: color_type, width: 2}), | |
| 118 | points: 3, | |
| 119 | radius: 12, | |
| 120 | rotation: Math.PI * parseFloat(vehicle.heading) / 180.0, | |
| 121 | rotateWithView: true, | |
| 122 | angle: 0 | |
| 123 | }), | |
| 124 | text: new ol.style.Text({ | |
| 125 | font: 'bold 10px sans-serif', | |
| 126 | text: vehicle.line, | |
| 127 | fill: new ol.style.Fill({color: 'white'}), | |
| 128 | }), | |
| 129 | })); | |
| 130 | vehicles_source.addFeature(vehicle_feature); | |
| 131 | } else { | |
| 132 | vehicle_feature.setProperties(vehicle); | |
| 133 | vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading) / 180.0); | |
| 134 | ||
| 135 | if(popup_feature_id == vehicle_feature.getId()) { | |
| 136 | popupShow(vehicle_feature.getGeometry().getCoordinates()); | |
| 137 | } | |
| 138 | } | |
| 139 | } | |
| 140 | ||
| 141 | vehicles_timer = setTimeout(function() { | |
| 142 | updateVehicles(); | |
| 143 | }, ttss_refresh); | |
| 144 | }).fail(fail_ajax); | |
| 145 | } | |
| 146 | ||
| 147 | function updateStopSource(stops, prefix, source) { | |
| 148 | source.clear(); | |
| 149 | ||
| 150 | for(var i = 0; i < stops.length; i++) { | |
| 151 | var stop = stops[i]; | |
| 152 | stop.geometry = getGeometry(stop); | |
| 153 | var stop_feature = new ol.Feature(stop); | |
| 154 | ||
| 155 | stop_feature.setId(prefix + stop.id); | |
| 156 | stop_feature.setStyle(new ol.style.Style({ | |
| 157 | image: new ol.style.Circle({ | |
| 158 | fill: new ol.style.Fill({color: 'orange'}), | |
| 159 | stroke: new ol.style.Stroke({color: 'red', width: 1}), | |
| 160 | radius: 3, | |
| 161 | }), | |
| 162 | })); | |
| 163 | ||
| 164 | source.addFeature(stop_feature); | |
| 165 | } | |
| 166 | } | |
| 167 | ||
| 168 | function updateStops() { | |
| 169 | $.get( | |
| 170 | ttss_base + '/geoserviceDispatcher/services/stopinfo/stops' | |
| 171 | + '?left=-648000000' | |
| 172 | + '&bottom=-324000000' | |
| 173 | + '&right=648000000' | |
| 174 | + '&top=324000000' | |
| 175 | ).done(function(data) { | |
| 176 | updateStopSource(data.stops, 's', stops_source); | |
| 177 | }).fail(fail_ajax); | |
| 178 | } | |
| 179 | ||
| 180 | function updateStopPoints() { | |
| 181 | $.get( | |
| 182 | ttss_base + '/geoserviceDispatcher/services/stopinfo/stopPoints' | |
| 183 | + '?left=-648000000' | |
| 184 | + '&bottom=-324000000' | |
| 185 | + '&right=648000000' | |
| 186 | + '&top=324000000' | |
| 187 | ).done(function(data) { | |
| 188 | updateStopSource(data.stopPoints, 'p', stop_points_source); | |
| 189 | }).fail(fail_ajax); | |
| 190 | } | |
| 191 | ||
| 192 | function init() { | |
| 193 | if(!window.jQuery) { | |
| 194 | fail(lang.jquery_not_loaded); | |
| 195 | return; | |
| 196 | } | |
| 197 | ||
| 198 | $.ajaxSetup({ | |
| 199 | dataType: 'json', | |
| 200 | timeout: 10000, | |
| 201 | }); | |
| 202 | ||
| 203 | stops_source = new ol.source.Vector({ | |
| 204 | features: [], | |
| 205 | }); | |
| 206 | stops_layer = new ol.layer.Vector({ | |
| 207 | source: stops_source, | |
| 208 | }); | |
| 209 | ||
| 210 | stop_points_source = new ol.source.Vector({ | |
| 211 | features: [], | |
| 212 | }); | |
| 213 | stop_points_layer = new ol.layer.Vector({ | |
| 214 | source: stop_points_source, | |
| 215 | visible: false, | |
| 216 | }); | |
| 217 | ||
| 218 | vehicles_source = new ol.source.Vector({ | |
| 219 | features: [], | |
| 220 | }); | |
| 221 | vehicles_layer = new ol.layer.Vector({ | |
| 222 | source: vehicles_source, | |
| 223 | }); | |
| 224 | ||
| 225 | popup = new ol.Overlay({ | |
| 226 | element: popup_element, | |
| 227 | positioning: 'bottom-center', | |
| 228 | stopEvent: false, | |
| 229 | offset: [0, -12] | |
| 230 | }); | |
| 231 | ||
| 232 | map = new ol.Map({ | |
| 233 | target: 'map', | |
| 234 | layers: [ | |
| 235 | new ol.layer.Tile({ | |
| 236 | source: new ol.source.OSM() | |
| 237 | }), | |
| 238 | stops_layer, | |
| 239 | stop_points_layer, | |
| 240 | vehicles_layer, | |
| 241 | ], | |
| 242 | overlays: [popup], | |
| 243 | view: new ol.View({ | |
| 244 | center: ol.proj.fromLonLat([19.94, 50.06]), | |
| 245 | zoom: 13 | |
| 246 | }), | |
| 247 | controls: ol.control.defaults({ | |
| 248 | attributionOptions: ({ | |
| 249 | collapsible: false, | |
| 250 | }) | |
| 251 | }).extend([ | |
| 252 | new ol.control.Control({ | |
| 253 | element: document.getElementById('title'), | |
| 254 | }), | |
| 255 | new ol.control.Control({ | |
| 256 | element: fail_element, | |
| 257 | }) | |
| 258 | ]), | |
| 259 | }); | |
| 260 | ||
| 261 | // Display popup on click | |
| 262 | map.on('singleclick', function(e) { | |
| 263 | var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) { return feature; }); | |
| 264 | if(feature) { | |
| 265 | var coordinates = feature.getGeometry().getCoordinates(); | |
| 266 | ||
| 267 | deleteChildren(popup_element); | |
| 268 | ||
| 269 | addParaWithText(popup_element, feature.get('name')).className = 'bold'; | |
| 270 | switch(feature.getId().substr(0, 1)) { | |
| 271 | case 'v': | |
| 272 | var vehicle_type = parseVehicle(feature.get('id')); | |
| 273 | if(vehicle_type) { | |
| 274 | addParaWithText(popup_element, vehicle_type.num + ' ' + vehicle_type.type); | |
| 275 | } | |
| 276 | break; | |
| 277 | } | |
| 278 | ||
| 279 | popupShow(coordinates, feature.getId()); | |
| 280 | } else { | |
| 281 | popupHide(); | |
| 282 | } | |
| 283 | }); | |
| 284 | ||
| 285 | // Change mouse cursor when over marker | |
| 286 | map.on('pointermove', function(e) { | |
| 287 | var hit = map.hasFeatureAtPixel(e.pixel); | |
| 288 | var target = map.getTargetElement(); | |
| 289 | target.style.cursor = hit ? 'pointer' : ''; | |
| 290 | }); | |
| 291 | ||
| 292 | // Change layer visibility on zoom | |
| 293 | map.getView().on('change:resolution', function(e) { | |
| 294 | if(map.getView().getZoom() >= 16) { | |
| 295 | stops_layer.setVisible(false); | |
| 296 | stop_points_layer.setVisible(true); | |
| 297 | } else { | |
| 298 | stops_layer.setVisible(true); | |
| 299 | stop_points_layer.setVisible(false); | |
| 300 | } | |
| 301 | }); | |
| 302 | ||
| 303 | updateVehicles(); | |
| 304 | updateStops(); | |
| 305 | updateStopPoints(); | |
| 306 | ||
| 307 | setTimeout(function() { | |
| 308 | if(vehicles_xhr) vehicles_xhr.abort(); | |
| 309 | if(vehicles_timer) clearTimeout(vehicles_timer); | |
| 310 | ||
| 311 | fail(lang.error_refresh); | |
| 312 | }, 1800000); | |
| 313 | } | |
| 314 | ||
| 315 | init(); | |
