Map color options (#1478)

* Add colors to the maps options

* Update assets build

resources/js/maps/live_map.js

@@ -33,6 +33,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);
 
@@ -76,7 +77,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

@@ -27,20 +27,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,
-});
 
 /**
  *
@@ -57,12 +43,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],
@@ -79,7 +83,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);
@@ -98,7 +102,7 @@ export default (_opts) => {
       onEachFeature: onFeaturePointClick,
       pointToLayer,
       style: {
-        color: PLAN_ROUTE_COLOR,
+        color: opts.flightplan_route_color,
         weight: 3,
         opacity: 0.65,
       },
@@ -115,7 +119,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);
@@ -134,7 +138,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,9 +15,12 @@
       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',
       leafletOptions: {
         scrollWheelZoom: false,
-      }
+      },
     });
   </script>
 @endsection

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

@@ -116,6 +116,7 @@ and being mindful of the rivets bindings
       aircraft_icon: '{!! public_asset('/assets/img/acars/aircraft.png') !!}',
       refresh_interval: {{ setting('acars.update_interval', 60) }},
       units: '{{ setting('units.distance') }}',
+      flown_route_color: '#067ec1',
       leafletOptions: {
         scrollWheelZoom: false,
       }