live map updates
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -4,7 +4,7 @@ _ide_helper.php
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
composer.phar
|
||||
|
||||
yarn-error.log
|
||||
*.bak
|
||||
|
||||
# Laravel 4 specific
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
20
package.json
20
package.json
@@ -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
@@ -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
@@ -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",
|
||||
|
||||
@@ -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
|
||||
};
|
||||
|
||||
@@ -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, {
|
||||
|
||||
@@ -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;">
|
||||
|
||||
@@ -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>
|
||||
|
||||
46
yarn.lock
46
yarn.lock
@@ -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"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user