fly/fgdata
1
0
Fork 0
Code Activity

browsermap: delay the loading of navdb

Browse source
This commit is contained in:
Torsten Dreyer 2014-03-24 14:29:25 +01:00
parent 3db52f4cbd
commit 71ecbc533b
1 changed files with 126 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
webgui/map/index.html
View file

@ -9,7 +9,8 @@
<script src="../lib/props.js" type="text/javascript"></script> <script src="../lib/props.js" type="text/javascript"></script>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="FlightGear - Map" /> <meta name="description" content="FlightGear - Map" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head> </head>
<body> <body>
<style> <style>
@ -23,6 +24,19 @@ html,body,#map {
height: 100%; height: 100%;
} }
.infobox {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.infobox h4 {
margin: 0 0 5px;
color: #777;
}
</style> </style>
<div id='map'></div> <div id='map'></div>
<script type="text/javascript"> <script type="text/javascript">
@ -117,7 +131,12 @@ html,body,#map {
popupAncor : [ 0, -17 ], popupAncor : [ 0, -17 ],
iconUrl : "images/airport-unknown.svg", iconUrl : "images/airport-unknown.svg",
}); });
MAP_ICON["arp"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/arp.svg",
});
L.RotatedMarker = L.Marker.extend({ L.RotatedMarker = L.Marker.extend({
options : { options : {
angle : 0 angle : 0
@ -131,16 +150,14 @@ L.RotatedMarker = L.Marker.extend({
this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)'; this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
} else if (L.Browser.ie) { } else if (L.Browser.ie) {
// fallback for IE6, IE7, IE8 // fallback for IE6, IE7, IE8
var rad = this.options.angle * (Math.PI / 180), var rad = this.options.angle * (Math.PI / 180), costheta = Math.cos(rad), sintheta = Math.sin(rad);
costheta = Math.cos(rad), this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' + costheta
sintheta = Math.sin(rad); + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
} }
} }
}); });
var navdbLayer = L.geoJson(null, { var navdbLayer = new L.geoJson(null, {
pointToLayer : function(feature, latlng) { pointToLayer : function(feature, latlng) {
var options = { var options = {
title : feature.id + ' (' + feature.properties.name + ')', title : feature.id + ' (' + feature.properties.name + ')',
@ -202,49 +219,13 @@ L.RotatedMarker = L.Marker.extend({
lineJoin : 'bevel', lineJoin : 'bevel',
}; };
} }
} },
}); });
navdbLayer.dirty = true;
map.addLayer(navdbLayer); navdbLayer.update = function() {
if (navdbLayer.dirty) {
var baseLayers = { navdbLayer.dirty = false;
"OpenStreetMaps" : osm,
"MapQuest Satelite" : mqsat,
"MapQuest Roads" : mqroad,
};
var overlays = {
"NAVDB" : navdbLayer,
//"ICAO VFR (Germany)" : icaoGermany,
//"Lower Airspace (Germany)" : lowerGermany,
"Precipitation" : owmPrecipitation,
"Isobares" : owmPressure,
};
L.control.layers(baseLayers, overlays).addTo(map);
L.control.scale().addTo(map);
var aircraftMarker = new L.RotatedMarker([ 53.5, 10.0 ], {
angle: 45,
icon: L.icon({
iconSize : [ 60, 60 ],
iconAnchor : [ 30, 30 ],
popupAncor : [ 0, -32 ],
iconUrl : "images/aircraft.svg",
})
});
aircraftMarker.addTo(map);
aircraftMarker.setState = function(s) {
var latlng = new L.LatLng(s.lat, s.lon);
aircraftMarker.options.angle = s.heading;
aircraftMarker.setLatLng(latlng);
var label = "<p id='aircraft-label'> heading:" + s.heading + "&deg; GS: " + s.speed + "kt</p>";
aircraftMarker.bindPopup(label);
};
function UpdateNavdbLayer() {
//TODO: don't query navdb on small movements and if navdb layer is invisible
var bounds = map.getBounds(); var bounds = map.getBounds();
var radius = bounds.getSouthWest().distanceTo(bounds.getNorthEast()) / 3704; // radius in NM var radius = bounds.getSouthWest().distanceTo(bounds.getNorthEast()) / 3704; // radius in NM
@ -268,24 +249,84 @@ L.RotatedMarker = L.Marker.extend({
var jqxhr = $.get(url).done(function(data) { var jqxhr = $.get(url).done(function(data) {
navdbLayer.clearLayers(); navdbLayer.clearLayers();
navdbLayer.addData(data); navdbLayer.addData(data);
var foo = $(".airport");
var bar = "";
}).fail(function() { }).fail(function() {
alert('failed to load navdb data'); alert('failed to load navdb data');
}).always(function() { }).always(function() {
}); });
}
setTimeout(function() { navdbLayer.update() }, 5000);
}; };
map.addLayer(navdbLayer);
var baseLayers = {
"OpenStreetMaps" : osm,
"MapQuest Satelite" : mqsat,
"MapQuest Roads" : mqroad,
};
var overlays = {
"NAVDB" : navdbLayer,
//"ICAO VFR (Germany)" : icaoGermany,
//"Lower Airspace (Germany)" : lowerGermany,
"Precipitation" : owmPrecipitation,
"Isobares" : owmPressure,
};
L.control.layers(baseLayers, overlays).addTo(map);
L.control.scale().addTo(map);
var aircraftMarker = new L.RotatedMarker(map.getCenter(), {
angle : 45,
icon : L.icon({
iconSize : [ 60, 60 ],
iconAnchor : [ 30, 30 ],
popupAncor : [ 0, -32 ],
iconUrl : "images/aircraft.svg",
})
});
aircraftMarker.addTo(map);
aircraftMarker.setState = function(s) {
var latlng = new L.LatLng(s.lat, s.lon);
aircraftMarker.options.angle = s.heading;
aircraftMarker.setLatLng(latlng);
var label = "<p id='aircraft-label'> heading:" + s.heading + "&deg; GS: " + s.speed + "kt</p>";
aircraftMarker.bindPopup(label);
info.update(s);
};
var info = L.control();
info.onAdd = function(map) {
this._div = L.DomUtil.create('div', 'infobox');
this.update();
return this._div;
};
info.update = function(props) {
var s = '<h4>Flight Path</h4>';
if (props) {
s += '<p>';
s += 'MH:' + props.heading + '&deg;<br />';
s += 'GS: ' + props.speed + 'kt<br />';
s += 'ALT: ' + props.alt + 'ft';
s += '</p>';
}
this._div.innerHTML = s;
};
info.addTo(map);
map.on('resize', function(e) { map.on('resize', function(e) {
UpdateNavdbLayer(); navdbLayer.dirty = true;
}); });
map.on('zoomend', function(e) { map.on('zoomend', function(e) {
UpdateNavdbLayer(); navdbLayer.dirty = true;
}); });
map.on('moveend', function(e) { map.on('moveend', function(e) {
UpdateNavdbLayer(); navdbLayer.dirty = true;
}); });
$(document).ready(function() { $(document).ready(function() {
@ -294,10 +335,11 @@ var bar = "";
lat : 53.5, lat : 53.5,
lon : 10.0, lon : 10.0,
heading : 0, heading : 0,
speed : 0 speed : 0,
alt : 0,
}; };
UpdateNavdbLayer(); navdbLayer.update();
setInterval(function() { setInterval(function() {
var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon); var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon);
@ -306,6 +348,9 @@ var bar = "";
}, 1000); }, 1000);
PropertyChangeListener(function() { PropertyChangeListener(function() {
SetListener("/position/altitude-ft", function(n) {
aircraftState.alt = Math.round(n.value);
});
SetListener("/position/latitude-deg", function(n) { SetListener("/position/latitude-deg", function(n) {
aircraftState.lat = n.value; aircraftState.lat = n.value;
}); });