live map updates

This commit is contained in:
Nabeel Shahzad
2018-05-04 13:59:47 -05:00
parent d80e70e2b1
commit 0cd7b3b71f
15 changed files with 178 additions and 48 deletions

2
.gitignore vendored
View File

@@ -4,7 +4,7 @@ _ide_helper.php
node_modules/
npm-debug.log
composer.phar
yarn-error.log
*.bak
# Laravel 4 specific

View File

@@ -107,7 +107,7 @@ class PirepController extends Controller
$active = [];
$pireps = $this->acarsRepo->getPositions();
foreach($pireps as $pirep) {
if(\count($pirep->position) === 0) {
if(!$pirep->position) {
continue;
}

View File

@@ -11,7 +11,13 @@ use App\Models\Traits\FilesTrait;
* @property string id
* @property string iata
* @property string icao
* @property string name
* @property string location
* @property string country
* @property string timezone
* @property float ground_handling_cost
* @property float lat
* @property float lon
* @package App\Models
*/
class Airport extends Model

View File

@@ -44,6 +44,7 @@ use PhpUnitsOfMeasure\Exception\NonStringUnitName;
* @property Carbon updated_at
* @property bool state
* @property Acars position
* @property Acars[] acars
* @package App\Models
*/
class Pirep extends Model

View File

@@ -181,18 +181,29 @@ class GeoService extends Service
*/
public function getFeatureFromAcars(Pirep $pirep)
{
// Get the two airports
$airports = new GeoJson();
$airports->addPoint($pirep->dpt_airport->lat, $pirep->dpt_airport->lon, [
'name' => $pirep->dpt_airport->name,
'icao' => $pirep->dpt_airport->icao,
'type' => 'D',
]);
$airports->addPoint($pirep->arr_airport->lat, $pirep->arr_airport->lon, [
'name' => $pirep->arr_airport->name,
'icao' => $pirep->arr_airport->icao,
'type' => 'A',
]);
$route = new GeoJson();
/**
* @var $point \App\Models\Acars
*/
$counter = 1;
foreach ($pirep->acars as $point) {
$route->addPoint($point->lat, $point->lon, [
'pirep_id' => $pirep->id,
'name' => '',
'alt' => $point->altitude,
'popup' => 'GS: '.$point->gs.'<br />Alt: '.$point->altitude,
]);
}
@@ -201,8 +212,20 @@ class GeoService extends Service
'lat' => $pirep->position->lat,
'lon' => $pirep->position->lon,
],
'line' => $route->getLine(),
'points' => $route->getPoints()
'line' => $route->getLine(),
'points' => $route->getPoints(),
'airports' => [
'a' => [
'icao' => $pirep->arr_airport->icao,
'lat' => $pirep->arr_airport->lat,
'lon' => $pirep->arr_airport->lon,
],
'd' => [
'icao' => $pirep->dpt_airport->icao,
'lat' => $pirep->dpt_airport->lat,
'lon' => $pirep->dpt_airport->lon,
],
]
];
}
@@ -227,10 +250,8 @@ class GeoService extends Service
$flight->addPoint($point->lat, $point->lon, [
'pirep_id' => $pirep->id,
'gs' => $point->gs,
'alt' => $point->altitude,
'heading' => $point->heading ?: 0,
//'popup' => $pirep->ident.'<br />GS: '.$point->gs.'<br />Alt: '.$point->altitude,
]);
}

View File

@@ -10,19 +10,21 @@
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"@turf/center": "^6.0.1",
"Leaflet.Geodesic": "git+https://git@github.com/henrythasler/Leaflet.Geodesic.git",
"animate.css": "^3.6.1",
"animate.css": "~3.6",
"axios": "^0.17.1",
"bootstrap-sass": "^3.3.7",
"bootstrap3": "^3.3.5",
"cross-env": "^5.1.4",
"bootstrap-sass": "~3.3",
"bootstrap3": "~3.3",
"cross-env": "~5.1",
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
"flag-icon-css": "^2.9.0",
"icheck": "^1.0.2",
"jquery": "^3.3.1",
"jquery-pjax": "^2.0.1",
"laravel-mix": "^2.1",
"leaflet": "^1.3.1",
"geolib": "^2.0.24",
"icheck": "~1.0",
"jquery": "~3.3",
"jquery-pjax": "~2.0",
"laravel-mix": "~2.1",
"leaflet": "~1.3",
"leaflet-ajax": "2.1.0",
"leaflet-rotatedmarker": "^0.2.0",
"lodash": "4.17.4",

File diff suppressed because one or more lines are too long

View File

@@ -15,6 +15,12 @@
background-color: rgba(232, 232, 232, 0.9);
}
.map-info-label {
display:block;
padding: 5px;
background-color: rgba(232, 232, 232, 0.9);
}
.dashboard-box {
background: #067ec1;
color: #FFF;

File diff suppressed because one or more lines are too long

View File

@@ -1,18 +1,18 @@
{
"/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=a9c6b70866d562211ec7",
"/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=03915ea0eedba5cf1b1e",
"/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=b0a0f05b94a4486db4f2",
"/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=cc80aec3cf1646f83d8d",
"/assets/admin/js/app.js": "/assets/admin/js/app.js?id=daa4de1b316b95d218ba",
"/assets/admin/js/app.js": "/assets/admin/js/app.js?id=56dfb08df451052afdd3",
"/assets/installer/js/app.js": "/assets/installer/js/app.js?id=3a51850509367b06cd1f",
"/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
"/assets/admin/fonts/glyphicons-halflings-regular.woff2": "/assets/admin/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
"/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=0e92f4c3efc6988a3c96",
"/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=90a4b76b4f11558691f6",
"/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
"/assets/admin/fonts/glyphicons-halflings-regular.woff2": "/assets/admin/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
"/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=63b3af84650a0145d61a",
"/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=1e2db432947c2dca1b9f",
"/assets/global/js/jquery.js": "/assets/global/js/jquery.js?id=6a07da9fae934baf3f74",
"/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=99aedbd62dfa118e7b73",
"/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=5130233c88c71fc60135",
"/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=753a3c0dec86d3a38d9c",
"/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=97da23d47b838cbd4bef",
"/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=39437a6200d8066a49d4",
"/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=127d7cfbb176dc559854",
"/assets/global/js/vendor.js": "/assets/global/js/vendor.js?id=6436d215691e8f38eb12",
"/assets/global/css/vendor.css": "/assets/global/css/vendor.css?id=115d5c4f2370ae94a962",
"/assets/installer/css/vendor.css": "/assets/installer/css/vendor.css?id=cd76d2d9611b9a13d644",

View File

@@ -64,7 +64,7 @@ export default (opts) => {
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
};

View File

@@ -1,8 +1,11 @@
//
const geolib = require('geolib');
const leaflet = require('leaflet');
const rivets = require('rivets');
import draw_base_map from './base_map'
import {ACTUAL_ROUTE_COLOR} from './config'
import { ACTUAL_ROUTE_COLOR } from './config'
/**
* Render the live map
@@ -28,14 +31,44 @@ export default (opts) => {
iconAnchor: [21, 21],
});
/**
* Hold the markers
* @type {{}}
*/
let markers_list = {};
let pannedToCenter = false;
let layerFlights = null;
let layerSelFlight = null;
let layerSelFlightFeature = null;
let layerSelFlightLayer = null;
let layerSelArr = null;
let layerSelDep = null;
const r_map_view = rivets.bind($('#map-info-box'), {pirep: {}});
const r_table_view = rivets.bind($('#live_flights'), {pireps: []});
/**
* Controller for two-way bindings
* @type {{focusMarker: focusMarker}}
*/
const mapController = {
/**
* Focus on a specific marker
* @param e
* @param model
*/
focusMarker: (e, model) => {
if(!(model.pirep.id in markers_list)) {
console.log('marker not found in list');
return;
}
const marker = markers_list[model.pirep.id];
onFlightClick(marker[0], marker[1]);
},
};
const r_map_view = rivets.bind($('#map-info-box'), {pirep: {}, controller: mapController});
const r_table_view = rivets.bind($('#live_flights'), {pireps: [], controller: mapController});
/**
* When a flight is clicked on, show the path, etc for that flight
@@ -60,9 +93,11 @@ export default (opts) => {
});
// Load up the PIREP info
$.when(flight_route).done((routeJson) => {
$.when(flight_route).done((rte) => {
if (layerSelFlight !== null) {
map.removeLayer(layerSelFlight);
//map.removeLayer(layerSelArr);
//map.removeLayer(layerSelDep);
}
layerSelFlight = leaflet.geodesic([], {
@@ -72,13 +107,27 @@ export default (opts) => {
wrap: false,
}).addTo(map);
layerSelFlight.geoJson(routeJson.line);
layerSelFlight.geoJson(rte.line);
layerSelFlightFeature = feature;
layerSelFlightLayer = layer;
/*const dptIcon = leaflet.divIcon({
html: '<div class="map-info-label"><h5>' + rte.airports.d.icao + '</h5></div>'
});
layerSelDep = leaflet.marker([rte.airports.d.lat, rte.airports.d.lon], {icon:dptIcon}).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});
// find center
const c = geolib.getCenter([
{latitude: rte.airports.a.lat, longitude: rte.airports.a.lon},
{latitude: rte.airports.d.lat, longitude: rte.airports.d.lon},
]);
//map.panTo({lat: c.latitude, lng: c.longitude});
map.panTo({lat: rte.position.lat, lng: rte.position.lon});
pannedToCenter = true;
}
});
@@ -132,6 +181,9 @@ export default (opts) => {
popup_html += feature.properties.popup;
layer.bindPopup(popup_html);
}
// add to the list
markers_list[feature.properties.pirep_id] = [feature, layer];
},
pointToLayer: function (feature, latlon) {
return leaflet.marker(latlon, {

View File

@@ -48,7 +48,7 @@
</div>
</nav>
<!-- End Navbar -->
<div class="clearfix" style="height: 25px;"></div>
<div id="top_anchor" class="clearfix" style="height: 25px;"></div>
<div class="wrapper">
<div class="clear"></div>
<div class="container-fluid" style="width: 85%!important;">

View File

@@ -90,7 +90,7 @@ and being mindful of the rivets bindings
</thead>
<tbody>
<tr rv-each-pirep="pireps">
<td>{ pirep.airline.code }{ pirep.ident}</td>
<td><a href="#top_anchor" rv-on-click="controller.focusMarker">{ pirep.airline.icao }{ pirep.ident}</a> </td>
{{-- Show the full airport name on hover --}}
<td><span rv-title="pirep.dpt_airport.name">{ pirep.dpt_airport.icao }</span></td>
<td><span rv-title="pirep.arr_airport.name">{ pirep.arr_airport.icao }</span></td>

View File

@@ -2,6 +2,30 @@
# yarn lockfile v1
"@turf/bbox@6.x":
version "6.0.1"
resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-6.0.1.tgz#b966075771475940ee1c16be2a12cf389e6e923a"
dependencies:
"@turf/helpers" "6.x"
"@turf/meta" "6.x"
"@turf/center@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/@turf/center/-/center-6.0.1.tgz#40a17d0a170df5bba09ad93e133b904d8eb14601"
dependencies:
"@turf/bbox" "6.x"
"@turf/helpers" "6.x"
"@turf/helpers@6.x":
version "6.1.3"
resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.1.3.tgz#0001a5c4a3bff25b4bbbc64f8713a383c9ab9e94"
"@turf/meta@6.x":
version "6.0.1"
resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-6.0.1.tgz#cf6f3f2263a3d24fc8d6a7e90f0420bbc44c090d"
dependencies:
"@turf/helpers" "6.x"
"Leaflet.Geodesic@git+https://git@github.com/henrythasler/Leaflet.Geodesic.git":
version "1.1.0"
resolved "git+https://git@github.com/henrythasler/Leaflet.Geodesic.git#7d710dd13020efb7c9901f5b3448a4541f507c56"
@@ -92,7 +116,7 @@ amdefine@>=0.0.4:
version "1.0.1"
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
animate.css@^3.6.1:
animate.css@~3.6:
version "3.6.1"
resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-3.6.1.tgz#4ea8a48556378bc8d7535224296c4c0dac9229de"
@@ -998,11 +1022,11 @@ boom@5.x.x:
dependencies:
hoek "4.x.x"
bootstrap-sass@^3.3.7:
bootstrap-sass@~3.3:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
bootstrap3@^3.3.5:
bootstrap3@~3.3:
version "3.3.5"
resolved "https://registry.yarnpkg.com/bootstrap3/-/bootstrap3-3.3.5.tgz#496a4ef6c087214fa96838196d60de645e82591a"
@@ -1682,7 +1706,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
cross-env@^5.1.4:
cross-env@~5.1:
version "5.1.4"
resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.4.tgz#f61c14291f7cc653bb86457002ea80a04699d022"
dependencies:
@@ -3046,6 +3070,10 @@ generate-object-property@^1.1.0:
dependencies:
is-property "^1.0.0"
geolib@^2.0.24:
version "2.0.24"
resolved "https://registry.yarnpkg.com/geolib/-/geolib-2.0.24.tgz#eb3d7fbc65f5ea3354a5af6054563ebe9f33e5f4"
get-caller-file@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -3586,7 +3614,7 @@ https-browserify@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
icheck@^1.0.2:
icheck@~1.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/icheck/-/icheck-1.0.2.tgz#06d08da3d47ae448c153b2639b86e9ad7fdf7128"
@@ -4119,11 +4147,11 @@ jquery-mousewheel@~3.1.13:
version "3.1.13"
resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5"
jquery-pjax@^2.0.1:
jquery-pjax@~2.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/jquery-pjax/-/jquery-pjax-2.0.1.tgz#6b3a1ba16e644e624bdcfe72eb6b3d96a846f5f2"
"jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^3.3.1:
"jquery@^1.8.3 || ^2.0 || ^3.0", jquery@~3.3:
version "3.3.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
@@ -4251,7 +4279,7 @@ kind-of@^6.0.0, kind-of@^6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
laravel-mix@^2.1:
laravel-mix@~2.1:
version "2.1.11"
resolved "https://registry.yarnpkg.com/laravel-mix/-/laravel-mix-2.1.11.tgz#3741bde214586f8c171641990c9a487eece5367d"
dependencies:
@@ -4322,7 +4350,7 @@ leaflet-rotatedmarker@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/leaflet-rotatedmarker/-/leaflet-rotatedmarker-0.2.0.tgz#4467f49f98d1bfd56959bd9c6705203dd2601277"
leaflet@^1.3.1:
leaflet@~1.3:
version "1.3.1"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.1.tgz#86f336d2fb0e2d0ff446677049a5dc34cf0ea60e"