Enable the /navdb uri and use it in the browsermap
This commit is contained in:
Torsten Dreyer
parent
dd8f8f8c8a
commit
71c4c85511
2 changed files with 134 additions and 38 deletions
|
|
@ -8,6 +8,7 @@
|
||||||
<property>/props/</property>
|
<property>/props/</property>
|
||||||
<json>/json/</json>
|
<json>/json/</json>
|
||||||
<run>/run.cgi</run>
|
<run>/run.cgi</run>
|
||||||
|
<navdb>/navdb</navdb>
|
||||||
</uri-handler>
|
</uri-handler>
|
||||||
<options>
|
<options>
|
||||||
<!-- for a complete description of options, see
|
<!-- for a complete description of options, see
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<script src="http://code.jquery.com/jquery-1.11.0.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
|
href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
|
||||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
|
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
|
||||||
<!-- script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script -->
|
|
||||||
<!-- script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script-->
|
|
||||||
<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" />
|
||||||
|
|
@ -26,61 +26,156 @@ html,body {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div id='map'></div>
|
<div id='map'></div>
|
||||||
<script src="http://code.jquery.com/jquery-1.11.0.js"
|
|
||||||
type="text/javascript"></script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var map = new L.Map('map');
|
/* <![CDATA[ */
|
||||||
|
var map = new L.Map('map', {
|
||||||
// var googleLayer = new L.Google('ROADMAP');
|
center : [ 53.7, 10.0 ],
|
||||||
// map.addLayer(googleLayer);
|
zoom : 10
|
||||||
|
|
||||||
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
||||||
minZoom : 6,
|
|
||||||
maxZoom : 15,
|
|
||||||
attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
maxZoom : 18,
|
||||||
|
attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
|
||||||
|
});
|
||||||
map.addLayer(osm);
|
map.addLayer(osm);
|
||||||
|
|
||||||
var aircraft = L.marker([53.5, 10.0]).addTo(map);
|
var mqroad = new L.TileLayer(
|
||||||
var latlng = new L.LatLng(53.5,10);
|
'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
|
||||||
map.setView(latlng, 10);
|
{
|
||||||
|
maxZoom : 18,
|
||||||
|
subdomains : [ '1', '2', '3', '4' ],
|
||||||
|
attribution : 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA.'
|
||||||
|
});
|
||||||
|
|
||||||
function centerMap( lat, lon ) {
|
var mqsat = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
|
||||||
if( null != lat ) this.latlng.lat = lat;
|
maxZoom : 18,
|
||||||
else if( null != lon ) this.latlng.lng = lon;
|
subdomains : [ '1', '2', '3', '4' ],
|
||||||
}
|
attribution : 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>.'
|
||||||
|
});
|
||||||
var heading = 0;
|
|
||||||
var speed = 0;
|
var icaoGermany = new L.TileLayer('https://secais.dfs.de/static-maps/ICAO500-2014-DACH-Reprojected/tiles/{z}/{x}/{y}.png', {
|
||||||
function setSpeedVector( heading, speed ) {
|
maxZoom : 15,
|
||||||
if( null != heading ) this.heading = heading;
|
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>'
|
||||||
else if( null != speed ) this.speed = speed;
|
});
|
||||||
}
|
|
||||||
|
var lowerGermany = new L.TileLayer('https://secais.dfs.de/static-maps/lower_20131114/tiles/{z}/{x}/{y}.png', {
|
||||||
setInterval( function() {
|
maxZoom : 15,
|
||||||
this.map.setView(this.latlng);
|
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>'
|
||||||
this.aircraft.setLatLng( this.latlng );
|
});
|
||||||
var label = "<p id='aircraft-label'>" + this.heading + "@" + this.speed + "</p>";
|
|
||||||
this.aircraft.bindPopup( label );
|
var navdbLayer = L.geoJson(null, {
|
||||||
}, 200 );
|
onEachFeature : function(feature, layer) {
|
||||||
|
if (feature.properties) {
|
||||||
|
var popupString = '<div class="popup">';
|
||||||
|
for ( var k in feature.properties) {
|
||||||
|
var v = feature.properties[k];
|
||||||
|
popupString += k + ': ' + v + '<br />';
|
||||||
|
}
|
||||||
|
popupString += '</div>';
|
||||||
|
layer.bindPopup(popupString, {
|
||||||
|
maxHeight : 200
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addLayer(navdbLayer);
|
||||||
|
|
||||||
|
var baseLayers = {
|
||||||
|
"OpenStreetMaps" : osm,
|
||||||
|
"MapQuest Satelite" : mqsat,
|
||||||
|
"MapQuest Roads" : mqroad,
|
||||||
|
};
|
||||||
|
|
||||||
|
var overlays = {
|
||||||
|
"NAVDB" : navdbLayer,
|
||||||
|
// "ICAO (Germany)" : icaoGermany,
|
||||||
|
// "IFR Lower Airspace (Germany)" : lowerGermany,
|
||||||
|
};
|
||||||
|
|
||||||
|
L.control.layers(baseLayers, overlays).addTo(map);
|
||||||
|
|
||||||
|
var aircraftMarker = Object.create(L.marker([ 53.5, 10.0 ]));
|
||||||
|
aircraftMarker.addTo(map);
|
||||||
|
aircraftMarker.setState = function(s) {
|
||||||
|
var latlng = new L.LatLng(s.lat, s.lon);
|
||||||
|
aircraftMarker.setLatLng(latlng);
|
||||||
|
var label = "<p id='aircraft-label'> heading:" + s.heading + "° 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 radius = bounds.getSouthWest().distanceTo(bounds.getNorthEast()) / 3704; // radius in NM
|
||||||
|
|
||||||
|
if (radius > 250)
|
||||||
|
radius = 250;
|
||||||
|
if (radius < 10)
|
||||||
|
radius = 10;
|
||||||
|
|
||||||
|
var center = map.getCenter();
|
||||||
|
var lat = center.lat;
|
||||||
|
var lon = center.lng;
|
||||||
|
|
||||||
|
var url = "/navdb?q=findWithinRange&type=vor,ils,ndb&range=" + radius + "&lat=" + lat + "&lon=" + lon;
|
||||||
|
console.log(url);
|
||||||
|
var jqxhr = $.get(url).done(function(data) {
|
||||||
|
navdbLayer.clearLayers();
|
||||||
|
navdbLayer.addData(data);
|
||||||
|
}).fail(function() {
|
||||||
|
alert('failed to load navdb data');
|
||||||
|
}).always(function() {
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
map.on('resize', function(e) {
|
||||||
|
UpdateNavdbLayer();
|
||||||
|
});
|
||||||
|
|
||||||
|
map.on('zoomend', function(e) {
|
||||||
|
UpdateNavdbLayer();
|
||||||
|
});
|
||||||
|
|
||||||
|
map.on('moveend', function(e) {
|
||||||
|
UpdateNavdbLayer();
|
||||||
|
});
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
var aircraftState = {
|
||||||
|
lat : 53.5,
|
||||||
|
lon : 10.0,
|
||||||
|
heading : 0,
|
||||||
|
speed : 0
|
||||||
|
};
|
||||||
|
|
||||||
|
UpdateNavdbLayer();
|
||||||
|
|
||||||
|
setInterval(function() {
|
||||||
|
var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon);
|
||||||
|
console.log("moving to " + aircraftState.lat + "/" + aircraftState.lon);
|
||||||
|
map.setView(latlng);
|
||||||
|
aircraftMarker.setState(aircraftState);
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
PropertyChangeListener(function() {
|
PropertyChangeListener(function() {
|
||||||
SetListener("/position/latitude-deg", function(n) {
|
SetListener("/position/latitude-deg", function(n) {
|
||||||
centerMap( n.value, null );
|
aircraftState.lat = n.value;
|
||||||
});
|
});
|
||||||
SetListener("/position/longitude-deg", function(n) {
|
SetListener("/position/longitude-deg", function(n) {
|
||||||
centerMap( null, n.value );
|
aircraftState.lon = n.value;
|
||||||
});
|
});
|
||||||
SetListener("/orientation/heading-deg", function(n) {
|
SetListener("/orientation/heading-deg", function(n) {
|
||||||
setSpeedVector( n.value, null );
|
aircraftState.heading = Math.round(n.value);
|
||||||
});
|
});
|
||||||
SetListener("/velocities/groundspeed-kt", function(n) {
|
SetListener("/velocities/groundspeed-kt", function(n) {
|
||||||
setSpeedVector( null, n.value );
|
aircraftState.speed = Math.round(n.value);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue