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());
});
};