Improved www.ttss.krakow.pl
Jacek Kowalski
2019-01-29 c38abaedc00f514396cc89338bf3e5b7e4e57017
commit | author | age
eafc1c 1 //var ttss_trams_base = 'http://www.ttss.krakow.pl/internetservice';
JK 2 var ttss_trams_base = 'proxy_tram.php';
3 //var ttss_buses_base = 'http://91.223.13.70/internetservice';
4 var ttss_buses_base = 'proxy_bus.php';
f36d1f 5 var ttss_refresh = 10000; // 10 seconds
a8a6d1 6 var ttss_position_type = 'CORRECTED';
57b8d3 7
eafc1c 8 var trams_xhr = null;
JK 9 var trams_timer = null;
10 var trams_last_update = 0;
11 var trams_source = null;
12 var trams_layer = null;
13
14 var buses_xhr = null;
15 var buses_timer = null;
16 var buses_last_update = 0;
17 var buses_source = null;
18 var buses_layer = null;
19
f0bae0 20 var vehicles_info = {};
57b8d3 21
JK 22 var stops_xhr = null;
23 var stops_source = null;
24 var stops_layer = null;
25 var stop_points_source = null;
26 var stop_points_layer = null;
27
1d4785 28 var feature_clicked = null;
JK 29 var feature_selected = [];
8b6250 30 var feature_xhr = null;
JK 31 var feature_timer = null;
1d4785 32
JK 33 var route_source = null;
34 var route_layer = null;
07c714 35
57b8d3 36 var map = null;
JK 37 var popup_element = document.getElementById('popup');
9f0f6a 38 var popup_close_callback;
57b8d3 39 var fail_element = document.getElementById('fail');
JK 40
7ca6a1 41 var ignore_hashchange = false;
JK 42
57b8d3 43 function fail(msg) {
JK 44     setText(fail_element, msg);
45     fail_element.style.top = '0.5em';
46 }
47
8b6250 48 function fail_popup(msg) {
JK 49     addElementWithText(popup_element, 'p', msg).className = 'error';
50 }
51
52 function fail_ajax_generic(data, fnc) {
57b8d3 53     // abort() is not a failure
JK 54     if(data.readyState == 0 && data.statusText == 'abort') return;
55     
56     if(data.status == 0) {
8b6250 57         fnc(lang.error_request_failed_connectivity, data);
57b8d3 58     } else if (data.statusText) {
8b6250 59         fnc(lang.error_request_failed_status.replace('$status', data.statusText), data);
57b8d3 60     } else {
8b6250 61         fnc(lang.error_request_failed, data);
57b8d3 62     }
8b6250 63 }
JK 64
65 function fail_ajax(data) {
66     fail_ajax_generic(data, fail);
67 }
68
69 function fail_ajax_popup(data) {
70     fail_ajax_generic(data, fail_popup);
57b8d3 71 }
JK 72
73 function getGeometry(object) {
07c714 74     return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0]));
57b8d3 75 }
JK 76
1d4785 77 function styleVehicle(vehicle, selected) {
JK 78     var color_type = 'black';
79     if(vehicle.get('vehicle_type')) {
80         switch(vehicle.get('vehicle_type').low) {
f0bae0 81             case '0':
1d4785 82                 color_type = 'orange';
JK 83             break;
f0bae0 84             case '1':
1d4785 85                 color_type = 'blue';
JK 86             break;
f0bae0 87             case '2':
1d4785 88                 color_type = 'green';
JK 89             break;
90         }
91     }
92     
6cb525 93     var fill = '#F60';
JK 94     if(vehicle.getId().startsWith('b')) {
95         fill = '#05B';
96     }
97     if(selected) {
98         fill = '#292';
99     }
1d4785 100     
JK 101     var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:2" /></svg>';
102     
103     return new ol.style.Style({
104         image: new ol.style.Icon({
105             src: 'data:image/svg+xml;base64,' + btoa(image),
a8a6d1 106             rotation: Math.PI * parseFloat(vehicle.get('heading') ? vehicle.get('heading') : 0) / 180.0,
1d4785 107         }),
JK 108         text: new ol.style.Text({
109             font: 'bold 10px sans-serif',
110             text: vehicle.get('line'),
111             fill: new ol.style.Fill({color: 'white'}),
112         }),
113     });
114 }
115
116 function styleStop(stop, selected) {
ba6e87 117     var fill = '#FA0';
JK 118     var stroke = '#B70';
119     var stroke_selected = '#F00';
1d4785 120     var stroke_width = 1;
JK 121     var radius = 3;
ba6e87 122     
JK 123     if(stop.get('category') == 'bus') {
124         fill = '#07F';
125         stroke = '#05B';
126     }
1d4785 127     
JK 128     if(selected == 2) {
129         radius = 5;
130     } else if(selected) {
ba6e87 131         stroke = stroke_selected;
1d4785 132         stroke_width = 2;
JK 133         radius = 5;
134     }
135     
136     return new ol.style.Style({
137         image: new ol.style.Circle({
138             fill: new ol.style.Fill({color: fill}),
139             stroke: new ol.style.Stroke({color: stroke, width: stroke_width}),
140             radius: radius,
141         }),
142     });
143 }
144
145 function styleFeature(feature, selected) {
146     if(!feature) return;
147     if(!feature.getId()) return;
148     
149     var style = null;
150     
151     switch(feature.getId().substr(0, 1)) {
eafc1c 152         case 't':
JK 153         case 'b':
1d4785 154             style = styleVehicle(feature, selected);
JK 155         break;
156         
157         case 's':
158         case 'p':
159             style = styleStop(feature, selected);
160         break;
161     }
162     
163     feature.setStyle(style);
164     if(selected) {
165         feature_selected.push(feature);
166     }
167 }
168
169 function unstyleSelectedFeatures() {
170     for(var i = 0; i < feature_selected.length; i++) {
171         styleFeature(feature_selected[i]);
172     }
173     feature_selected = [];
174 }
175
eafc1c 176 function updateTrams() {
JK 177     if(trams_timer) clearTimeout(trams_timer);
178     if(trams_xhr) trams_xhr.abort();
179     trams_xhr = $.get(
180         ttss_trams_base + '/geoserviceDispatcher/services/vehicleinfo/vehicles'
a8a6d1 181             + '?positionType=' + ttss_position_type
57b8d3 182             + '&colorType=ROUTE_BASED'
eafc1c 183             + '&lastUpdate=' + encodeURIComponent(trams_last_update)
57b8d3 184     ).done(function(data) {
eafc1c 185         trams_last_update = data.lastUpdate;
57b8d3 186         
JK 187         for(var i = 0; i < data.vehicles.length; i++) {
188             var vehicle = data.vehicles[i];
189             
eafc1c 190             var vehicle_feature = trams_source.getFeatureById('t' + vehicle.id);
57b8d3 191             if(vehicle.isDeleted) {
JK 192                 if(vehicle_feature) {
eafc1c 193                     trams_source.removeFeature(vehicle_feature);
745cfd 194                     if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) {
07c714 195                         featureClicked();
57b8d3 196                     }
JK 197                 }
198                 continue;
199             }
200             
201             var vehicle_name_space = vehicle.name.indexOf(' ');
202             vehicle.line = vehicle.name.substr(0, vehicle_name_space);
203             vehicle.direction = vehicle.name.substr(vehicle_name_space+1);
204             if(special_directions[vehicle.direction]) {
205                 vehicle.line = special_directions[vehicle.direction];
206             }
207             
208             vehicle.geometry = getGeometry(vehicle);
209             vehicle.vehicle_type = parseVehicle(vehicle.id);
210             
211             if(!vehicle_feature) {
212                 vehicle_feature = new ol.Feature(vehicle);
eafc1c 213                 vehicle_feature.setId('t' + vehicle.id);
57b8d3 214                 
1d4785 215                 styleFeature(vehicle_feature);
eafc1c 216                 trams_source.addFeature(vehicle_feature);
57b8d3 217             } else {
JK 218                 vehicle_feature.setProperties(vehicle);
a8a6d1 219                 vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading ? vehicle.heading : 0) / 180.0);
57b8d3 220             }
JK 221         }
222         
eafc1c 223         trams_timer = setTimeout(function() {
JK 224             updateTrams();
57b8d3 225         }, ttss_refresh);
JK 226     }).fail(fail_ajax);
7ca6a1 227     
eafc1c 228     return trams_xhr;
JK 229 }
230
231 function updateBuses() {
232     if(buses_timer) clearTimeout(buses_timer);
233     if(buses_xhr) buses_xhr.abort();
234     
235     buses_xhr = $.get(
236         ttss_buses_base + '/geoserviceDispatcher/services/vehicleinfo/vehicles'
237             + '?positionType=' + ttss_position_type
238             + '&colorType=ROUTE_BASED'
239             + '&lastUpdate=' + encodeURIComponent(buses_last_update)
240     ).done(function(data) {
241         buses_last_update = data.lastUpdate;
242         
243         for(var i = 0; i < data.vehicles.length; i++) {
244             var vehicle = data.vehicles[i];
245             
246             var vehicle_feature = buses_source.getFeatureById('b' + vehicle.id);
247             if(vehicle.isDeleted) {
248                 if(vehicle_feature) {
249                     buses_source.removeFeature(vehicle_feature);
250                     if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) {
251                         featureClicked();
252                     }
253                 }
254                 continue;
255             }
256             
257             var vehicle_name_space = vehicle.name.indexOf(' ');
258             vehicle.line = vehicle.name.substr(0, vehicle_name_space);
259             vehicle.direction = vehicle.name.substr(vehicle_name_space+1);
260             if(special_directions[vehicle.direction]) {
261                 vehicle.line = special_directions[vehicle.direction];
262             }
263             
264             vehicle.geometry = getGeometry(vehicle);
265             vehicle.vehicle_type = parseVehicle(vehicle.id);
266             
267             if(!vehicle_feature) {
268                 vehicle_feature = new ol.Feature(vehicle);
269                 vehicle_feature.setId('b' + vehicle.id);
270                 
271                 styleFeature(vehicle_feature);
272                 buses_source.addFeature(vehicle_feature);
273             } else {
274                 vehicle_feature.setProperties(vehicle);
275                 vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading) / 180.0);
276             }
277         }
278         
279         buses_timer = setTimeout(function() {
280             updateBuses();
281         }, ttss_refresh);
282     }).fail(fail_ajax);
283     
284     return buses_xhr;
57b8d3 285 }
JK 286
287 function updateStopSource(stops, prefix, source) {
288     for(var i = 0; i < stops.length; i++) {
289         var stop = stops[i];
e61357 290         
JK 291         if(stop.category == 'other') continue;
292         
57b8d3 293         stop.geometry = getGeometry(stop);
JK 294         var stop_feature = new ol.Feature(stop);
295         
296         stop_feature.setId(prefix + stop.id);
1d4785 297         styleFeature(stop_feature);
57b8d3 298         
JK 299         source.addFeature(stop_feature);
300     }
301 }
302
eafc1c 303 function updateStops(base, suffix) {
7ca6a1 304     return $.get(
eafc1c 305         base + '/geoserviceDispatcher/services/stopinfo/stops'
57b8d3 306             + '?left=-648000000'
JK 307             + '&bottom=-324000000'
308             + '&right=648000000'
309             + '&top=324000000'
310     ).done(function(data) {
eafc1c 311         updateStopSource(data.stops, 's' + suffix, stops_source);
57b8d3 312     }).fail(fail_ajax);
JK 313 }
314
eafc1c 315 function updateStopPoints(base, suffix) {
7ca6a1 316     return $.get(
eafc1c 317         base + '/geoserviceDispatcher/services/stopinfo/stopPoints'
57b8d3 318             + '?left=-648000000'
JK 319             + '&bottom=-324000000'
320             + '&right=648000000'
321             + '&top=324000000'
322     ).done(function(data) {
eafc1c 323         updateStopSource(data.stopPoints, 'p' + suffix, stop_points_source);
57b8d3 324     }).fail(fail_ajax);
7ca6a1 325 }
JK 326
eafc1c 327 function vehicleTable(tripId, table, featureId) {
8b6250 328     if(feature_xhr) feature_xhr.abort();
JK 329     if(feature_timer) clearTimeout(feature_timer);
330     
eafc1c 331     var url = ttss_trams_base;
JK 332     if(featureId.startsWith('b')) {
333         url = ttss_buses_base;
334     }
335     
336     var vehicleId = featureId.substr(1);
337     
8b6250 338     feature_xhr = $.get(
eafc1c 339         url + '/services/tripInfo/tripPassages'
8b6250 340             + '?tripId=' + encodeURIComponent(tripId)
JK 341             + '&mode=departure'
342     ).done(function(data) {
98ba34 343         if(!data.routeName || !data.directionText) {
8b6250 344             return;
JK 345         }
346         
347         deleteChildren(table);
348         
349         for(var i = 0, il = data.old.length; i < il; i++) {
350             var tr = document.createElement('tr');
351             addCellWithText(tr, data.old[i].actualTime || data.old[i].plannedTime);
352             addCellWithText(tr, data.old[i].stop_seq_num + '. ' + data.old[i].stop.name);
353             
354             tr.className = 'active';
355             table.appendChild(tr);
356         }
357         
1d4785 358         unstyleSelectedFeatures();
JK 359         styleFeature(feature_clicked, true);
360         
8b6250 361         for(var i = 0, il = data.actual.length; i < il; i++) {
JK 362             var tr = document.createElement('tr');
363             addCellWithText(tr, data.actual[i].actualTime || data.actual[i].plannedTime);
364             addCellWithText(tr, data.actual[i].stop_seq_num + '. ' + data.actual[i].stop.name);
1d4785 365             
JK 366             styleFeature(stops_source.getFeatureById('s' + data.actual[i].stop.id), 2);
8b6250 367             
JK 368             if(data.actual[i].status == 'STOPPING') {
369                 tr.className = 'success';
370             }
371             table.appendChild(tr);
372         }
373         
eafc1c 374         feature_timer = setTimeout(function() { vehicleTable(tripId, table, featureId); }, ttss_refresh);
1d4785 375         
JK 376         if(!vehicleId) return;
377            
378         feature_xhr = $.get(
eafc1c 379             url + '/geoserviceDispatcher/services/pathinfo/vehicle'
1d4785 380                 + '?id=' + encodeURIComponent(vehicleId)
JK 381         ).done(function(data) {
382             if(!data || !data.paths || !data.paths[0] || !data.paths[0].wayPoints) return;
383             
384             var point = null;
385             var points = [];
386             for(var i = 0; i < data.paths[0].wayPoints.length; i++) {
387                 point = data.paths[0].wayPoints[i];
388                 points.push(ol.proj.fromLonLat([
389                     point.lon / 3600000.0,
390                     point.lat / 3600000.0,
391                 ]));
392             }
393             
394             route_source.addFeature(new ol.Feature({
395                 geometry: new ol.geom.LineString(points)
396             }));
397         });
8b6250 398     }).fail(fail_ajax_popup);
JK 399 }
400
eafc1c 401 function stopTable(stopType, stopId, table, featureId) {
8b6250 402     if(feature_xhr) feature_xhr.abort();
JK 403     if(feature_timer) clearTimeout(feature_timer);
404     
eafc1c 405     var url = ttss_trams_base;
JK 406     if(featureId.substr(1,1) == 'b') {
407         url = ttss_buses_base;
408     }
409     
8b6250 410     feature_xhr = $.get(
eafc1c 411         url + '/services/passageInfo/stopPassages/' + stopType
8b6250 412             + '?' + stopType + '=' + encodeURIComponent(stopId)
JK 413             + '&mode=departure'
414     ).done(function(data) {
415         deleteChildren(table);
416         
417         for(var i = 0, il = data.old.length; i < il; i++) {
418             var tr = document.createElement('tr');
419             addCellWithText(tr, data.old[i].patternText);
420             var dir_cell = addCellWithText(tr, data.old[i].direction);
421             var vehicle = parseVehicle(data.old[i].vehicleId);
422             dir_cell.appendChild(displayVehicle(vehicle));
423             var status = parseStatus(data.old[i]);
424             addCellWithText(tr, status);
425             addCellWithText(tr, '');
426             
427             tr.className = 'active';
428             table.appendChild(tr);
429         }
430         
431         for(var i = 0, il = data.actual.length; i < il; i++) {
432             var tr = document.createElement('tr');
433             addCellWithText(tr, data.actual[i].patternText);
434             var dir_cell = addCellWithText(tr, data.actual[i].direction);
435             var vehicle = parseVehicle(data.actual[i].vehicleId);
436             dir_cell.appendChild(displayVehicle(vehicle));
437             var status = parseStatus(data.actual[i]);
438             var status_cell = addCellWithText(tr, status);
439             var delay = parseDelay(data.actual[i]);
440             var delay_cell = addCellWithText(tr, delay);
441             
442             if(status == lang.boarding_sign) {
443                 tr.className = 'success';
444                 status_cell.className = 'status-boarding';
445             } else if(parseInt(delay) > 9) {
446                 tr.className = 'danger';
447                 delay_cell.className = 'status-delayed';
448             } else if(parseInt(delay) > 3) {
449                 tr.className = 'warning';
450             }
451             
452             table.appendChild(tr);
453         }
454         
eafc1c 455         feature_timer = setTimeout(function() { stopTable(stopType, stopId, table, featureId); }, ttss_refresh);
8b6250 456     }).fail(fail_ajax_popup);
JK 457 }
458
9f0f6a 459 function showPanel(contents, closeCallback) {
JK 460     var old_callback = popup_close_callback;
461     popup_close_callback = null;
462     if(old_callback) old_callback();
463     popup_close_callback = closeCallback;
464     
465     deleteChildren(popup_element);
466     
467     var close = addParaWithText(popup_element, '×');
468     close.className = 'close';
469     close.addEventListener('click', function() { hidePanel(); });
470     
471     popup_element.appendChild(contents);
472     
473     $(popup_element).addClass('show');
474 }
475
476 function hidePanel() {
477     var old_callback = popup_close_callback;
478     popup_close_callback = null;
479     if(old_callback) old_callback();
480     
481     $(popup_element).removeClass('show');
482 }
483
7ca6a1 484 function featureClicked(feature) {
1d4785 485     if(feature && !feature.getId()) return;
JK 486     
487     unstyleSelectedFeatures();
488     route_source.clear();
489     
7ca6a1 490     if(!feature) {
9f0f6a 491         hidePanel();
7ca6a1 492         return;
JK 493     }
494     
495     var coordinates = feature.getGeometry().getCoordinates();
496     
9f0f6a 497     var div = document.createElement('div');
8b6250 498     
07c714 499     var type;
JK 500     var name = feature.get('name');
501     var additional;
8b6250 502     var table = document.createElement('table');
JK 503     var thead = document.createElement('thead');
504     var tbody = document.createElement('tbody');
505     table.appendChild(thead);
506     table.appendChild(tbody);
07c714 507     
7ca6a1 508     switch(feature.getId().substr(0, 1)) {
eafc1c 509         case 't':
JK 510         case 'b':
07c714 511             type = lang.type_vehicle;
JK 512             
513             var span = displayVehicle(feature.get('vehicle_type'));
514             
515             additional = document.createElement('p');
439d60 516             if(span.title) {
JK 517                 setText(additional, span.title);
f0bae0 518             } else {
JK 519                 setText(additional, feature.getId());
439d60 520             }
07c714 521             additional.insertBefore(span, additional.firstChild);
8b6250 522             
JK 523             addElementWithText(thead, 'th', lang.header_time);
524             addElementWithText(thead, 'th', lang.header_stop);
525             
eafc1c 526             vehicleTable(feature.get('tripId'), tbody, feature.getId());
7ca6a1 527         break;
07c714 528         case 's':
JK 529             type = lang.type_stop;
8b6250 530             
JK 531             addElementWithText(thead, 'th', lang.header_line);
532             addElementWithText(thead, 'th', lang.header_direction);
533             addElementWithText(thead, 'th', lang.header_time);
534             addElementWithText(thead, 'th', lang.header_delay);
535             
eafc1c 536             stopTable('stop', feature.get('shortName'), tbody, feature.getId());
07c714 537         break;
JK 538         case 'p':
539             type = lang.type_stoppoint;
8b6250 540             
JK 541             additional = document.createElement('p');
542             additional.className = 'small';
543             addElementWithText(additional, 'a', lang.departures_for_stop).addEventListener(
544                 'click',
545                 function() {
546                     featureClicked(stops_source.forEachFeature(function(stop_feature) {
547                         if(stop_feature.get('shortName') == feature.get('shortName')) {
548                             return stop_feature;
549                         }
550                     }));
551                 }
552             );
553             
554             addElementWithText(thead, 'th', lang.header_line);
555             addElementWithText(thead, 'th', lang.header_direction);
556             addElementWithText(thead, 'th', lang.header_time);
557             addElementWithText(thead, 'th', lang.header_delay);
558             
eafc1c 559             stopTable('stopPoint', feature.get('stopPoint'), tbody, feature.getId());
07c714 560         break;
JK 561     }
8b6250 562     
JK 563     var loader = addElementWithText(tbody, 'td', lang.loading);
564     loader.className = 'active';
ee4e7c 565     loader.colSpan = thead.childNodes.length;
07c714 566     
9f0f6a 567     addParaWithText(div, type).className = 'type';
JK 568     addParaWithText(div, name).className = 'name';
07c714 569     
JK 570     if(additional) {
9f0f6a 571         div.appendChild(additional);
7ca6a1 572     }
JK 573     
9f0f6a 574     div.appendChild(table);
7ca6a1 575     
1d4785 576     styleFeature(feature, true);
JK 577     
578     setTimeout(function () {map.getView().animate({
07c714 579         center: feature.getGeometry().getCoordinates(),
1d4785 580     }) }, 10);
07c714 581     
9f0f6a 582     ignore_hashchange = true;
JK 583     window.location.hash = '#!' + feature.getId();
584     
585     showPanel(div, function() {
586         if(!ignore_hashchange) {
587             ignore_hashchange = true;
588             window.location.hash = '';
589             
590             feature_clicked = null;
591             unstyleSelectedFeatures();
592             route_source.clear();
593             
594             if(feature_xhr) feature_xhr.abort();
595             if(feature_timer) clearTimeout(feature_timer);
596         }
597     });
07c714 598     
1d4785 599     feature_clicked = feature;
7ca6a1 600 }
JK 601
602 function hash() {
603     if(ignore_hashchange) {
604         ignore_hashchange = false;
605         return;
606     }
607     
eafc1c 608     var depotId = null;
7ca6a1 609     
eafc1c 610     var tramId = null;
JK 611     var busId = null;
7ca6a1 612     var stopId = null;
JK 613     var stopPointId = null;
614     
615     var feature = null;
616     
617     if(window.location.hash.match(/^#!t[0-9]{3}$/)) {
eafc1c 618         depotId = parseInt(window.location.hash.substr(3));
7ca6a1 619     } else if(window.location.hash.match(/^#![A-Za-z]{2}[0-9]{3}$/)) {
eafc1c 620         depotId = parseInt(window.location.hash.substr(4));
439d60 621     } else if(window.location.hash.match(/^#!v-?[0-9]+$/)) {
eafc1c 622         tramId = window.location.hash.substr(3);
JK 623     } else if(window.location.hash.match(/^#!t-?[0-9]+$/)) {
624         tramId = window.location.hash.substr(3);
625     } else if(window.location.hash.match(/^#!b-?[0-9]+$/)) {
626         busId = window.location.hash.substr(3);
627     } else if(window.location.hash.match(/^#!s[0-9]+$/)) {
7ca6a1 628         stopId = window.location.hash.substr(3);
439d60 629     } else if(window.location.hash.match(/^#!p-?[0-9]+$/)) {
7ca6a1 630         stopPointId = window.location.hash.substr(3);
a8a6d1 631     } else if(window.location.hash == '#!RAW') {
JK 632         ttss_position_type = 'RAW';
7ca6a1 633     }
JK 634     
eafc1c 635     if(depotId) {
JK 636         tramId = tramIdToVehicleId(depotId);
7ca6a1 637     }
JK 638     
eafc1c 639     if(tramId) {
JK 640         feature = trams_source.getFeatureById('t' + tramId);
641     } else if(busId) {
642         feature = buses_source.getFeatureById('b' + busId);
7ca6a1 643     } else if(stopId) {
JK 644         feature = stops_source.getFeatureById('s' + stopId);
645     } else if(stopPointId) {
646         feature = stop_points_source.getFeatureById('p' + stopPointId);
647     }
648     
649     featureClicked(feature);
57b8d3 650 }
JK 651
0e60d1 652 function getDistance(c1, c2) {
JK 653     if(c1.getGeometry) {
654         c1 = c1.getGeometry().getCoordinates();
655     }
656     if(c2.getGeometry) {
657         c2 = c2.getGeometry().getCoordinates();
658     }
659     
660     var c1 = ol.proj.transform(c1, 'EPSG:3857', 'EPSG:4326');
661     var c2 = ol.proj.transform(c2, 'EPSG:3857', 'EPSG:4326');
a8a6d1 662     return ol.sphere.getDistance(c1, c2);
0e60d1 663 }
JK 664
665 function returnClosest(point, f1, f2) {
666     if(!f1) return f2;
667     if(!f2) return f1;
668     
669     return (getDistance(point, f1) < getDistance(point, f2)) ? f1 : f2;
670 }
671
57b8d3 672 function init() {
JK 673     if(!window.jQuery) {
674         fail(lang.jquery_not_loaded);
675         return;
676     }
677     
678     $.ajaxSetup({
679         dataType: 'json',
680         timeout: 10000,
681     });
682     
683     stops_source = new ol.source.Vector({
684         features: [],
685     });
686     stops_layer = new ol.layer.Vector({
687         source: stops_source,
688     });
689     
690     stop_points_source = new ol.source.Vector({
691         features: [],
692     });
693     stop_points_layer = new ol.layer.Vector({
694         source: stop_points_source,
695         visible: false,
696     });
697     
eafc1c 698     trams_source = new ol.source.Vector({
57b8d3 699         features: [],
JK 700     });
eafc1c 701     trams_layer = new ol.layer.Vector({
JK 702         source: trams_source,
703     });
704     
705     buses_source = new ol.source.Vector({
706         features: [],
707     });
708     buses_layer = new ol.layer.Vector({
709         source: buses_source,
57b8d3 710     });
JK 711     
1d4785 712     route_source = new ol.source.Vector({
JK 713         features: [],
714     });
715     route_layer = new ol.layer.Vector({
716         source: route_source,
717         style: new ol.style.Style({
718             stroke: new ol.style.Stroke({ color: [255, 153, 0, .8], width: 5 })
719         }),
720     });
721     
57b8d3 722     map = new ol.Map({
JK 723         target: 'map',
724         layers: [
725             new ol.layer.Tile({
726                 source: new ol.source.OSM()
727             }),
1d4785 728             route_layer,
57b8d3 729             stops_layer,
JK 730             stop_points_layer,
eafc1c 731             buses_layer,
JK 732             trams_layer,
57b8d3 733         ],
JK 734         view: new ol.View({
735             center: ol.proj.fromLonLat([19.94, 50.06]),
736             zoom: 13
737         }),
738         controls: ol.control.defaults({
739             attributionOptions: ({
740                 collapsible: false,
741             })
742         }).extend([
743             new ol.control.Control({
744                 element: document.getElementById('title'),
745             }),
746             new ol.control.Control({
747                 element: fail_element,
748             })
749         ]),
1d4785 750         loadTilesWhileAnimating: true,
57b8d3 751     });
JK 752     
753     // Display popup on click
754     map.on('singleclick', function(e) {
0e60d1 755         var point = e.coordinate;
9f0f6a 756         var features = [];
JK 757         map.forEachFeatureAtPixel(e.pixel, function(feature) { if(feature.getId()) features.push(feature); });
0e60d1 758         
9f0f6a 759         if(features.length > 1) {
JK 760             var div = document.createElement('div');
761             
762             addParaWithText(div, lang.select_feature);
763             
764             for(var i = 0; i < features.length; i++) {
765                 var feature = features[i];
766                 
767                 var p = document.createElement('p');
768                 var a = document.createElement('a');
769                 p.appendChild(a);
770                 a.addEventListener('click', function(feature) { return function() {
771                     featureClicked(feature);
772                 }}(feature));
773                 
774                 var type = '';
775                 switch(feature.getId().substr(0, 1)) {
eafc1c 776                     case 't':
JK 777                     case 'b':
439d60 778                         type = lang.type_vehicle;
JK 779                         if(feature.get('vehicle_type').num) {
780                             type += ' ' + feature.get('vehicle_type').num;
781                         }
9f0f6a 782                     break;
JK 783                     case 's':
784                         type = lang.type_stop;
785                     break;
786                     case 'p':
787                         type = lang.type_stoppoint;
788                     break;
789                 }
790                 
791                 addElementWithText(a, 'span', type).className = 'small';
792                 a.appendChild(document.createTextNode(' '));
793                 addElementWithText(a, 'span', feature.get('name'));
794                 
795                 div.appendChild(p);
796             }
797             
798             showPanel(div);
799             
800             return;
801         }
802         
803         var feature = features[0];
0e60d1 804         if(!feature) {
JK 805             if(stops_layer.getVisible()) {
806                 feature = returnClosest(point, feature, stops_source.getClosestFeatureToCoordinate(point));
807             }
808             if(stop_points_layer.getVisible()) {
809                 feature = returnClosest(point, feature, stop_points_source.getClosestFeatureToCoordinate(point));
810             }
eafc1c 811             if(trams_layer.getVisible()) {
JK 812                 feature = returnClosest(point, feature, trams_source.getClosestFeatureToCoordinate(point));
813             }
814             if(buses_layer.getVisible()) {
815                 feature = returnClosest(point, feature, buses_source.getClosestFeatureToCoordinate(point));
0e60d1 816             }
JK 817             
818             if(getDistance(point, feature) > 200) {
819                 feature = null;
820             }
821         }
822         
7ca6a1 823         featureClicked(feature);
57b8d3 824     });
9f0f6a 825     
JK 826     fail_element.addEventListener('click', function() {
827         fail_element.style.top = '-10em';
828     });
f0bae0 829     
57b8d3 830     // Change mouse cursor when over marker
JK 831     map.on('pointermove', function(e) {
832         var hit = map.hasFeatureAtPixel(e.pixel);
833         var target = map.getTargetElement();
834         target.style.cursor = hit ? 'pointer' : '';
835     });
836     
837     // Change layer visibility on zoom
838     map.getView().on('change:resolution', function(e) {
1d4785 839         stop_points_layer.setVisible(map.getView().getZoom() >= 16);
57b8d3 840     });
JK 841     
7ca6a1 842     $.when(
eafc1c 843         updateTrams(),
JK 844         updateBuses(),
845         updateStops(ttss_trams_base, 't'),
846         updateStops(ttss_buses_base, 'b'),
847         updateStopPoints(ttss_trams_base, 't'),
848         updateStopPoints(ttss_buses_base, 'b'),
7ca6a1 849     ).done(function() {
JK 850         hash();
851     });
852     
853     window.addEventListener('hashchange', hash);
57b8d3 854     
JK 855     setTimeout(function() {
eafc1c 856         if(trams_xhr) trams_xhr.abort();
JK 857         if(trams_timer) clearTimeout(trams_timer);
858         if(buses_xhr) buses_xhr.abort();
859         if(buses_timer) clearTimeout(buses_timer);
57b8d3 860           
JK 861         fail(lang.error_refresh);
862     }, 1800000);
863 }
864
865 init();