fly/fgdata
1
0
Fork 0
Code Activity
fgdata/webgui/map/index.html

327 lines
9.6 KiB
HTML
Raw Normal View History

browser-map: add symbols for vor and ndb
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" />
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
</head>
<body>
<style>
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
html,body,#map {
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
browser-map: add symbols for vor and ndb
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>'
});
browser-map: add layers, draw ils/loc Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
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
});
browser-map: add symbols for vor and ndb
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",
});
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
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",
});
L.RotatedMarker = L.Marker.extend({
options: {
angle: 0
},
_setPos: function (pos) {
L.Marker.prototype._setPos.call(this, pos);
if (L.DomUtil.TRANSFORM) {
// 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 + ')';
}
}
});
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
var navdbLayer = L.geoJson(null, {
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
pointToLayer: function( feature, latlng ) {
var options = {
title: feature.id + ' (' + feature.properties.name + ')',
alt: feature.id,
riseOnHover: true,
};
if( feature.properties.type == "airport" ) {
options.angle = feature.properties.longestRwyHeading_deg;
switch( feature.properties.longestRwySurface ) {
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];
}
}
return new L.RotatedMarker(latlng, options );
},
browser-map: add symbols for vor and ndb
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
});
}
browser-map: add layers, draw ils/loc Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
2014-03-21 12:02:50 +00:00
},
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
browser-map: add layers, draw ils/loc Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
2014-03-21 12:02:50 +00:00
style: function(feature) {
if( feature.properties.type == "ILS" || feature.properties.type == "localizer" ) {
return {
color: 'black',
weight: 1,
};
}
browsermap: less ugly runway rendering
2014-03-23 22:16:11 +00:00
if( feature.properties.type == "airport" ) {
return {
color: 'black',
weight: 3,
fill: 'true',
fillColor: '#606060',
fillOpacity: 1.0,
lineJoin: 'bevel',
};
}
browser-map: add symbols for vor and ndb
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,
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
//"ICAO VFR (Germany)" : icaoGermany,
//"Lower Airspace (Germany)" : lowerGermany,
browser-map: add layers, draw ils/loc Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
2014-03-21 12:02:50 +00:00
"Precipitation" : owmPrecipitation,
"Isobares" : owmPressure,
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
};
L.control.layers(baseLayers, overlays).addTo(map);
browser-map: add layers, draw ils/loc Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
2014-03-21 12:02:50 +00:00
L.control.scale().addTo(map);
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
var aircraftMarker = new L.RotatedMarker([ 53.5, 10.0 ], {
angle: 45,
icon: L.icon({
iconSize : [ 60, 60 ],
iconAnchor : [ 30, 30 ],
popupAncor : [ 0, -32 ],
iconUrl : "images/aircraft.svg",
})
});
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
aircraftMarker.addTo(map);
aircraftMarker.setState = function(s) {
var latlng = new L.LatLng(s.lat, s.lon);
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
aircraftMarker.options.angle = s.heading;
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
aircraftMarker.setLatLng(latlng);
var label = "<p id='aircraft-label'> heading:" + s.heading + "&deg; 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;
browser-map: add layers, draw ils/loc Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
2014-03-21 12:02:50 +00:00
var filter = "vor,dme,ndb,airport";
if (radius < 60)
filter += ",ils,loc,om";
if (radius < 20)
filter += ",mm";
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
var center = map.getCenter();
var lat = center.lat;
var lon = center.lng;
browser-map: add layers, draw ils/loc Added precipitation and pressure layers from openweathermap Draw ils and loc from geojson multilinestring feature some tweaking with database requests details based on zoom
2014-03-21 12:02:50 +00:00
var url = "/navdb?q=findWithinRange&type=" + filter + "&range=" + radius + "&lat=" + lat + "&lon=" + lon;
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
console.log(url);
var jqxhr = $.get(url).done(function(data) {
navdbLayer.clearLayers();
navdbLayer.addData(data);
more browsermap improvements - new aircraft symbol - rotate aircraft symbol to indicated heading - new airport symbols depicting runway surface - rotate aircraft symbol to indicate runway heading - draw runway layout
2014-03-23 20:28:17 +00:00
var foo = $(".airport");
var bar = "";
browser-map: add symbols for vor and ndb
2014-03-20 09:43:08 +00:00
}).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);
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>
Copy permalink