browser-map: add symbols for vor and ndb
This commit is contained in:
Torsten Dreyer
parent
cf05294b84
commit
c628771b4b
3 changed files with 294 additions and 181 deletions
91
webgui/map/images/ndb.svg
Normal file
91
webgui/map/images/ndb.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
6
webgui/map/images/vor.svg
Normal file
6
webgui/map/images/vor.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 335 B |
|
|
@ -1,181 +1,197 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-1.11.0.js"
|
||||
type="text/javascript"></script>
|
||||
<link rel="stylesheet"
|
||||
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="../lib/props.js" type="text/javascript"></script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="FlightGear - Map" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html,body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid green;
|
||||
}
|
||||
</style>
|
||||
<div id='map'></div>
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var map = new L.Map('map', {
|
||||
center : [ 53.7, 10.0 ],
|
||||
zoom : 10
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
var mqroad = new L.TileLayer(
|
||||
'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
|
||||
{
|
||||
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.'
|
||||
});
|
||||
|
||||
var mqsat = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
|
||||
maxZoom : 18,
|
||||
subdomains : [ '1', '2', '3', '4' ],
|
||||
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', {
|
||||
maxZoom : 15,
|
||||
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', {
|
||||
maxZoom : 15,
|
||||
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>'
|
||||
});
|
||||
|
||||
var navdbLayer = L.geoJson(null, {
|
||||
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() {
|
||||
|
||||
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() {
|
||||
SetListener("/position/latitude-deg", function(n) {
|
||||
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>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-1.11.0.js"
|
||||
type="text/javascript"></script>
|
||||
<link rel="stylesheet"
|
||||
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="../lib/props.js" type="text/javascript"></script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="FlightGear - Map" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html,body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid green;
|
||||
}
|
||||
</style>
|
||||
<div id='map'></div>
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var map = new L.Map('map', {
|
||||
center : [ 53.7, 10.0 ],
|
||||
zoom : 10
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
var mqroad = new L.TileLayer(
|
||||
'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
|
||||
{
|
||||
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.'
|
||||
});
|
||||
|
||||
var mqsat = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
|
||||
maxZoom : 18,
|
||||
subdomains : [ '1', '2', '3', '4' ],
|
||||
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', {
|
||||
maxZoom : 15,
|
||||
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', {
|
||||
maxZoom : 15,
|
||||
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>'
|
||||
});
|
||||
|
||||
var MAP_ICON = {};
|
||||
MAP_ICON["VOR"] = L.icon({
|
||||
iconSize : [ 30, 30 ],
|
||||
iconAnchor : [ 15, 15 ],
|
||||
popupAncor : [ 0, -17 ],
|
||||
iconUrl : "images/vor.svg",
|
||||
});
|
||||
MAP_ICON["NDB"] = L.icon({
|
||||
iconSize : [ 30, 30 ],
|
||||
iconAnchor : [ 15, 15 ],
|
||||
popupAncor : [ 0, -17 ],
|
||||
iconUrl : "images/ndb.svg",
|
||||
});
|
||||
|
||||
var navdbLayer = L.geoJson(null, {
|
||||
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
|
||||
});
|
||||
if (feature.properties.type in MAP_ICON)
|
||||
layer.setIcon(MAP_ICON[feature.properties.type]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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() {
|
||||
|
||||
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() {
|
||||
SetListener("/position/latitude-deg", function(n) {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue