<!DOCTYPE HTML>
<html>
<head>
<title>MPK KrakĂłw Map</title>
<style type="text/css">
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
#popup {
color: black;
background: white;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
font: 12px sans-serif;
}
#popup p {
margin: 0;
padding: 5px;
}
#popup .line-direction {
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js" integrity="sha384-DjqoiOTAYD0bxdY6K1Ep7Xd4QQc46AKzKmkgC4+rnKX47PniPHIjRt02uhT8C04h" crossorigin="anonymous"></script>
<script tyle="text/javascript" src="lang_en.js" id="lang_script"></script>
<script tyle="text/javascript" src="common.js"></script>
</head>
<body>
<div id="map"><div id="popup"></div></div>
<script tyle="text/javascript">
//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;
function fail(msg) {
console.log(msg);
alert(msg);
}
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 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
})
});
// 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);
switch(feature.getId().substr(0, 1)) {
case 'v':
addParaWithText(popup_element, feature.get('name')).className = 'line-direction';
var vehicle_type = parseVehicle(feature.get('id'));
if(vehicle_type) {
addParaWithText(popup_element, vehicle_type.num + ' ' + vehicle_type.type);
}
break;
case 's':
case 'p':
addParaWithText(popup_element, feature.get('name')).className = 'line-direction';
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);
}
});
}
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);
}
init();
updateVehicles();
updateStops();
updateStopPoints();
</script>
</body>
</html>