draw route when you click on a flight

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,
+                    'pirep_id' => $pirep->id,
-                'popup' => $counter . '<br />GS: ' . $point->gs . '<br />Alt: ' . $point->altitude,
+                    'name' => $point->altitude,
-            ]);
+                    'popup' => $counter . '<br />GS: ' . $point->gs . '<br />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 . '<br />GS: ' . $point->gs . '<br />Alt: ' . $point->altitude,
                 ]);
         }
 

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) {
+                if (layerFlights !== null) {
-                    flightPositions.clearLayers();
+                    layerFlights.clearLayers();
                 }
 
-                flightPositions = L.geoJSON(flightGeoJson, {
+                layerFlights = L.geoJSON(flightGeoJson, {
-                    onEachFeature: onFeaturePointClick,
+                    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);
+                layerFlights.addTo(map);
-                map.fitBounds(flightPositions.getBounds());
+                map.fitBounds(layerFlights.getBounds());
             });
         };