fly/fgdata
1
0
Fork 0
Code Activity

browser-map: add symbols for vor and ndb

Browse source
This commit is contained in:
Torsten Dreyer 2014-03-20 10:43:08 +01:00
parent cf05294b84
commit c628771b4b
3 changed files with 294 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
webgui/map/images/ndb.svg Normal file
View file

@ -0,0 +1,91 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="7" stroke="black" stroke-width="6" fill="white" fill-opacity="0" />
<circle cx="50.0" cy="65.0" r="3" fill="black"/>
<circle cx="57.5" cy="63.0" r="3" fill="black"/>
<circle cx="63.0" cy="57.5" r="3" fill="black"/>
<circle cx="65.0" cy="50.0" r="3" fill="black"/>
<circle cx="63.0" cy="42.5" r="3" fill="black"/>
<circle cx="57.5" cy="37.0" r="3" fill="black"/>
<circle cx="50.0" cy="35.0" r="3" fill="black"/>
<circle cx="42.5" cy="37.0" r="3" fill="black"/>
<circle cx="37.0" cy="42.5" r="3" fill="black"/>
<circle cx="35.0" cy="50.0" r="3" fill="black"/>
<circle cx="37.0" cy="57.5" r="3" fill="black"/>
<circle cx="42.5" cy="63.0" r="3" fill="black"/>
<circle cx="50.00" cy="75.00" r="3" fill="black"/>
<circle cx="59.03" cy="73.31" r="3" fill="black"/>
<circle cx="66.84" cy="68.48" r="3" fill="black"/>
<circle cx="72.38" cy="61.14" r="3" fill="black"/>
<circle cx="74.89" cy="52.31" r="3" fill="black"/>
<circle cx="74.05" cy="43.16" r="3" fill="black"/>
<circle cx="69.95" cy="34.93" r="3" fill="black"/>
<circle cx="63.16" cy="28.74" r="3" fill="black"/>
<circle cx="54.59" cy="25.43" r="3" fill="black"/>
<circle cx="45.41" cy="25.43" r="3" fill="black"/>
<circle cx="36.84" cy="28.74" r="3" fill="black"/>
<circle cx="30.05" cy="34.93" r="3" fill="black"/>
<circle cx="25.95" cy="43.16" r="3" fill="black"/>
<circle cx="25.11" cy="52.31" r="3" fill="black"/>
<circle cx="27.62" cy="61.14" r="3" fill="black"/>
<circle cx="33.16" cy="68.48" r="3" fill="black"/>
<circle cx="40.97" cy="73.31" r="3" fill="black"/>
<circle cx="50.00" cy="85.00" r="3" fill="black"/>
<circle cx="59.44" cy="83.70" r="3" fill="black"/>
<circle cx="68.19" cy="79.90" r="3" fill="black"/>
<circle cx="75.58" cy="73.89" r="3" fill="black"/>
<circle cx="81.08" cy="66.10" r="3" fill="black"/>
<circle cx="84.27" cy="57.12" r="3" fill="black"/>
<circle cx="84.92" cy="47.61" r="3" fill="black"/>
<circle cx="82.98" cy="38.28" r="3" fill="black"/>
<circle cx="78.59" cy="29.82" r="3" fill="black"/>
<circle cx="72.09" cy="22.85" r="3" fill="black"/>
<circle cx="63.94" cy="17.90" r="3" fill="black"/>
<circle cx="54.77" cy="15.33" r="3" fill="black"/>
<circle cx="45.23" cy="15.33" r="3" fill="black"/>
<circle cx="36.06" cy="17.90" r="3" fill="black"/>
<circle cx="27.91" cy="22.85" r="3" fill="black"/>
<circle cx="21.41" cy="29.82" r="3" fill="black"/>
<circle cx="17.02" cy="38.28" r="3" fill="black"/>
<circle cx="15.08" cy="47.61" r="3" fill="black"/>
<circle cx="15.73" cy="57.12" r="3" fill="black"/>
<circle cx="18.92" cy="66.10" r="3" fill="black"/>
<circle cx="24.42" cy="73.89" r="3" fill="black"/>
<circle cx="31.81" cy="79.90" r="3" fill="black"/>
<circle cx="40.56" cy="83.70" r="3" fill="black"/>
<circle cx="50.00" cy="95.00" r="3" fill="black"/>
<circle cx="59.67" cy="93.95" r="3" fill="black"/>
<circle cx="68.90" cy="90.84" r="3" fill="black"/>
<circle cx="77.23" cy="85.82" r="3" fill="black"/>
<circle cx="84.30" cy="79.13" r="3" fill="black"/>
<circle cx="89.76" cy="71.08" r="3" fill="black"/>
<circle cx="93.36" cy="62.04" r="3" fill="black"/>
<circle cx="94.93" cy="52.44" r="3" fill="black"/>
<circle cx="94.41" cy="42.72" r="3" fill="black"/>
<circle cx="91.80" cy="33.34" r="3" fill="black"/>
<circle cx="87.25" cy="24.75" r="3" fill="black"/>
<circle cx="80.95" cy="17.33" r="3" fill="black"/>
<circle cx="73.20" cy="11.44" r="3" fill="black"/>
<circle cx="64.37" cy="7.36" r="3" fill="black"/>
<circle cx="54.87" cy="5.26" r="3" fill="black"/>
<circle cx="45.13" cy="5.26" r="3" fill="black"/>
<circle cx="35.63" cy="7.36" r="3" fill="black"/>
<circle cx="26.80" cy="11.44" r="3" fill="black"/>
<circle cx="19.05" cy="17.33" r="3" fill="black"/>
<circle cx="12.75" cy="24.75" r="3" fill="black"/>
<circle cx="8.20" cy="33.34" r="3" fill="black"/>
<circle cx="5.59" cy="42.72" r="3" fill="black"/>
<circle cx="5.07" cy="52.44" r="3" fill="black"/>
<circle cx="6.64" cy="62.04" r="3" fill="black"/>
<circle cx="10.24" cy="71.08" r="3" fill="black"/>
<circle cx="15.70" cy="79.13" r="3" fill="black"/>
<circle cx="22.77" cy="85.82" r="3" fill="black"/>
<circle cx="31.10" cy="90.84" r="3" fill="black"/>
<circle cx="40.33" cy="93.95" r="3" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

6
webgui/map/images/vor.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="95" height="83">
<!--path fill="none" stroke="#000" stroke-width="3" d="m1,1h93v80H1zm0,40 23-40h47l23,40-23,40h-47z"/-->
<path fill="none" stroke="#000" stroke-width="3" d="m0,40 23-40h47l23,40-23,40h-47z"/>
<circle cx="47" cy="41" r="7"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 335 B

378
webgui/map/index.html
View file

@ -1,181 +1,197 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<script src="http://code.jquery.com/jquery-1.11.0.js" <script src="http://code.jquery.com/jquery-1.11.0.js"
type="text/javascript"></script> 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="../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" />
</head> </head>
<body> <body>
<style> <style>
html,body { html,body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#map { #map {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid green; border: 1px solid green;
} }
</style> </style>
<div id='map'></div> <div id='map'></div>
<script type="text/javascript"> <script type="text/javascript">
/* <![CDATA[ */ /* <![CDATA[ */
var map = new L.Map('map', { var map = new L.Map('map', {
center : [ 53.7, 10.0 ], center : [ 53.7, 10.0 ],
zoom : 10 zoom : 10
}); });
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18, maxZoom : 18,
attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}); });
map.addLayer(osm); map.addLayer(osm);
var mqroad = new L.TileLayer( var mqroad = new L.TileLayer(
'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
{ {
maxZoom : 18, maxZoom : 18,
subdomains : [ '1', '2', '3', '4' ], 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.' 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.'
}); });
var mqsat = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', { var mqsat = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
maxZoom : 18, maxZoom : 18,
subdomains : [ '1', '2', '3', '4' ], subdomains : [ '1', '2', '3', '4' ],
attribution : 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>.' attribution : 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>.'
}); });
var icaoGermany = new L.TileLayer('https://secais.dfs.de/static-maps/ICAO500-2014-DACH-Reprojected/tiles/{z}/{x}/{y}.png', { var icaoGermany = new L.TileLayer('https://secais.dfs.de/static-maps/ICAO500-2014-DACH-Reprojected/tiles/{z}/{x}/{y}.png', {
maxZoom : 15, maxZoom : 15,
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>' attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>'
}); });
var lowerGermany = new L.TileLayer('https://secais.dfs.de/static-maps/lower_20131114/tiles/{z}/{x}/{y}.png', { var lowerGermany = new L.TileLayer('https://secais.dfs.de/static-maps/lower_20131114/tiles/{z}/{x}/{y}.png', {
maxZoom : 15, maxZoom : 15,
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>' attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>'
}); });
var navdbLayer = L.geoJson(null, { var MAP_ICON = {};
onEachFeature : function(feature, layer) { MAP_ICON["VOR"] = L.icon({
if (feature.properties) { iconSize : [ 30, 30 ],
var popupString = '<div class="popup">'; iconAnchor : [ 15, 15 ],
for ( var k in feature.properties) { popupAncor : [ 0, -17 ],
var v = feature.properties[k]; iconUrl : "images/vor.svg",
popupString += k + ': ' + v + '<br />'; });
} MAP_ICON["NDB"] = L.icon({
popupString += '</div>'; iconSize : [ 30, 30 ],
layer.bindPopup(popupString, { iconAnchor : [ 15, 15 ],
maxHeight : 200 popupAncor : [ 0, -17 ],
}); iconUrl : "images/ndb.svg",
} });
}
}); var navdbLayer = L.geoJson(null, {
onEachFeature : function(feature, layer) {
map.addLayer(navdbLayer); if (feature.properties) {
var popupString = '<div class="popup">';
var baseLayers = { for ( var k in feature.properties) {
"OpenStreetMaps" : osm, var v = feature.properties[k];
"MapQuest Satelite" : mqsat, popupString += k + ': ' + v + '<br />';
"MapQuest Roads" : mqroad, }
}; popupString += '</div>';
layer.bindPopup(popupString, {
var overlays = { maxHeight : 200
"NAVDB" : navdbLayer, });
// "ICAO (Germany)" : icaoGermany, if (feature.properties.type in MAP_ICON)
// "IFR Lower Airspace (Germany)" : lowerGermany, layer.setIcon(MAP_ICON[feature.properties.type]);
}; }
}
L.control.layers(baseLayers, overlays).addTo(map); });
var aircraftMarker = Object.create(L.marker([ 53.5, 10.0 ])); map.addLayer(navdbLayer);
aircraftMarker.addTo(map);
aircraftMarker.setState = function(s) { var baseLayers = {
var latlng = new L.LatLng(s.lat, s.lon); "OpenStreetMaps" : osm,
aircraftMarker.setLatLng(latlng); "MapQuest Satelite" : mqsat,
var label = "<p id='aircraft-label'> heading:" + s.heading + "&deg; GS: " + s.speed + "kt</p>"; "MapQuest Roads" : mqroad,
aircraftMarker.bindPopup(label); };
};
var overlays = {
function UpdateNavdbLayer() { "NAVDB" : navdbLayer,
//TODO: don't query navdb on small movements and if navdb layer is invisible // "ICAO (Germany)" : icaoGermany,
// "IFR Lower Airspace (Germany)" : lowerGermany,
var bounds = map.getBounds(); };
var radius = bounds.getSouthWest().distanceTo(bounds.getNorthEast()) / 3704; // radius in NM
L.control.layers(baseLayers, overlays).addTo(map);
if (radius > 250)
radius = 250; var aircraftMarker = Object.create(L.marker([ 53.5, 10.0 ]));
if (radius < 10) aircraftMarker.addTo(map);
radius = 10; aircraftMarker.setState = function(s) {
var latlng = new L.LatLng(s.lat, s.lon);
var center = map.getCenter(); aircraftMarker.setLatLng(latlng);
var lat = center.lat; var label = "<p id='aircraft-label'> heading:" + s.heading + "&deg; GS: " + s.speed + "kt</p>";
var lon = center.lng; aircraftMarker.bindPopup(label);
};
var url = "/navdb?q=findWithinRange&type=vor,ils,ndb&range=" + radius + "&lat=" + lat + "&lon=" + lon;
console.log(url); function UpdateNavdbLayer() {
var jqxhr = $.get(url).done(function(data) { //TODO: don't query navdb on small movements and if navdb layer is invisible
navdbLayer.clearLayers();
navdbLayer.addData(data); var bounds = map.getBounds();
}).fail(function() { var radius = bounds.getSouthWest().distanceTo(bounds.getNorthEast()) / 3704; // radius in NM
alert('failed to load navdb data');
}).always(function() { if (radius > 250)
}); radius = 250;
}; if (radius < 10)
radius = 10;
map.on('resize', function(e) {
UpdateNavdbLayer(); var center = map.getCenter();
}); var lat = center.lat;
var lon = center.lng;
map.on('zoomend', function(e) {
UpdateNavdbLayer(); 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) {
map.on('moveend', function(e) { navdbLayer.clearLayers();
UpdateNavdbLayer(); navdbLayer.addData(data);
}); }).fail(function() {
alert('failed to load navdb data');
$(document).ready(function() { }).always(function() {
});
var aircraftState = { };
lat : 53.5,
lon : 10.0, map.on('resize', function(e) {
heading : 0, UpdateNavdbLayer();
speed : 0 });
};
map.on('zoomend', function(e) {
UpdateNavdbLayer(); UpdateNavdbLayer();
});
setInterval(function() {
var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon); map.on('moveend', function(e) {
console.log("moving to " + aircraftState.lat + "/" + aircraftState.lon); UpdateNavdbLayer();
map.setView(latlng); });
aircraftMarker.setState(aircraftState);
}, 1000); $(document).ready(function() {
PropertyChangeListener(function() { var aircraftState = {
SetListener("/position/latitude-deg", function(n) { lat : 53.5,
aircraftState.lat = n.value; lon : 10.0,
}); heading : 0,
SetListener("/position/longitude-deg", function(n) { speed : 0
aircraftState.lon = n.value; };
});
SetListener("/orientation/heading-deg", function(n) { UpdateNavdbLayer();
aircraftState.heading = Math.round(n.value);
}); setInterval(function() {
SetListener("/velocities/groundspeed-kt", function(n) { var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon);
aircraftState.speed = Math.round(n.value); console.log("moving to " + aircraftState.lat + "/" + aircraftState.lon);
}); map.setView(latlng);
}); aircraftMarker.setState(aircraftState);
}); }, 1000);
/* ]]> */
</script> PropertyChangeListener(function() {
</body> SetListener("/position/latitude-deg", function(n) {
</html> aircraftState.lat = n.value;
});
SetListener("/position/longitude-deg", function(n) {
aircraftState.lon = n.value;
});
SetListener("/orientation/heading-deg", function(n) {
aircraftState.heading = Math.round(n.value);
});
SetListener("/velocities/groundspeed-kt", function(n) {
aircraftState.speed = Math.round(n.value);
});
});
});
/* ]]> */
</script>
</body>
</html>