Add airport overview page and links to it #225

resources/js/maps/airspace_map.js

@@ -2,6 +2,7 @@
 const leaflet = require('leaflet');
 
 import draw_base_map from './base_map'
+import { addWMSLayer } from './helpers';
 
 /**
  * Render a map with the airspace, etc around a given set of coords
@@ -17,16 +18,27 @@ export default (opts) => {
     zoom: 12,
     layers: [],
     set_marker: true,
+    marker_popup: '',
+
+    // Passed from the config/maps.php file
+    metar_wms: {
+        url: '',
+        params: {}
+    },
   }, opts);
 
-  let map = draw_base_map(opts)
-  const coords = [opts.lat, opts.lon]
-  console.log('Applying coords', coords)
+  let map = draw_base_map(opts);
+  const coords = [opts.lat, opts.lon];
+  console.log('Applying coords', coords);
 
-  map.setView(coords, opts.zoom)
+  map.setView(coords, opts.zoom);
   if (opts.set_marker === true) {
-    leaflet.marker(coords).addTo(map)
+    leaflet.marker(coords).addTo(map).bindPopup(opts.marker_popup);
   }
 
-  return map
+  if(opts.metar_wms.url !== '') {
+      addWMSLayer(map, opts.metar_wms);
+  }
+
+  return map;
 };

resources/js/maps/base_map.js

@@ -50,14 +50,14 @@ export default (opts) => {
   feature_groups.push(openaip_cached_basemap);
   */
 
-  const openaip_basemap_phys_osm = leaflet.featureGroup(feature_groups)
+  const openaip_basemap_phys_osm = leaflet.featureGroup(feature_groups);
 
   let map = leaflet.map('map', {
     layers: [openaip_basemap_phys_osm],
     center: opts.center,
     zoom: opts.zoom,
     scrollWheelZoom: false,
-  })
+  });
 
   const attrib = leaflet.control.attribution({position: 'bottomleft'})
   attrib.addAttribution('<a href="https://www.thunderforest.com" target="_blank" style="">Thunderforest</a>')

resources/js/maps/helpers.js

@@ -0,0 +1,47 @@
+
+const leaflet = require('leaflet');
+
+/**
+ * Add a WMS layer to a map. opts must be:
+ * {
+ *  url: '',
+ *  params: {}
+ *  }
+ * @param map
+ * @param opts
+ */
+export function addWMSLayer(map, opts) {
+
+    if(opts.url === '') {
+        return;
+    }
+
+    opts.params = Object.assign({
+        format: 'image/png',
+        transparent: true,
+        maxZoom: 14,
+        minZoom: 4,
+    }, opts.params);
+
+    const mlayer = leaflet.tileLayer.wms(
+        opts.url, opts.params
+    );
+
+    mlayer.addTo(map);
+
+    return mlayer;
+}
+
+/**
+ * Show a popup
+ * @param feature
+ * @param layer
+ */
+export function showFeaturePopup(feature, layer) {
+    let popup_html = '';
+    if (feature.properties && feature.properties.popup) {
+        popup_html += feature.properties.popup
+    }
+
+    layer.bindPopup(popup_html)
+}

resources/js/maps/route_map.js

@@ -3,6 +3,7 @@ const leaflet = require('leaflet');
 
 import draw_base_map from './base_map'
 import { ACTUAL_ROUTE_COLOR, PLAN_ROUTE_COLOR } from './config'
+import {addWMSLayer} from './helpers';
 
 /**
  * Show some popup text when a feature is clicked on
@@ -48,11 +49,19 @@ export default (opts) => {
     actual_route_points: null,
     actual_route_line: null,
     render_elem: 'map',
+    metar_wms: {
+        url: '',
+        params: {}
+    },
   }, opts);
 
-  console.log(opts)
+  console.log(opts);
 
-  let map = draw_base_map(opts)
+  let map = draw_base_map(opts);
+
+  if (opts.metar_wms.url !== '') {
+      addWMSLayer(map, opts.metar_wms);
+  }
 
   let geodesicLayer = leaflet.geodesic([], {
     weight: 7,