2014-03-20 09:43:08 +00:00
|
|
|
<!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" />
|
2014-03-24 13:29:25 +00:00
|
|
|
<meta name="viewport"
|
|
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
2014-03-20 09:43:08 +00:00
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<style>
|
2014-03-23 20:28:17 +00:00
|
|
|
html,body,#map {
|
2014-03-20 09:43:08 +00:00
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#map {
|
|
|
|
height: 100%;
|
|
|
|
}
|
2014-03-23 20:28:17 +00:00
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
.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;
|
|
|
|
}
|
2014-03-24 15:41:54 +00:00
|
|
|
|
|
|
|
.followAircraft {
|
|
|
|
background: white;
|
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
|
|
|
border-radius: 5px;
|
|
|
|
width: 40px;
|
|
|
|
height: 40px;
|
|
|
|
}
|
2014-03-20 09:43:08 +00:00
|
|
|
</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>'
|
|
|
|
});
|
|
|
|
|
2014-03-21 12:02:50 +00:00
|
|
|
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
|
|
|
|
});
|
|
|
|
|
2014-03-20 09:43:08 +00:00
|
|
|
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",
|
|
|
|
});
|
2014-03-23 20:28:17 +00:00
|
|
|
MAP_ICON["dme"] = L.icon({
|
|
|
|
iconSize : [ 30, 30 ],
|
|
|
|
iconAnchor : [ 15, 15 ],
|
|
|
|
popupAncor : [ 0, -17 ],
|
|
|
|
iconUrl : "images/dme.svg",
|
|
|
|
});
|
|
|
|
MAP_ICON["airport-paved"] = L.icon({
|
|
|
|
iconSize : [ 30, 30 ],
|
|
|
|
iconAnchor : [ 15, 15 ],
|
|
|
|
popupAncor : [ 0, -17 ],
|
|
|
|
iconUrl : "images/airport-paved.svg",
|
|
|
|
});
|
|
|
|
MAP_ICON["airport-unpaved"] = L.icon({
|
|
|
|
iconSize : [ 30, 30 ],
|
|
|
|
iconAnchor : [ 15, 15 ],
|
|
|
|
popupAncor : [ 0, -17 ],
|
|
|
|
iconUrl : "images/airport-unpaved.svg",
|
|
|
|
});
|
|
|
|
MAP_ICON["airport-unknown"] = L.icon({
|
|
|
|
iconSize : [ 30, 30 ],
|
|
|
|
iconAnchor : [ 15, 15 ],
|
|
|
|
popupAncor : [ 0, -17 ],
|
|
|
|
iconUrl : "images/airport-unknown.svg",
|
|
|
|
});
|
2014-03-24 13:29:25 +00:00
|
|
|
MAP_ICON["arp"] = L.icon({
|
|
|
|
iconSize : [ 30, 30 ],
|
|
|
|
iconAnchor : [ 15, 15 ],
|
|
|
|
popupAncor : [ 0, -17 ],
|
|
|
|
iconUrl : "images/arp.svg",
|
|
|
|
});
|
|
|
|
L.RotatedMarker = L.Marker.extend({
|
|
|
|
options : {
|
|
|
|
angle : 0
|
|
|
|
},
|
2014-03-23 20:28:17 +00:00
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
_setPos : function(pos) {
|
2014-03-23 20:28:17 +00:00
|
|
|
L.Marker.prototype._setPos.call(this, pos);
|
2014-03-24 13:29:25 +00:00
|
|
|
|
2014-03-23 20:28:17 +00:00
|
|
|
if (L.DomUtil.TRANSFORM) {
|
2014-03-24 13:29:25 +00:00
|
|
|
// use the CSS transform rule if available
|
|
|
|
this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
|
|
|
|
} else if (L.Browser.ie) {
|
|
|
|
// fallback for IE6, IE7, IE8
|
|
|
|
var rad = this.options.angle * (Math.PI / 180), costheta = Math.cos(rad), sintheta = Math.sin(rad);
|
|
|
|
this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' + costheta
|
|
|
|
+ ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
|
2014-03-23 20:28:17 +00:00
|
|
|
}
|
2014-03-24 13:29:25 +00:00
|
|
|
}
|
|
|
|
});
|
2014-03-20 09:43:08 +00:00
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
var navdbLayer = new L.geoJson(null, {
|
|
|
|
pointToLayer : function(feature, latlng) {
|
2014-03-23 20:28:17 +00:00
|
|
|
var options = {
|
2014-03-24 13:29:25 +00:00
|
|
|
title : feature.id + ' (' + feature.properties.name + ')',
|
|
|
|
alt : feature.id,
|
|
|
|
riseOnHover : true,
|
2014-03-23 20:28:17 +00:00
|
|
|
};
|
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
if (feature.properties.type == "airport") {
|
2014-03-23 20:28:17 +00:00
|
|
|
options.angle = feature.properties.longestRwyHeading_deg;
|
2014-03-24 13:29:25 +00:00
|
|
|
switch (feature.properties.longestRwySurface) {
|
2014-03-23 20:28:17 +00:00
|
|
|
case 'asphalt':
|
|
|
|
case 'concrete':
|
|
|
|
options.icon = MAP_ICON['airport-paved'];
|
|
|
|
break;
|
|
|
|
case 'unknown':
|
|
|
|
options.icon = MAP_ICON['airport-unknown'];
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
options.icon = MAP_ICON['airport-unpaved'];
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (feature.properties.type in MAP_ICON) {
|
|
|
|
options.icon = MAP_ICON[feature.properties.type];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
return new L.RotatedMarker(latlng, options);
|
2014-03-23 20:28:17 +00:00
|
|
|
},
|
|
|
|
|
2014-03-20 09:43:08 +00:00
|
|
|
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
|
|
|
|
});
|
|
|
|
}
|
2014-03-21 12:02:50 +00:00
|
|
|
},
|
2014-03-23 20:28:17 +00:00
|
|
|
|
2014-03-24 20:57:38 +00:00
|
|
|
filter : function(feature, layer) {
|
|
|
|
var zoom = map.getZoom();
|
|
|
|
switch( feature.properties.type ) {
|
|
|
|
case 'airport':
|
|
|
|
if( zoom >= 10 ) return true;
|
|
|
|
return feature.properties.longestRwyLength_m >= 2000;
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'NDB':
|
|
|
|
if( zoom >= 10 ) return true;
|
|
|
|
if( zoom >= 8 ) return feature.properties.range_nm >= 30;
|
|
|
|
return feature.properties.range_nm > 50;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
style : function(feature) {
|
|
|
|
if (feature.properties.type == "ILS" || feature.properties.type == "localizer") {
|
2014-03-21 12:02:50 +00:00
|
|
|
return {
|
2014-03-24 13:29:25 +00:00
|
|
|
color : 'black',
|
|
|
|
weight : 1,
|
2014-03-21 12:02:50 +00:00
|
|
|
};
|
|
|
|
}
|
2014-03-24 13:29:25 +00:00
|
|
|
if (feature.properties.type == "airport") {
|
2014-03-23 22:16:11 +00:00
|
|
|
return {
|
2014-03-24 13:29:25 +00:00
|
|
|
color : 'black',
|
|
|
|
weight : 3,
|
|
|
|
fill : 'true',
|
|
|
|
fillColor : '#606060',
|
|
|
|
fillOpacity : 1.0,
|
|
|
|
lineJoin : 'bevel',
|
2014-03-23 22:16:11 +00:00
|
|
|
};
|
|
|
|
}
|
2014-03-24 13:29:25 +00:00
|
|
|
},
|
|
|
|
|
2014-03-20 09:43:08 +00:00
|
|
|
});
|
2014-03-24 13:29:25 +00:00
|
|
|
navdbLayer.dirty = true;
|
|
|
|
navdbLayer.update = function() {
|
|
|
|
if (navdbLayer.dirty) {
|
|
|
|
navdbLayer.dirty = false;
|
|
|
|
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;
|
|
|
|
|
2014-03-24 20:57:38 +00:00
|
|
|
var filter = "vor,ndb,airport";
|
2014-03-24 13:29:25 +00:00
|
|
|
if (radius < 60)
|
2014-03-24 20:57:38 +00:00
|
|
|
filter += ",ils,dme,loc,om";
|
2014-03-24 13:29:25 +00:00
|
|
|
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() {
|
|
|
|
});
|
|
|
|
}
|
|
|
|
setTimeout(function() { navdbLayer.update() }, 5000);
|
|
|
|
};
|
2014-03-20 09:43:08 +00:00
|
|
|
|
|
|
|
map.addLayer(navdbLayer);
|
|
|
|
|
|
|
|
var baseLayers = {
|
|
|
|
"OpenStreetMaps" : osm,
|
|
|
|
"MapQuest Satelite" : mqsat,
|
|
|
|
"MapQuest Roads" : mqroad,
|
|
|
|
};
|
|
|
|
|
|
|
|
var overlays = {
|
|
|
|
"NAVDB" : navdbLayer,
|
2014-03-24 20:57:38 +00:00
|
|
|
"ICAO VFR (Germany)" : icaoGermany,
|
|
|
|
"Lower Airspace (Germany)" : lowerGermany,
|
2014-03-21 12:02:50 +00:00
|
|
|
"Precipitation" : owmPrecipitation,
|
|
|
|
"Isobares" : owmPressure,
|
2014-03-20 09:43:08 +00:00
|
|
|
};
|
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
var aircraftMarker = new L.RotatedMarker(map.getCenter(), {
|
|
|
|
angle : 45,
|
|
|
|
icon : L.icon({
|
2014-03-23 20:28:17 +00:00
|
|
|
iconSize : [ 60, 60 ],
|
|
|
|
iconAnchor : [ 30, 30 ],
|
|
|
|
popupAncor : [ 0, -32 ],
|
|
|
|
iconUrl : "images/aircraft.svg",
|
2014-03-24 22:24:53 +00:00
|
|
|
}),
|
|
|
|
zIndexOffset: 10000,
|
2014-03-23 20:28:17 +00:00
|
|
|
});
|
2014-03-20 09:43:08 +00:00
|
|
|
aircraftMarker.addTo(map);
|
|
|
|
aircraftMarker.setState = function(s) {
|
|
|
|
var latlng = new L.LatLng(s.lat, s.lon);
|
2014-03-23 20:28:17 +00:00
|
|
|
aircraftMarker.options.angle = s.heading;
|
2014-03-20 09:43:08 +00:00
|
|
|
aircraftMarker.setLatLng(latlng);
|
|
|
|
var label = "<p id='aircraft-label'> heading:" + s.heading + "° GS: " + s.speed + "kt</p>";
|
|
|
|
aircraftMarker.bindPopup(label);
|
2014-03-24 13:29:25 +00:00
|
|
|
info.update(s);
|
2014-03-20 09:43:08 +00:00
|
|
|
};
|
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
var info = L.control();
|
|
|
|
info.onAdd = function(map) {
|
|
|
|
this._div = L.DomUtil.create('div', 'infobox');
|
|
|
|
this.update();
|
|
|
|
return this._div;
|
2014-03-20 09:43:08 +00:00
|
|
|
};
|
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
info.update = function(props) {
|
|
|
|
var s = '<h4>Flight Path</h4>';
|
|
|
|
if (props) {
|
|
|
|
s += '<p>';
|
|
|
|
s += 'MH:' + props.heading + '°<br />';
|
|
|
|
s += 'GS: ' + props.speed + 'kt<br />';
|
|
|
|
s += 'ALT: ' + props.alt + 'ft';
|
|
|
|
s += '</p>';
|
|
|
|
}
|
|
|
|
|
|
|
|
this._div.innerHTML = s;
|
|
|
|
};
|
|
|
|
|
2014-03-24 15:41:54 +00:00
|
|
|
var FollowAircraftControl = L.control();
|
|
|
|
FollowAircraftControl.onAdd = function(map) {
|
|
|
|
this._div = L.DomUtil.create('div', 'followAircraft');
|
|
|
|
this._div.innerHTML = '<img src="images/followAircraft.svg" title="Center Map on Aircraft Position" />';
|
|
|
|
this._div.onclick = function() { toggleFollowAircraft(); return true; };
|
|
|
|
return this._div;
|
|
|
|
}
|
|
|
|
|
2014-03-24 20:57:38 +00:00
|
|
|
L.control.scale().addTo(map);
|
|
|
|
info.addTo(map);
|
2014-03-24 15:41:54 +00:00
|
|
|
FollowAircraftControl.addTo(map);
|
2014-03-24 20:57:38 +00:00
|
|
|
L.control.layers(baseLayers, overlays).addTo(map);
|
2014-03-24 13:29:25 +00:00
|
|
|
|
2014-03-20 09:43:08 +00:00
|
|
|
map.on('resize', function(e) {
|
2014-03-24 13:29:25 +00:00
|
|
|
navdbLayer.dirty = true;
|
2014-03-20 09:43:08 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
map.on('zoomend', function(e) {
|
2014-03-24 13:29:25 +00:00
|
|
|
navdbLayer.dirty = true;
|
2014-03-20 09:43:08 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
map.on('moveend', function(e) {
|
2014-03-24 13:29:25 +00:00
|
|
|
navdbLayer.dirty = true;
|
2014-03-20 09:43:08 +00:00
|
|
|
});
|
2014-03-24 15:41:54 +00:00
|
|
|
|
|
|
|
map.on('dragstart', function(e) {
|
|
|
|
followAircraft = false;
|
|
|
|
});
|
|
|
|
|
|
|
|
var followAircraft = true;
|
|
|
|
function toggleFollowAircraft() {
|
|
|
|
followAircraft = !followAircraft;
|
|
|
|
}
|
|
|
|
|
2014-03-20 09:43:08 +00:00
|
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
|
|
var aircraftState = {
|
|
|
|
lat : 53.5,
|
|
|
|
lon : 10.0,
|
|
|
|
heading : 0,
|
2014-03-24 13:29:25 +00:00
|
|
|
speed : 0,
|
|
|
|
alt : 0,
|
2014-03-20 09:43:08 +00:00
|
|
|
};
|
|
|
|
|
2014-03-24 13:29:25 +00:00
|
|
|
navdbLayer.update();
|
2014-03-20 09:43:08 +00:00
|
|
|
|
|
|
|
setInterval(function() {
|
|
|
|
var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon);
|
2014-03-24 15:41:54 +00:00
|
|
|
if( followAircraft )
|
|
|
|
map.setView(latlng);
|
2014-03-20 09:43:08 +00:00
|
|
|
aircraftMarker.setState(aircraftState);
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
PropertyChangeListener(function() {
|
2014-03-24 13:29:25 +00:00
|
|
|
SetListener("/position/altitude-ft", function(n) {
|
|
|
|
aircraftState.alt = Math.round(n.value);
|
|
|
|
});
|
2014-03-20 09:43:08 +00:00
|
|
|
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>
|