| commit | author | age | ||
| e5c5bd | 1 | <!DOCTYPE HTML> |
| JK | 2 | <html> |
| 3 | <head> | |
| 8338a5 | 4 | <title>MPK Kraków Map</title> |
| e5c5bd | 5 | <style type="text/css"> |
| JK | 6 | html, body, #map { |
| 7 | width: 100%; | |
| 8 | height: 100%; | |
| 9 | margin: 0; | |
| 10 | } | |
| 8338a5 | 11 | #popup { |
| JK | 12 | color: black; |
| 13 | background: white; | |
| 14 | padding: 5px; | |
| 15 | border: 1px solid black; | |
| 16 | border-radius: 10px; | |
| 17 | font: 12px sans-serif; | |
| 18 | } | |
| 19 | #popup p { | |
| 20 | margin: 0; | |
| 21 | padding: 5px; | |
| 22 | } | |
| 23 | #popup .line-direction { | |
| 24 | font-weight: bold; | |
| 25 | } | |
| e5c5bd | 26 | </style> |
| 8338a5 | 27 | <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> |
| e5c5bd | 28 | <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script> |
| 8338a5 | 29 | <script src="https://openlayers.org/en/v4.0.1/build/ol.js" integrity="sha384-DjqoiOTAYD0bxdY6K1Ep7Xd4QQc46AKzKmkgC4+rnKX47PniPHIjRt02uhT8C04h" crossorigin="anonymous"></script> |
| e5c5bd | 30 | <script tyle="text/javascript" src="lang_en.js" id="lang_script"></script> |
| 8338a5 | 31 | <script tyle="text/javascript" src="common.js"></script> |
| e5c5bd | 32 | </head> |
| JK | 33 | <body> |
| 34 | <div id="map"><div id="popup"></div></div> | |
| 35 | ||
| 36 | <script tyle="text/javascript"> | |
| 37 | //var ttss_base = 'http://www.ttss.krakow.pl/internetservice'; | |
| 38 | var ttss_base = '/proxy.php'; | |
| 39 | var ttss_refresh = 5000; // 5 seconds | |
| 40 | ||
| 41 | var vehicles_source = null; | |
| 42 | var vehicles_xhr = null; | |
| 43 | var vehicles_timer = null; | |
| 8338a5 | 44 | var vehicles_last_update = 0; |
| e5c5bd | 45 | |
| JK | 46 | var map = null; |
| 8338a5 | 47 | var popup_feature_id = null; |
| e5c5bd | 48 | var popup_element = document.getElementById('popup'); |
| JK | 49 | var popup = null; |
| 50 | ||
| 51 | function fail(msg) { | |
| 52 | console.log(msg); | |
| 53 | alert(msg); | |
| 54 | } | |
| 55 | ||
| 56 | function fail_ajax(data) { | |
| 57 | // abort() is not a failure | |
| 58 | if(data.readyState == 0 && data.statusText == 'abort') return; | |
| 59 | ||
| 60 | if(data.status == 0) { | |
| 61 | fail(lang.error_request_failed_connectivity, data); | |
| 62 | } else if (data.statusText) { | |
| 63 | fail(lang.error_request_failed_status.replace('$status', data.statusText), data); | |
| 64 | } else { | |
| 65 | fail(lang.error_request_failed, data); | |
| 66 | } | |
| 67 | } | |
| 68 | ||
| 69 | function init() { | |
| 70 | if(!window.jQuery) { | |
| 71 | fail(lang.jquery_not_loaded); | |
| 72 | return; | |
| 73 | } | |
| 74 | ||
| 75 | $.ajaxSetup({ | |
| 76 | dataType: 'json', | |
| 77 | timeout: 10000, | |
| 78 | }); | |
| 79 | ||
| 80 | ||
| 81 | vehicles_source = new ol.source.Vector({ | |
| 82 | features: [] | |
| 83 | }); | |
| 84 | ||
| 85 | popup = new ol.Overlay({ | |
| 86 | element: popup_element, | |
| 87 | positioning: 'bottom-center', | |
| 88 | stopEvent: false, | |
| 8338a5 | 89 | offset: [0, -12] |
| e5c5bd | 90 | }); |
| JK | 91 | |
| 92 | map = new ol.Map({ | |
| 93 | target: 'map', | |
| 94 | layers: [ | |
| 95 | new ol.layer.Tile({ | |
| 96 | source: new ol.source.OSM() | |
| 97 | }), | |
| 98 | new ol.layer.Vector({ | |
| 99 | source: vehicles_source, | |
| 100 | }), | |
| 101 | ], | |
| 102 | overlays: [popup], | |
| 103 | view: new ol.View({ | |
| 104 | center: ol.proj.fromLonLat([19.94, 50.06]), | |
| 105 | zoom: 13 | |
| 106 | }) | |
| 107 | }); | |
| 108 | ||
| 109 | // display popup on click | |
| 110 | map.on('singleclick', function(evt) { | |
| 111 | var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) { return feature; }); | |
| 8338a5 | 112 | if(feature) { |
| e5c5bd | 113 | var coordinates = feature.getGeometry().getCoordinates(); |
| 8338a5 | 114 | |
| JK | 115 | deleteChildren(popup_element); |
| 116 | addParaWithText(popup_element, feature.get('name')).className = 'line-direction'; | |
| 117 | ||
| 118 | var vehicle_type = parseVehicle(feature.get('id')); | |
| 119 | if(vehicle_type) { | |
| 120 | addParaWithText(popup_element, vehicle_type.num + ' ' + vehicle_type.type); | |
| 121 | } | |
| 122 | ||
| e5c5bd | 123 | popup.setPosition(coordinates); |
| 8338a5 | 124 | popup_feature_id = feature.getId(); |
| e5c5bd | 125 | } else { |
| JK | 126 | popup.setPosition(undefined); |
| 8338a5 | 127 | popup_feature_id = null; |
| e5c5bd | 128 | } |
| JK | 129 | }); |
| 130 | ||
| 131 | // change mouse cursor when over marker | |
| 132 | map.on('pointermove', function(e) { | |
| 133 | var pixel = map.getEventPixel(e.originalEvent); | |
| 134 | var hit = map.hasFeatureAtPixel(pixel); | |
| 135 | var target = map.getTarget(); | |
| 136 | if(target.style) | |
| 137 | target.style.cursor = hit ? 'pointer' : ''; | |
| 138 | }); | |
| 139 | } | |
| 140 | ||
| 141 | function updateVehicles() { | |
| 142 | if(vehicles_timer)clearTimeout(vehicles_timer); | |
| 143 | if(vehicles_xhr) vehicles_xhr.abort(); | |
| 144 | ||
| 145 | vehicles_xhr = $.get( | |
| 146 | ttss_base + '/geoserviceDispatcher/services/vehicleinfo/vehicles' | |
| 147 | + '?positionType=CORRECTED' | |
| 148 | + '&colorType=ROUTE_BASED' | |
| 8338a5 | 149 | + '&lastUpdate=' + encodeURIComponent(vehicles_last_update) |
| e5c5bd | 150 | ).done(function(data) { |
| 8338a5 | 151 | vehicles_last_update = data.lastUpdate; |
| JK | 152 | |
| e5c5bd | 153 | for(var i = 0; i < data.vehicles.length; i++) { |
| JK | 154 | var vehicle = data.vehicles[i]; |
| 155 | ||
| 156 | var vehicle_feature = vehicles_source.getFeatureById(vehicle.id); | |
| 157 | if(vehicle.isDeleted) { | |
| 158 | if(vehicle_feature) { | |
| 159 | vehicles_source.removeFeature(vehicle_feature); | |
| 160 | } | |
| 161 | continue; | |
| 162 | } | |
| 163 | ||
| 164 | var vehicle_name_space = vehicle.name.indexOf(' '); | |
| 165 | vehicle.line = vehicle.name.substr(0, vehicle_name_space); | |
| 166 | vehicle.direction = vehicle.name.substr(vehicle_name_space+1); | |
| 8338a5 | 167 | if(special_directions[vehicle.direction]) { |
| JK | 168 | vehicle.line = special_directions[vehicle.direction]; |
| 169 | } | |
| 170 | ||
| e5c5bd | 171 | vehicle.geometry = new ol.geom.Point(ol.proj.fromLonLat([vehicle.longitude / 3600000.0, vehicle.latitude / 3600000.0])); |
| 8338a5 | 172 | vehicle.vehicle_type = parseVehicle(vehicle.id); |
| e5c5bd | 173 | |
| JK | 174 | if(!vehicle_feature) { |
| 175 | vehicle_feature = new ol.Feature(vehicle); | |
| 176 | vehicle_feature.setId(vehicle.id); | |
| 8338a5 | 177 | |
| JK | 178 | var color_type = 'black'; |
| 179 | if(vehicle.vehicle_type) { | |
| 180 | switch(vehicle.vehicle_type.low) { | |
| 181 | case 0: | |
| 182 | color_type = 'orange'; | |
| 183 | break; | |
| 184 | case 1: | |
| 185 | color_type = 'blue'; | |
| 186 | break; | |
| 187 | case 2: | |
| 188 | color_type = 'green'; | |
| 189 | break; | |
| 190 | } | |
| 191 | } | |
| 192 | ||
| e5c5bd | 193 | vehicle_feature.setStyle(new ol.style.Style({ |
| JK | 194 | image: new ol.style.RegularShape({ |
| 195 | fill: new ol.style.Fill({color: '#3399ff'}), | |
| 8338a5 | 196 | stroke: new ol.style.Stroke({color: color_type, width: 2}), |
| e5c5bd | 197 | points: 3, |
| JK | 198 | radius: 12, |
| d4eb9e | 199 | rotation: Math.PI * parseFloat(vehicle.heading) / 180.0, |
| JK | 200 | rotateWithView: true, |
| e5c5bd | 201 | angle: 0 |
| JK | 202 | }), |
| 203 | text: new ol.style.Text({ | |
| 8338a5 | 204 | font: 'bold 10px sans-serif', |
| e5c5bd | 205 | text: vehicle.line, |
| JK | 206 | fill: new ol.style.Fill({color: 'white'}), |
| 207 | }), | |
| 208 | })); | |
| 209 | vehicles_source.addFeature(vehicle_feature); | |
| 210 | } else { | |
| 211 | vehicle_feature.setProperties(vehicle); | |
| d4eb9e | 212 | vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading) / 180.0); |
| 8338a5 | 213 | if(popup_feature_id == vehicle.id) { |
| JK | 214 | popup.setPosition(vehicle_feature.getGeometry().getCoordinates()); |
| 215 | } | |
| e5c5bd | 216 | } |
| JK | 217 | } |
| 218 | ||
| 219 | vehicles_timer = setTimeout(function(){ | |
| 220 | updateVehicles(); | |
| 221 | }, ttss_refresh); | |
| 222 | }).fail(fail_ajax); | |
| 223 | } | |
| 224 | ||
| 225 | init(); | |
| 226 | updateVehicles(); | |
| 227 | </script> | |
| 228 | </body> | |
| 229 | </html> | |
