diff --git a/public/assets/system/js/phpvms.js b/public/assets/system/js/phpvms.js
new file mode 100644
index 00000000..5360d736
--- /dev/null
+++ b/public/assets/system/js/phpvms.js
@@ -0,0 +1,348 @@
+/**
+ *
+ * @type {{render_airspace_map, render_live_map, render_route_map}}
+ */
+
+const phpvms = (function() {
+
+ const PLAN_ROUTE_COLOR = '#36b123';
+ const ACTUAL_ROUTE_COLOR = '#172aea';
+
+ const draw_base_map = (opts) => {
+
+ opts = _.defaults(opts, {
+ render_elem: 'map',
+ center: [29.98139, -95.33374],
+ zoom: 5,
+ maxZoom: 10,
+ layers: [],
+ set_marker: false,
+ });
+
+ let feature_groups = [];
+ /*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
+ });
+
+ openaip_airspace_labels.addTo(map);*/
+
+ 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
+ });
+
+ feature_groups.push(opencyclemap_phys_osm);
+
+ /*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: 4,
+ tms: true,
+ detectRetina: true,
+ subdomains: '12',
+ format: 'image/png',
+ transparent: true
+ });
+
+ feature_groups.push(openaip_cached_basemap);
+ */
+
+ const openaip_basemap_phys_osm = L.featureGroup(feature_groups);
+
+ let map = L.map('map', {
+ layers: [openaip_basemap_phys_osm],
+ center: opts.center,
+ zoom: opts.zoom,
+ scrollWheelZoom: false,
+ });
+
+ const attrib = L.control.attribution({position: 'bottomleft'});
+ attrib.addAttribution("Thunderforest");
+ attrib.addAttribution("openAIP");
+ attrib.addAttribution("OpenStreetMap contributors");
+ attrib.addAttribution("OpenWeatherMap");
+
+ attrib.addTo(map);
+
+ return map;
+ };
+
+
+ /**
+ * Show some popup text when a feature is clicked on
+ * @param feature
+ * @param layer
+ */
+ const onFeaturePointClick = (feature, layer) => {
+ let popup_html = "";
+ if (feature.properties && feature.properties.popup) {
+ popup_html += feature.properties.popup;
+ }
+
+ layer.bindPopup(popup_html);
+ };
+
+ /**
+ * Show each point as a marker
+ * @param feature
+ * @param latlng
+ * @returns {*}
+ */
+ const pointToLayer = (feature, latlng) => {
+ return L.circleMarker(latlng, {
+ radius: 12,
+ fillColor: "#ff7800",
+ color: "#000",
+ weight: 1,
+ opacity: 1,
+ fillOpacity: 0.8
+ });
+ };
+
+ /**
+ *
+ * @param opts
+ * @private
+ */
+ const _render_route_map = (opts) => {
+
+ opts = _.defaults(opts, {
+ route_points: null,
+ planned_route_line: null,
+ actual_route_points: null,
+ actual_route_line: null,
+ render_elem: 'map',
+ });
+
+ console.log(opts);
+
+ let map = draw_base_map(opts);
+
+ let geodesicLayer = L.geodesic([], {
+ weight: 7,
+ opacity: 0.9,
+ color: PLAN_ROUTE_COLOR,
+ steps: 50,
+ wrap: false,
+ }).addTo(map);
+
+ geodesicLayer.geoJson(opts.planned_route_line);
+
+ try {
+ map.fitBounds(geodesicLayer.getBounds());
+ } catch (e) { console.log(e); }
+
+ // Draw the route points after
+ if (opts.route_points !== null) {
+ let route_points = L.geoJSON(opts.route_points, {
+ onEachFeature: onFeaturePointClick,
+ pointToLayer: pointToLayer,
+ style: {
+ "color": PLAN_ROUTE_COLOR,
+ "weight": 5,
+ "opacity": 0.65,
+ },
+ });
+
+ route_points.addTo(map);
+ }
+
+ /**
+ * draw the actual route
+ */
+
+ if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
+ let geodesicLayer = L.geodesic([], {
+ weight: 7,
+ opacity: 0.9,
+ color: ACTUAL_ROUTE_COLOR,
+ steps: 50,
+ wrap: false,
+ }).addTo(map);
+
+ geodesicLayer.geoJson(opts.actual_route_line);
+
+ try {
+ map.fitBounds(geodesicLayer.getBounds());
+ } catch (e) {
+ console.log(e);
+ }
+ }
+
+ if (opts.actual_route_points !== null && opts.actual_route_points.features.length > 0) {
+ let route_points = L.geoJSON(opts.actual_route_points, {
+ onEachFeature: onFeaturePointClick,
+ pointToLayer: pointToLayer,
+ style: {
+ "color": ACTUAL_ROUTE_COLOR,
+ "weight": 5,
+ "opacity": 0.65,
+ },
+ });
+
+ route_points.addTo(map);
+ }
+ };
+
+ /**
+ * Render a map with the airspace, etc around a given set of coords
+ * e.g, the airport map
+ * @param opts
+ */
+ const _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;
+ };
+
+ /**
+ * Render the live map
+ * @param opts
+ * @private
+ */
+ const _render_live_map = (opts) => {
+
+ opts = _.defaults(opts, {
+ update_uri: '/api/acars',
+ pirep_uri: '/api/pireps/{id}/acars',
+ positions: null,
+ render_elem: 'map',
+ aircraft_icon: '/assets/img/acars/aircraft.png',
+ });
+
+ const map = draw_base_map(opts);
+ const aircraftIcon = L.icon({
+ iconUrl: opts.aircraft_icon,
+ iconSize: [42, 42],
+ iconAnchor: [21, 21],
+ });
+
+ let layerFlights = null;
+ let layerSelFlight = null;
+ let layerSelFlightFeature = null;
+ let layerSelFlightLayer = null;
+
+ /**
+ * When a flight is clicked on, show the path, etc for that flight
+ * @param feature
+ * @param layer
+ */
+ const onFlightClick = (feature, layer) => {
+
+ const uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id);
+
+ const flight_route = $.ajax({
+ url: uri,
+ dataType: "json",
+ error: console.log
+ });
+
+ $.when(flight_route).done((routeJson) => {
+ if(layerSelFlight !== null) {
+ map.removeLayer(layerSelFlight);
+ }
+
+ layerSelFlight = L.geodesic([], {
+ weight: 7,
+ opacity: 0.9,
+ color: ACTUAL_ROUTE_COLOR,
+ wrap: false,
+ }).addTo(map);
+
+ layerSelFlight.geoJson(routeJson.line);
+
+ layerSelFlightFeature = feature;
+ layerSelFlightLayer = layer;
+ //map.fitBounds(layerSelFlight.getBounds());
+ });
+ };
+
+ const updateMap = () => {
+
+ console.log('reloading flights from acars...');
+
+ /**
+ * AJAX UPDATE
+ */
+
+ let flights = $.ajax({
+ url: opts.update_uri,
+ dataType: "json",
+ error: console.log
+ });
+
+ $.when(flights).done(function (flightGeoJson) {
+
+ if (layerFlights !== null) {
+ layerFlights.clearLayers();
+ }
+
+ layerFlights = L.geoJSON(flightGeoJson, {
+ onEachFeature: (feature, layer) => {
+
+ layer.on({
+ click: (e) => {
+ onFlightClick(feature, layer);
+ }
+ });
+
+ let popup_html = "";
+ if (feature.properties && feature.properties.popup) {
+ popup_html += feature.properties.popup;
+ }
+
+ layer.bindPopup(popup_html);
+ },
+ pointToLayer: function(feature, latlon) {
+ return L.marker(latlon, {
+ icon: aircraftIcon,
+ rotationAngle: feature.properties.heading
+ });
+ }
+ });
+
+ layerFlights.addTo(map);
+
+ if (layerSelFlight !== null) {
+ onFlightClick(layerSelFlightFeature, layerSelFlightLayer);
+ }
+ });
+ };
+
+ updateMap();
+ setInterval(updateMap, 10000);
+ };
+
+ return {
+ render_airspace_map: _render_airspace_map,
+ render_live_map: _render_live_map,
+ render_route_map: _render_route_map,
+ }
+})();
diff --git a/resources/views/admin/app.blade.php b/resources/views/admin/app.blade.php
index 326f0f9b..c4019b70 100644
--- a/resources/views/admin/app.blade.php
+++ b/resources/views/admin/app.blade.php
@@ -98,7 +98,7 @@