diff --git a/app/Services/GeoService.php b/app/Services/GeoService.php index c1390de9..f4607638 100644 --- a/app/Services/GeoService.php +++ b/app/Services/GeoService.php @@ -184,11 +184,12 @@ class GeoService extends BaseService $route_line[] = [$point->lon, $point->lat]; $route_points[] = new Feature( new Point([$point->lon, $point->lat]), [ - 'name' => $point->altitude, - 'popup' => $counter . '
GS: ' . $point->gs . '
Alt: ' . $point->altitude, - ]); + 'pirep_id' => $pirep->id, + 'name' => $point->altitude, + 'popup' => $counter . '
GS: ' . $point->gs . '
Alt: ' . $point->altitude, + ]); - $counter += 1; + ++$counter; } # Arrival $route_line[] = [$pirep->arr_airport->lon, $pirep->arr_airport->lat]; @@ -222,7 +223,7 @@ class GeoService extends BaseService 'gs' => $point->gs, 'alt' => $point->altitude, 'heading' => $point->heading ?: 0, - 'popup' => 'Flight: ' . $pirep->ident, + 'popup' => $pirep->ident . '
GS: ' . $point->gs . '
Alt: ' . $point->altitude, ]); } diff --git a/public/assets/system/js/system.js b/public/assets/system/js/system.js index dc306994..c8a0f85b 100644 --- a/public/assets/system/js/system.js +++ b/public/assets/system/js/system.js @@ -224,9 +224,7 @@ const phpvms = (function() { aircraft_icon: '/assets/img/acars/aircraft.png', }); - let flightPositions = null; const map = draw_base_map(opts); - const aircraftIcon = L.icon({ iconUrl: opts.aircraft_icon, iconSize: [48, 48], @@ -234,6 +232,41 @@ const phpvms = (function() { popupAnchor: [-3, -76], }); + let layerFlights = null; + let layerSelFlight = null; + + /** + * When a flight is clicked on, show the path, etc for that flight + * @param feature + * @param layer + */ + const onFlightClick = (feature, layer) => { + const uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id); + console.log('flight check uri', uri); + + const flight_route = $.ajax({ + url: uri, + dataType: "json", + error: console.log + }); + + $.when(flight_route).done((routeJson) => { + if(layerSelFlight !== null) { + map.removeLayer(layerSelFlight); + } + + layerSelFlight = L.geodesic([], { + weight: 7, + opacity: 0.9, + color: ACTUAL_ROUTE_COLOR, + wrap: false, + }).addTo(map); + + layerSelFlight.geoJson(routeJson.line); + //map.fitBounds(layerSelFlight.getBounds()); + }); + }; + const updateMap = () => { console.log('reloading flights from acars...'); @@ -250,12 +283,26 @@ const phpvms = (function() { $.when(flights).done(function (flightGeoJson) { - if (flightPositions !== null) { - flightPositions.clearLayers(); + if (layerFlights !== null) { + layerFlights.clearLayers(); } - flightPositions = L.geoJSON(flightGeoJson, { - onEachFeature: onFeaturePointClick, + layerFlights = L.geoJSON(flightGeoJson, { + onEachFeature: (feature, layer) => { + + layer.on({ + click: (e) => { + onFlightClick(feature, layer); + } + }); + + let popup_html = ""; + if (feature.properties && feature.properties.popup) { + popup_html += feature.properties.popup; + } + + layer.bindPopup(popup_html); + }, pointToLayer: function(feature, latlon) { return L.marker(latlon, { icon: aircraftIcon, @@ -264,8 +311,8 @@ const phpvms = (function() { } }); - flightPositions.addTo(map); - map.fitBounds(flightPositions.getBounds()); + layerFlights.addTo(map); + map.fitBounds(layerFlights.getBounds()); }); };