Fix live and route map errors #527

app/Services/GeoService.php

@@ -221,16 +221,6 @@ public function getFeatureFromAcars(Pirep $pirep)
             ]);
         }
 
-        /*
-         * @var $point \App\Models\Acars
-         */
-        /*foreach ($pirep->acars as $point) {
-            $route->addPoint($point->lat, $point->lon, [
-                'pirep_id' => $pirep->id,
-                'alt'      => $point->altitude,
-            ]);
-        }*/
-
         return [
             // If there is a position update from ACARS, show where it is
             // Otherwise, just assume it's at the arrival airport currently
@@ -384,9 +374,8 @@ public function pirepGeoJson(Pirep $pirep)
         }
 
         return [
-            'planned_rte_points' => $planned->getPoints(),
-            'planned_rte_line'   => $planned->getLine(),
-
+            'planned_rte_points'  => $planned->getPoints(),
+            'planned_rte_line'    => $planned->getLine(),
             'actual_route_points' => $actual->getPoints(),
             'actual_route_line'   => $actual->getLine(),
         ];

package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@turf/center": "^6.0.1",
-    "Leaflet.Geodesic": "git+https://git@github.com/henrythasler/Leaflet.Geodesic.git",
     "animate.css": "~3.6",
     "axios": "^0.18.1",
     "bootstrap": "~4.3",
@@ -31,6 +30,7 @@
     "leaflet-ajax": "2.1.0",
     "leaflet-providers": "1.0.*",
     "leaflet-rotatedmarker": "^0.2.0",
+    "leaflet.geodesic": "^2.5.2",
     "lodash": ">=4.17.13",
     "marked": ">0.3.18",
     "moment": "^2.24.0",

public/mix-manifest.json

@@ -1,26 +1,26 @@
 {
-    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=218bdf369c2dd02856cc",
+    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=20a3fc41496724225911",
     "/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=20b82d8dbacf7e058df2",
     "/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=9f24c5e6612e74065901",
-    "/assets/frontend/js/app.js.map": "/assets/frontend/js/app.js.map?id=6b1ab9e89d979ba41fc4",
+    "/assets/frontend/js/app.js.map": "/assets/frontend/js/app.js.map?id=21a79e99fabbd500ce1e",
     "/assets/frontend/css/now-ui-kit.css.map": "/assets/frontend/css/now-ui-kit.css.map?id=fdc4f42ad9047d073145",
     "/assets/admin/css/vendor.min.css.map": "/assets/admin/css/vendor.min.css.map?id=c266c31652dea865307c",
-    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=37a4ecf79cdc64e724e5",
-    "/assets/admin/js/app.js.map": "/assets/admin/js/app.js.map?id=295a34b9c67c5a178d8a",
+    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=90ea993afba8021dbfbb",
+    "/assets/admin/js/app.js.map": "/assets/admin/js/app.js.map?id=6e760b29df4e40c4ca92",
     "/assets/installer/js/app.js": "/assets/installer/js/app.js?id=aa8661200da32787441c",
-    "/assets/installer/js/app.js.map": "/assets/installer/js/app.js.map?id=917f0f8bcd02d558f615",
+    "/assets/installer/js/app.js.map": "/assets/installer/js/app.js.map?id=459e5951832843d174e1",
     "/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
     "/assets/admin/fonts/glyphicons-halflings-regular.woff2": "/assets/admin/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
     "/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=63b3af84650a0145d61a",
     "/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=1e2db432947c2dca1b9f",
     "/assets/global/js/jquery.js": "/assets/global/js/jquery.js?id=11c05eb286ed576526bf",
     "/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=39437a6200d8066a49d4",
     "/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=127d7cfbb176dc559854",
-    "/assets/frontend/js/vendor.js": "/assets/frontend/js/vendor.js?id=7b2f95d32e095b2bbbfa",
+    "/assets/frontend/js/vendor.js": "/assets/frontend/js/vendor.js?id=0f56f07ddfc52e0265ea",
     "/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=3faf0c4cbfe14c8b99cf",
-    "/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=ad2f530d0b8e9bd6b6d3",
+    "/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=63a4fc6da97448db5b67",
     "/assets/installer/css/vendor.css": "/assets/installer/css/vendor.css?id=b484734ef5549fc2baae",
-    "/assets/installer/js/vendor.js": "/assets/installer/js/vendor.js?id=1b8dba4c184ce249e7fe",
-    "/assets/global/js/vendor.js": "/assets/global/js/vendor.js?id=666b04d3b318da723aff",
+    "/assets/installer/js/vendor.js": "/assets/installer/js/vendor.js?id=e191958da1971cc63bd9",
+    "/assets/global/js/vendor.js": "/assets/global/js/vendor.js?id=cdc2a84d3de901c5b9c5",
     "/assets/global/css/vendor.css": "/assets/global/css/vendor.css?id=89afa5863f07a984ffeb"
 }

resources/js/maps/config.js

@@ -1,3 +1,3 @@
-export const PLAN_ROUTE_COLOR = '#043758';
+export const PLAN_ROUTE_COLOR = '#d9ed53';
 export const ACTUAL_ROUTE_COLOR = '#067ec1';
 export const CIRCLE_COLOR = '#056093';

resources/js/maps/live_map.js

@@ -52,40 +52,26 @@ export default (_opts) => {
     pireps: [],
     has_data: false,
     controller: {
-      /**
-       * Focus on a specific marker
-       * @param e
-       * @param model
-       */
-      focusMarker: (e, model) => {
-        if (!(model.pirep.id in markers_list)) {
-          console.log('marker not found in list');
-          return;
-        }
-
-        const marker = markers_list[model.pirep.id];
-        onFlightClick(marker[0], marker[1]);
-      },
+      focusMarker: null, // assigned below
     },
   };
 
   rivets.bind($('#map-info-box'), liveMapController);
   rivets.bind($('#live_flights'), liveMapController);
 
   function drawRoute(feature, layer, route) {
-    console.log('drawRoute');
     if (layerSelFlight !== null) {
       map.removeLayer(layerSelFlight);
     }
 
-    layerSelFlight = leaflet.geodesic([], {
+    layerSelFlight = new L.Geodesic([], {
       weight: 5,
       opacity: 0.9,
       color: ACTUAL_ROUTE_COLOR,
       wrap: false,
     }).addTo(map);
 
-    layerSelFlight.geoJson(route.line);
+    layerSelFlight.fromGeoJson(route.line);
     layerSelFlightFeature = feature;
     layerSelFlightLayer = layer;
 
@@ -129,6 +115,28 @@ export default (_opts) => {
     });
   }
 
+  /**
+   * Focus on a specific marker
+   * @param e
+   * @param model
+   */
+  function focusMarker(e, model) {
+    if (!(model.pirep.id in markers_list)) {
+      console.log('marker not found in list');
+      return;
+    }
+
+    const marker = markers_list[model.pirep.id];
+    onFlightClick(marker[0], marker[1]);
+  }
+
+  /*
+   * Assign functions to the controller
+   */
+  liveMapController.controller.drawRoute = drawRoute;
+  liveMapController.controller.focusMarker = focusMarker;
+  liveMapController.controller.onFlightClick = onFlightClick;
+
   const updateMap = () => {
     request(opts.acars_uri).then((response) => {
       const pireps = response.data.data;

resources/js/maps/route_map.js

@@ -70,15 +70,15 @@ export default (_opts) => {
     addWMSLayer(map, opts.metar_wms);
   }
 
-  const plannedRouteLayer = leaflet.geodesic([], {
+  const plannedRouteLayer = new L.Geodesic([], {
     weight: 4,
     opacity: 0.9,
     color: PLAN_ROUTE_COLOR,
     steps: 50,
     wrap: false,
   }).addTo(map);
 
-  plannedRouteLayer.geoJson(opts.planned_route_line);
+  plannedRouteLayer.fromGeoJson(opts.planned_route_line);
 
   try {
     map.fitBounds(plannedRouteLayer.getBounds());
@@ -106,15 +106,15 @@ export default (_opts) => {
      */
 
   if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
-    const actualRouteLayer = leaflet.geodesic([], {
+    const actualRouteLayer = new L.Geodesic([], {
       weight: 3,
       opacity: 0.9,
       color: ACTUAL_ROUTE_COLOR,
       steps: 50,
       wrap: false,
     }).addTo(map);
 
-    actualRouteLayer.geoJson(opts.actual_route_line);
+    actualRouteLayer.fromGeoJson(opts.actual_route_line);
 
     try {
       map.fitBounds(actualRouteLayer.getBounds());
@@ -138,11 +138,13 @@ export default (_opts) => {
   }
 
   /**
-     *
-     */
+   *
+   */
+  /*
   const liveFlight = () => {
     request({ url: opts.pirep_uri }).then((response) => {
       const routeJson = response.data.data;
+      console.log(routeJson);
       layerLiveFlight = leaflet.geoJSON(routeJson, {
         pointToLayer(feature, latlon) {
           return leaflet.marker(latlon, {
@@ -157,4 +159,5 @@ export default (_opts) => {
   };
 
   setInterval(liveFlight, opts.refresh_interval * 1000);
+  */
 };

yarn.lock

@@ -1137,6 +1137,7 @@ bootstrap-sass@^3.4.1:
   integrity sha512-p5rxsK/IyEDQm2CwiHxxUi0MZZtvVFbhWmyMOt4lLkA4bujDA1TGoKT0i1FKIWiugAdP+kK8T5KMDFIKQCLYIA==
 
 "bootstrap3@npm:bootstrap@~3.4", bootstrap@^3.3:
+  name bootstrap3
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
   integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
@@ -4481,6 +4482,11 @@ leaflet-rotatedmarker@^0.2.0:
   resolved "https://registry.yarnpkg.com/leaflet-rotatedmarker/-/leaflet-rotatedmarker-0.2.0.tgz#4467f49f98d1bfd56959bd9c6705203dd2601277"
   integrity sha1-RGf0n5jRv9VpWb2cZwUgPdJgEnc=
 
+leaflet.geodesic@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/leaflet.geodesic/-/leaflet.geodesic-2.5.2.tgz#d532854fdf7e3b0b74862f9da91f1bfd135c3365"
+  integrity sha512-IpN0Odphc8uNsKSzvZqQekA9gmb0A+6jDMs5CHXNo4sD90yVCjMrEed96t6DW/wPpcbqHkhdWqnEbZOTMZnXSg==
+
 leaflet@^1.3.4:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"