| 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 | ||
| d696cf | 69 | function popupHide() { |
| JK | 70 | popup.setPosition(undefined); |
| 71 | popup_feature_id = null; | |
| 72 | } | |
| 73 | ||
| 74 | function popupShow(coordinates, id) { | |
| 75 | popup.setPosition(coordinates); | |
| 76 | if(id) { | |
| 77 | popup_feature_id = id; | |
| 78 | } | |
| 79 | } | |
| 80 | ||
| e5c5bd | 81 | function init() { |
| JK | 82 | if(!window.jQuery) { |
| 83 | fail(lang.jquery_not_loaded); | |
| 84 | return; | |
| 85 | } | |
| 86 | ||
| 87 | $.ajaxSetup({ | |
| 88 | dataType: 'json', | |
| 89 | timeout: 10000, | |
| 90 | }); | |
| 91 | ||
| 92 | ||
| 93 | vehicles_source = new ol.source.Vector({ | |
| 94 | features: [] | |
| 95 | }); | |
| 96 | ||
| 97 | popup = new ol.Overlay({ | |
| 98 | element: popup_element, | |
| 99 | positioning: 'bottom-center', | |
| 100 | stopEvent: false, | |
| 8338a5 | 101 | offset: [0, -12] |
| e5c5bd | 102 | }); |
| JK | 103 | |
| 104 | map = new ol.Map({ | |
| 105 | target: 'map', | |
| 106 | layers: [ | |
| 107 | new ol.layer.Tile({ | |
| 108 | source: new ol.source.OSM() | |
| 109 | }), | |
| 110 | new ol.layer.Vector({ | |
| 111 | source: vehicles_source, | |
| 112 | }), | |
| 113 | ], | |
| 114 | overlays: [popup], | |
| 115 | view: new ol.View({ | |
| 116 | center: ol.proj.fromLonLat([19.94, 50.06]), | |
| 117 | zoom: 13 | |
| 118 | }) | |
| 119 | }); | |
| 120 | ||
| 121 | // display popup on click | |
| d696cf | 122 | map.on('singleclick', function(e) { |
| JK | 123 | var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) { return feature; }); |
| 8338a5 | 124 | if(feature) { |
| e5c5bd | 125 | var coordinates = feature.getGeometry().getCoordinates(); |
| 8338a5 | 126 | |
| JK | 127 | deleteChildren(popup_element); |
| 128 | addParaWithText(popup_element, feature.get('name')).className = 'line-direction'; | |
| 129 | ||
| 130 | var vehicle_type = parseVehicle(feature.get('id')); | |
| 131 | if(vehicle_type) { | |
| 132 | addParaWithText(popup_element, vehicle_type.num + ' ' + vehicle_type.type); | |
| 133 | } | |
| 134 | ||
| d696cf | 135 | popupShow(coordinates, feature.getId()); |
| e5c5bd | 136 | } else { |
| d696cf | 137 | popupHide(); |
| e5c5bd | 138 | } |
| JK | 139 | }); |
| 140 | ||
| 141 | // change mouse cursor when over marker | |
| 142 | map.on('pointermove', function(e) { | |
| 143 | var pixel = map.getEventPixel(e.originalEvent); | |
| 144 | var hit = map.hasFeatureAtPixel(pixel); | |
| 145 | var target = map.getTarget(); | |
| 146 | if(target.style) | |
| 147 | target.style.cursor = hit ? 'pointer' : ''; | |
| 148 | }); | |
| 149 | } | |
| 150 | ||
| 151 | function updateVehicles() { | |
| 152 | if(vehicles_timer)clearTimeout(vehicles_timer); | |
| 153 | if(vehicles_xhr) vehicles_xhr.abort(); | |
| 154 | ||
| 155 | vehicles_xhr = $.get( | |
| 156 | ttss_base + '/geoserviceDispatcher/services/vehicleinfo/vehicles' | |
| 157 | + '?positionType=CORRECTED' | |
| 158 | + '&colorType=ROUTE_BASED' | |
| 8338a5 | 159 | + '&lastUpdate=' + encodeURIComponent(vehicles_last_update) |
| e5c5bd | 160 | ).done(function(data) { |
| 8338a5 | 161 | vehicles_last_update = data.lastUpdate; |
| JK | 162 | |
| e5c5bd | 163 | for(var i = 0; i < data.vehicles.length; i++) { |
| JK | 164 | var vehicle = data.vehicles[i]; |
| 165 | ||
| 166 | var vehicle_feature = vehicles_source.getFeatureById(vehicle.id); | |
| 167 | if(vehicle.isDeleted) { | |
| 168 | if(vehicle_feature) { | |
| 169 | vehicles_source.removeFeature(vehicle_feature); | |
| 170 | } | |
| 171 | continue; | |
| 172 | } | |
| 173 | ||
| 174 | var vehicle_name_space = vehicle.name.indexOf(' '); | |
| 175 | vehicle.line = vehicle.name.substr(0, vehicle_name_space); | |
| 176 | vehicle.direction = vehicle.name.substr(vehicle_name_space+1); | |
| 8338a5 | 177 | if(special_directions[vehicle.direction]) { |
| JK | 178 | vehicle.line = special_directions[vehicle.direction]; |
| 179 | } | |
| 180 | ||
| e5c5bd | 181 | vehicle.geometry = new ol.geom.Point(ol.proj.fromLonLat([vehicle.longitude / 3600000.0, vehicle.latitude / 3600000.0])); |
| 8338a5 | 182 | vehicle.vehicle_type = parseVehicle(vehicle.id); |
| e5c5bd | 183 | |
| JK | 184 | if(!vehicle_feature) { |
| 185 | vehicle_feature = new ol.Feature(vehicle); | |
| 186 | vehicle_feature.setId(vehicle.id); | |
| 8338a5 | 187 | |
| JK | 188 | var color_type = 'black'; |
| 189 | if(vehicle.vehicle_type) { | |
| 190 | switch(vehicle.vehicle_type.low) { | |
| 191 | case 0: | |
| 192 | color_type = 'orange'; | |
| 193 | break; | |
| 194 | case 1: | |
| 195 | color_type = 'blue'; | |
| 196 | break; | |
| 197 | case 2: | |
| 198 | color_type = 'green'; | |
| 199 | break; | |
| 200 | } | |
| 201 | } | |
| 202 | ||
| e5c5bd | 203 | vehicle_feature.setStyle(new ol.style.Style({ |
| JK | 204 | image: new ol.style.RegularShape({ |
| 205 | fill: new ol.style.Fill({color: '#3399ff'}), | |
| 8338a5 | 206 | stroke: new ol.style.Stroke({color: color_type, width: 2}), |
| e5c5bd | 207 | points: 3, |
| JK | 208 | radius: 12, |
| d4eb9e | 209 | rotation: Math.PI * parseFloat(vehicle.heading) / 180.0, |
| JK | 210 | rotateWithView: true, |
| e5c5bd | 211 | angle: 0 |
| JK | 212 | }), |
| 213 | text: new ol.style.Text({ | |
| 8338a5 | 214 | font: 'bold 10px sans-serif', |
| e5c5bd | 215 | text: vehicle.line, |
| JK | 216 | fill: new ol.style.Fill({color: 'white'}), |
| 217 | }), | |
| 218 | })); | |
| 219 | vehicles_source.addFeature(vehicle_feature); | |
| 220 | } else { | |
| 221 | vehicle_feature.setProperties(vehicle); | |
| d4eb9e | 222 | vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading) / 180.0); |
| d696cf | 223 | |
| JK | 224 | if(popup_feature_id == vehicle_feature.getId()) { |
| 225 | popupShow(vehicle_feature.getGeometry().getCoordinates()); | |
| 8338a5 | 226 | } |
| e5c5bd | 227 | } |
| JK | 228 | } |
| 229 | ||
| 230 | vehicles_timer = setTimeout(function(){ | |
| 231 | updateVehicles(); | |
| 232 | }, ttss_refresh); | |
| 233 | }).fail(fail_ajax); | |
| 234 | } | |
| 235 | ||
| 236 | init(); | |
| 237 | updateVehicles(); | |
| 238 | </script> | |
| 239 | </body> | |
| 240 | </html> | |
