From e17677251289c4fddaffbc1386ea048b0ec9741e Mon Sep 17 00:00:00 2001 From: Nabeel Shahzad Date: Thu, 22 Feb 2018 10:14:45 -0600 Subject: [PATCH] Rename system.js to phpvms.js to make it clearer --- public/assets/system/js/phpvms.js | 348 ++++++++++++++++++ resources/views/admin/app.blade.php | 2 +- resources/views/layouts/default/app.blade.php | 2 +- 3 files changed, 350 insertions(+), 2 deletions(-) create mode 100644 public/assets/system/js/phpvms.js 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 @@ - + - +