More fixes for maps; user API key set to design

public/assets/admin/js/admin.js

@@ -5,7 +5,10 @@
 function phpvms_vacentral_airport_lookup(icao, callback) {
     $.ajax({
         url: '/api/airports/' + icao + '/lookup',
-        method: 'GET'
+        method: 'GET',
+        headers: {
+            'Authorization': PHPVMS_USER_API_KEY
+        }
     }).done(function (data, status) {
         callback(data.data);
     });

public/assets/system/js/system.js

@@ -1,78 +1,97 @@
-function phpvms_render_airspace_map(opts) {
-    opts = __parse_opts(opts);
-    var map = __draw_base_map(opts);
-    if (opts.set_marker == true) {
-        L.marker(coords).addTo(map);
-    }
-    return map;
-}
+const phpvms= (function() {
 
-function __parse_opts(opts) {
-    _.defaults(opts, {
-        render_elem: 'map',
-        overlay_elem: '',
-        lat: 0,
-        lon: 0,
-        zoom: 12,
-        layers: [],
-        set_marker: false,
-    });
+    const draw_base_map = (opts) => {
 
-    return opts;
-}
+        /*var openaip_airspace_labels = new L.TileLayer.WMS(
+            "http://{s}.tile.maps.openaip.net/geowebcache/service/wms", {
+                maxZoom: 14,
+                minZoom: 12,
+                layers: 'openaip_approved_airspaces_labels',
+                tileSize: 1024,
+                detectRetina: true,
+                subdomains: '12',
+                format: 'image/png',
+                transparent: true
+            });
 
-function __draw_base_map(opts) {
+        openaip_airspace_labels.addTo(map);*/
 
-    var coords = [opts.lat, opts.lon];
+        const opencyclemap_phys_osm = new L.TileLayer(
+            'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
+                maxZoom: 14,
+                minZoom: 4,
+                format: 'image/png',
+                transparent: true
+            });
 
-    /*var openaip_airspace_labels = new L.TileLayer.WMS(
-        "http://{s}.tile.maps.openaip.net/geowebcache/service/wms", {
+        const openaip_cached_basemap = new L.TileLayer("http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png", {
             maxZoom: 14,
-            minZoom: 12,
-            layers: 'openaip_approved_airspaces_labels',
-            tileSize: 1024,
+            minZoom: 4,
+            tms: true,
             detectRetina: true,
             subdomains: '12',
             format: 'image/png',
             transparent: true
         });
 
-    openaip_airspace_labels.addTo(map);*/
+        const openaip_basemap_phys_osm = L.featureGroup([opencyclemap_phys_osm, openaip_cached_basemap]);
 
-    var opencyclemap_phys_osm = new L.TileLayer(
-        'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
-            maxZoom: 14,
-            minZoom: 4,
-            format: 'image/png',
-            transparent: true
+        let map = L.map('map', {
+            layers: [openaip_basemap_phys_osm],
+            zoom: opts.zoom,
+            scrollWheelZoom: false,
         });
 
-    var openaip_cached_basemap = new L.TileLayer("http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png", {
-        maxZoom: 14,
-        minZoom: 4,
-        tms: true,
-        detectRetina: false,
-        subdomains: '12',
-        format: 'image/png',
-        transparent: true
-    });
+        const attrib = L.control.attribution({position: 'bottomleft'});
+        attrib.addAttribution("<a href=\"https://www.thunderforest.com\" target=\"_blank\" style=\"\">Thunderforest</a>");
+        attrib.addAttribution("<a href=\"https://www.openaip.net\" target=\"_blank\" style=\"\">openAIP</a>");
+        attrib.addAttribution("<a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\" style=\"\">OpenStreetMap</a> contributors");
+        attrib.addAttribution("<a href=\"https://www.openweathermap.org\" target=\"_blank\" style=\"\">OpenWeatherMap</a>");
 
-    var openaip_basemap_phys_osm = L.featureGroup([opencyclemap_phys_osm, openaip_cached_basemap]);
+        attrib.addTo(map);
 
-    var map = L.map('map', {
-        layers: [openaip_basemap_phys_osm],
-        center: coords,
-        zoom: opts.zoom,
-        scrollWheelZoom: false,
-    }).setView(coords, opts.zoom);
+        return map;
+    }
 
-    var attrib = L.control.attribution({position: 'bottomleft'});
-    attrib.addAttribution("<a href=\"https://www.thunderforest.com\" target=\"_blank\" style=\"\">Thunderforest</a>");
-    attrib.addAttribution("<a href=\"https://www.openaip.net\" target=\"_blank\" style=\"\">openAIP</a>");
-    attrib.addAttribution("<a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\" style=\"\">OpenStreetMap</a> contributors");
-    attrib.addAttribution("<a href=\"https://www.openweathermap.org\" target=\"_blank\" style=\"\">OpenWeatherMap</a>");
 
-    attrib.addTo(map);
+    return {
 
-    return map;
-}
+        /**
+         *
+         * @param opts
+         */
+        render_route_map: (opts) => {
+            opts = _.defaults(opts, {
+                coords: [],   // [ {name, lat, lon}, {name, lat, lon} ];
+            });
+        },
+
+        /**
+         * Render a map with the airspace, etc around a given set of coords
+         * e.g, the airport map
+         * @param opts
+         */
+        render_airspace_map: (opts) => {
+            opts = _.defaults(opts, {
+                render_elem: 'map',
+                overlay_elem: '',
+                lat: 0,
+                lon: 0,
+                zoom: 12,
+                layers: [],
+                set_marker: false,
+            });
+
+            let map = draw_base_map(opts);
+            const coords = [opts.lat, opts.lon];
+            console.log('Applying coords', coords);
+
+            map.setView(coords, opts.zoom);
+            if (opts.set_marker === true) {
+                L.marker(coords).addTo(map);
+            }
+
+            return map;
+        }
+    }
+})();