Fixes for API and live map
This commit is contained in:
Nabeel Shahzad
@@ -1,71 +1,70 @@
|
||||
|
||||
const leaflet = require('leaflet');
|
||||
|
||||
export default (opts) => {
|
||||
|
||||
opts = Object.assign({
|
||||
render_elem: 'map',
|
||||
center: [29.98139, -95.33374],
|
||||
zoom: 5,
|
||||
maxZoom: 10,
|
||||
layers: [],
|
||||
set_marker: false,
|
||||
}, opts);
|
||||
opts = Object.assign({
|
||||
render_elem: 'map',
|
||||
center: [29.98139, -95.33374],
|
||||
zoom: 5,
|
||||
maxZoom: 10,
|
||||
layers: [],
|
||||
set_marker: false,
|
||||
}, opts);
|
||||
|
||||
let feature_groups = [];
|
||||
/*var openaip_airspace_labels = new leaflet.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
|
||||
});
|
||||
let feature_groups = [];
|
||||
/*var openaip_airspace_labels = new leaflet.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);*/
|
||||
openaip_airspace_labels.addTo(map);*/
|
||||
|
||||
const opencyclemap_phys_osm = new leaflet.TileLayer(
|
||||
'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
|
||||
maxZoom: 14,
|
||||
minZoom: 4,
|
||||
format: 'image/png',
|
||||
transparent: true
|
||||
})
|
||||
const opencyclemap_phys_osm = new leaflet.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)
|
||||
feature_groups.push(opencyclemap_phys_osm)
|
||||
|
||||
/*const openaip_cached_basemap = new leaflet.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
|
||||
});
|
||||
/*const openaip_cached_basemap = new leaflet.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);
|
||||
*/
|
||||
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,
|
||||
});
|
||||
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>')
|
||||
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>')
|
||||
const attrib = leaflet.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)
|
||||
attrib.addTo(map)
|
||||
|
||||
return map
|
||||
return map
|
||||
};
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
|
||||
const leaflet = require('leaflet');
|
||||
|
||||
import draw_base_map from './base_map'
|
||||
import { ACTUAL_ROUTE_COLOR } from './config'
|
||||
import {ACTUAL_ROUTE_COLOR} from './config'
|
||||
|
||||
/**
|
||||
* Render the live map
|
||||
@@ -11,113 +10,170 @@ import { ACTUAL_ROUTE_COLOR } from './config'
|
||||
*/
|
||||
export default (opts) => {
|
||||
|
||||
opts = Object.assign({
|
||||
update_uri: '/api/acars',
|
||||
pirep_uri: '/api/pireps/{id}/acars',
|
||||
positions: null,
|
||||
render_elem: 'map',
|
||||
aircraft_icon: '/assets/img/acars/aircraft.png',
|
||||
}, opts);
|
||||
opts = Object.assign({
|
||||
update_uri: '/api/acars',
|
||||
pirep_uri: '/api/pireps/{id}',
|
||||
positions: null,
|
||||
render_elem: 'map',
|
||||
aircraft_icon: '/assets/img/acars/aircraft.png',
|
||||
units: 'nmi',
|
||||
}, opts);
|
||||
|
||||
const map = draw_base_map(opts);
|
||||
const aircraftIcon = leaflet.icon({
|
||||
iconUrl: opts.aircraft_icon,
|
||||
iconSize: [42, 42],
|
||||
iconAnchor: [21, 21],
|
||||
})
|
||||
const map = draw_base_map(opts);
|
||||
const aircraftIcon = leaflet.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 = leaflet.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...')
|
||||
let pannedToCenter = false;
|
||||
let layerFlights = null;
|
||||
let layerSelFlight = null;
|
||||
let layerSelFlightFeature = null;
|
||||
let layerSelFlightLayer = null;
|
||||
|
||||
/**
|
||||
* AJAX UPDATE
|
||||
* When a flight is clicked on, show the path, etc for that flight
|
||||
* @param feature
|
||||
* @param layer
|
||||
*/
|
||||
const onFlightClick = (feature, layer) => {
|
||||
|
||||
let flights = $.ajax({
|
||||
url: opts.update_uri,
|
||||
dataType: 'json',
|
||||
error: console.log
|
||||
})
|
||||
const pirep_uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id);
|
||||
const geojson_uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id) + "/acars/geojson";
|
||||
|
||||
$.when(flights).done(function (flightGeoJson) {
|
||||
const pirep_info = $.ajax({
|
||||
url: pirep_uri,
|
||||
dataType: 'json',
|
||||
error: console.log
|
||||
});
|
||||
|
||||
if (layerFlights !== null) {
|
||||
layerFlights.clearLayers()
|
||||
}
|
||||
const flight_route = $.ajax({
|
||||
url: geojson_uri,
|
||||
dataType: 'json',
|
||||
error: console.log
|
||||
});
|
||||
|
||||
layerFlights = leaflet.geoJSON(flightGeoJson, {
|
||||
onEachFeature: (feature, layer) => {
|
||||
|
||||
layer.on({
|
||||
click: (e) => {
|
||||
onFlightClick(feature, layer)
|
||||
// Load up the PIREP info
|
||||
$.when(flight_route).done((routeJson) => {
|
||||
if (layerSelFlight !== null) {
|
||||
map.removeLayer(layerSelFlight);
|
||||
}
|
||||
})
|
||||
|
||||
let popup_html = ''
|
||||
if (feature.properties && feature.properties.popup) {
|
||||
popup_html += feature.properties.popup
|
||||
}
|
||||
layerSelFlight = leaflet.geodesic([], {
|
||||
weight: 7,
|
||||
opacity: 0.9,
|
||||
color: ACTUAL_ROUTE_COLOR,
|
||||
wrap: false,
|
||||
}).addTo(map);
|
||||
|
||||
layer.bindPopup(popup_html)
|
||||
},
|
||||
pointToLayer: function (feature, latlon) {
|
||||
return leaflet.marker(latlon, {
|
||||
icon: aircraftIcon,
|
||||
rotationAngle: feature.properties.heading
|
||||
})
|
||||
}
|
||||
})
|
||||
layerSelFlight.geoJson(routeJson.line);
|
||||
layerSelFlightFeature = feature;
|
||||
layerSelFlightLayer = layer;
|
||||
|
||||
layerFlights.addTo(map)
|
||||
// Center on it, but only do it once, in case the map is moved
|
||||
if(!pannedToCenter) {
|
||||
map.panTo({lat: routeJson.position.lat, lng: routeJson.position.lon});
|
||||
pannedToCenter = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (layerSelFlight !== null) {
|
||||
onFlightClick(layerSelFlightFeature, layerSelFlightLayer)
|
||||
}
|
||||
})
|
||||
}
|
||||
//
|
||||
// When the PIREP info is done loading, show the bottom bar
|
||||
//
|
||||
$.when(pirep_info).done(pirep => { pirep = pirep.data;
|
||||
|
||||
updateMap()
|
||||
setInterval(updateMap, 10000)
|
||||
let dist, planned_dist;
|
||||
if(opts.units === 'nmi') {
|
||||
dist = pirep.distance.nmi;
|
||||
planned_dist = pirep.planned_distance.nmi;
|
||||
} else if(opts.units === 'mi') {
|
||||
dist = pirep.distance.mi;
|
||||
planned_dist = pirep.planned_distance.mi;
|
||||
} else if(opts.units === 'km') {
|
||||
dist = pirep.distance.km;
|
||||
planned_dist = pirep.planned_distance.km;
|
||||
}
|
||||
|
||||
// Parse flight time
|
||||
const hours = Math.floor(pirep.flight_time / 60);
|
||||
const mins = pirep.flight_time % 60;
|
||||
|
||||
$('#map_flight_id').text(pirep.airline.icao + pirep.flight_number);
|
||||
$('#map_flight_info').text(
|
||||
pirep.dpt_airport.name + ' (' + pirep.dpt_airport.icao + ') to ' +
|
||||
pirep.arr_airport.name + ' (' + pirep.arr_airport.icao + ')'
|
||||
);
|
||||
|
||||
$('#map_flight_stats_middle').html(
|
||||
'Status: <strong>' + pirep.status_text + '</strong><br />' +
|
||||
'Flight Time: <strong>' + hours + 'h ' + mins + 'm</strong><br />' +
|
||||
'Distance: <strong>' + dist + '</strong> / ' + planned_dist + opts.units + '<br />'
|
||||
);
|
||||
|
||||
// Show flight stat info
|
||||
$('#map_flight_stats_right').html(
|
||||
'Ground Speed: <strong>' + pirep.position.gs + '</strong><br />' +
|
||||
'Altitude: <strong>' + pirep.position.altitude + '</strong><br />' +
|
||||
'Heading: <strong>' + pirep.position.heading + '</strong>'
|
||||
);
|
||||
|
||||
$('#map-info-bar').show();
|
||||
});
|
||||
};
|
||||
|
||||
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 = leaflet.geoJSON(flightGeoJson, {
|
||||
onEachFeature: (feature, layer) => {
|
||||
layer.on({
|
||||
click: (e) => {
|
||||
pannedToCenter = false;
|
||||
onFlightClick(feature, layer)
|
||||
}
|
||||
});
|
||||
|
||||
let popup_html = '';
|
||||
if (feature.properties && (feature.properties.popup !== '' && feature.properties.popup !== undefined)) {
|
||||
popup_html += feature.properties.popup;
|
||||
layer.bindPopup(popup_html);
|
||||
}
|
||||
},
|
||||
pointToLayer: function (feature, latlon) {
|
||||
return leaflet.marker(latlon, {
|
||||
icon: aircraftIcon,
|
||||
rotationAngle: feature.properties.heading
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
layerFlights.addTo(map);
|
||||
|
||||
// Reload the clicked-flight information
|
||||
if (layerSelFlight !== null) {
|
||||
onFlightClick(layerSelFlightFeature, layerSelFlightLayer)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
updateMap();
|
||||
setInterval(updateMap, 10000)
|
||||
};
|
||||
|
||||
@@ -1,7 +1,30 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box-body">
|
||||
<div id="map" style="width: {{ $config['width'] }}; height: {{ $config['height'] }}"></div>
|
||||
|
||||
<div id="map" style="width: {{ $config['width'] }}; height: {{ $config['height'] }}">
|
||||
<div id="map-info-bar"
|
||||
style="display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
height: 100px;
|
||||
z-index: 9999;
|
||||
background-color:rgba(232, 232, 232, 0.9);
|
||||
width: {{ $config['width'] }};">
|
||||
<div style="float: left; margin-right: 30px; width: 50%;">
|
||||
<h3 style="margin: 0" id="map_flight_id"></h3>
|
||||
<p id="map_flight_info"></p>
|
||||
</div>
|
||||
<div style="float: left; margin-right: 30px;">
|
||||
<p id="map_flight_stats_middle"></p>
|
||||
</div>
|
||||
<div style="float: left;">
|
||||
<p id="map_flight_stats_right"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,8 +56,9 @@
|
||||
<script>
|
||||
phpvms.map.render_live_map({
|
||||
'update_uri': '{!! url('/api/acars') !!}',
|
||||
'pirep_uri': '{!! url('/api/pireps/{id}/acars/geojson') !!}',
|
||||
'pirep_uri': '{!! url('/api/pireps/{id}') !!}',
|
||||
'aircraft_icon': '{!! public_asset('/assets/img/acars/aircraft.png') !!}',
|
||||
'units': '{{ setting('units.distance') }}',
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user