Fix live and route map errors #527 (#528)

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,20 +52,7 @@ 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
     },
   };
 
@@ -73,19 +60,18 @@ export default (_opts) => {
   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,7 +70,7 @@ 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,
@@ -78,7 +78,7 @@ export default (_opts) => {
     wrap: false,
   }).addTo(map);
 
-  plannedRouteLayer.geoJson(opts.planned_route_line);
+  plannedRouteLayer.fromGeoJson(opts.planned_route_line);
 
   try {
     map.fitBounds(plannedRouteLayer.getBounds());
@@ -106,7 +106,7 @@ 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,
@@ -114,7 +114,7 @@ export default (_opts) => {
       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);
+  */
 };