148639fb50
Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
232 lines
6.7 KiB
HTML
232 lines
6.7 KiB
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 owmPrecipitation = new L.TileLayer("http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png", {
|
|
maxZoom : 14,
|
|
minZoom : 0,
|
|
subdomains : '12',
|
|
format : 'image/png',
|
|
transparent : true,
|
|
opacity : 0.5
|
|
});
|
|
|
|
var owmPressure = new L.TileLayer("http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png", {
|
|
maxZoom : 7,
|
|
minZoom : 0,
|
|
subdomains : '12',
|
|
format : 'image/png',
|
|
transparent : true,
|
|
opacity : 0.5
|
|
});
|
|
|
|
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]);
|
|
}
|
|
},
|
|
style: function(feature) {
|
|
if( feature.properties.type == "ILS" || feature.properties.type == "localizer" ) {
|
|
return {
|
|
color: 'black',
|
|
weight: 1,
|
|
};
|
|
}
|
|
}
|
|
});
|
|
|
|
map.addLayer(navdbLayer);
|
|
|
|
var baseLayers = {
|
|
"OpenStreetMaps" : osm,
|
|
"MapQuest Satelite" : mqsat,
|
|
"MapQuest Roads" : mqroad,
|
|
};
|
|
|
|
var overlays = {
|
|
"NAVDB" : navdbLayer,
|
|
//(Germany)" : icaoGermany,
|
|
//(Germany)" : lowerGermany,
|
|
"Precipitation" : owmPrecipitation,
|
|
"Isobares" : owmPressure,
|
|
};
|
|
|
|
L.control.layers(baseLayers, overlays).addTo(map);
|
|
L.control.scale().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 filter = "vor,dme,ndb,airport";
|
|
if (radius < 60)
|
|
filter += ",ils,loc,om";
|
|
if (radius < 20)
|
|
filter += ",mm";
|
|
|
|
var center = map.getCenter();
|
|
var lat = center.lat;
|
|
var lon = center.lng;
|
|
|
|
var url = "/navdb?q=findWithinRange&type=" + filter + "&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>
|