ttss/mpk-ttss - git.Jacekk.net

ttss / mpk-ttss

Improved www.ttss.krakow.pl

view | history | commit | commitdiff

Show buses on map

Jacek Kowalski

2019-01-29 eafc1c0e3a6e25b88d427a6f72385299d23c4d44

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