Add colors to the maps options

resources/js/maps/live_map.js

@@ -1,4 +1,3 @@
-
 import draw_base_map from './base_map';
 
 import { ACTUAL_ROUTE_COLOR } from './config';
@@ -26,6 +25,7 @@ export default (_opts) => {
     positions: null,
     render_elem: 'map',
     aircraft_icon: '/assets/img/acars/aircraft.png',
+    flown_route_color: ACTUAL_ROUTE_COLOR,
     units: 'nmi',
   }, _opts);
 
@@ -67,7 +67,7 @@ export default (_opts) => {
     layerSelFlight = new L.Geodesic([], {
       weight: 5,
       opacity: 0.9,
-      color: ACTUAL_ROUTE_COLOR,
+      color: opts.flown_route_color,
       wrap: false,
     }).addTo(map);
 

resources/js/maps/route_map.js

@@ -21,20 +21,6 @@ export const onFeaturePointClick = (feature, layer) => {
   layer.bindPopup(popup_html);
 };
 
-/**
- * Show each point as a marker
- * @param feature
- * @param latlng
- * @returns {*}
- */
-export const pointToLayer = (feature, latlng) => leaflet.circleMarker(latlng, {
-  radius: 5,
-  fillColor: CIRCLE_COLOR,
-  color: '#000',
-  weight: 1,
-  opacity: 1,
-  fillOpacity: 0.8,
-});
 
 /**
  *
@@ -51,12 +37,30 @@ export default (_opts) => {
     live_map: false,
     aircraft_icon: '/assets/img/acars/aircraft.png',
     refresh_interval: 10,
+    flown_route_color: ACTUAL_ROUTE_COLOR,
+    circle_color: CIRCLE_COLOR,
+    flightplan_route_color: PLAN_ROUTE_COLOR,
     metar_wms: {
       url: '',
       params: {},
     },
   }, _opts);
 
+  /**
+   * Show each point as a marker
+   * @param feature
+   * @param latlng
+   * @returns {*}
+   */
+  const pointToLayer = (feature, latlng) => leaflet.circleMarker(latlng, {
+    radius: 5,
+    fillColor: opts.circle_color,
+    color: '#000',
+    weight: 1,
+    opacity: 1,
+    fillOpacity: 0.8,
+  });
+
   const aircraftIcon = leaflet.icon({
     iconUrl: opts.aircraft_icon,
     iconSize: [42, 42],
@@ -73,7 +77,7 @@ export default (_opts) => {
   const plannedRouteLayer = new L.Geodesic([], {
     weight: 4,
     opacity: 0.9,
-    color: PLAN_ROUTE_COLOR,
+    color: opts.flightplan_route_color,
     steps: 50,
     wrap: false,
   }).addTo(map);
@@ -92,7 +96,7 @@ export default (_opts) => {
       onEachFeature: onFeaturePointClick,
       pointToLayer,
       style: {
-        color: PLAN_ROUTE_COLOR,
+        color: opts.flightplan_route_color,
         weight: 3,
         opacity: 0.65,
       },
@@ -109,7 +113,7 @@ export default (_opts) => {
     const actualRouteLayer = new L.Geodesic([], {
       weight: 3,
       opacity: 0.9,
-      color: ACTUAL_ROUTE_COLOR,
+      color: opts.flown_route_color,
       steps: 50,
       wrap: false,
     }).addTo(map);
@@ -128,7 +132,7 @@ export default (_opts) => {
       onEachFeature: onFeaturePointClick,
       pointToLayer,
       style: {
-        color: ACTUAL_ROUTE_COLOR,
+        color: opts.flown_route_color,
         weight: 3,
         opacity: 0.65,
       },

resources/views/layouts/default/pireps/map.blade.php

@@ -15,6 +15,9 @@
       actual_route_line: {!! json_encode($map_features['actual_route_line']) !!},
       actual_route_points: {!! json_encode($map_features['actual_route_points']) !!},
       aircraft_icon: '{!! public_asset('/assets/img/acars/aircraft.png') !!}',
+      flown_route_color: '#067ec1',
+      circle_color: '#056093',
+      flightplan_route_color: '#8B008B',
     });
   </script>
 @endsection

resources/views/layouts/default/widgets/live_map.blade.php

@@ -115,6 +115,7 @@ and being mindful of the rivets bindings
       zoom: '{{ $zoom }}',
       aircraft_icon: '{!! public_asset('/assets/img/acars/aircraft.png') !!}',
       units: '{{ setting('units.distance') }}',
+      flown_route_color: '#067ec1',
     });
   </script>
 @endsection