fly/fgdata
1
0
Fork 0
Code Activity

more browsermap improvements

Browse source 
- 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
This commit is contained in:
Torsten Dreyer 2014-03-23 21:28:17 +01:00
parent 436b1e6a9c
commit c9d86b815a
5 changed files with 107 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webgui/map/images/aircraft.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="500" width="500">
<path d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z" fill="deeppink" stroke="black" stroke-width="5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 428 B

0
webgui/map/images/airport.svg → webgui/map/images/airport-paved.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 224 B

After

Width:  |  Height:  |  Size: 224 B

4
webgui/map/images/airport-unknown.svg Normal file
View file

@ -0,0 +1,4 @@
<?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="49" fill="mediumblue" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 165 B

5
webgui/map/images/airport-unpaved.svg Normal file
View file

@ -0,0 +1,5 @@
<?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="49" fill="mediumblue" />
<rect x="40" y="20" width="20" height="60" fill="#228822" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 226 B

104
webgui/map/index.html
View file

@ -9,21 +9,20 @@
<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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head> </head>
<body> <body>
<style> <style>
html,body { html,body,#map {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#map { #map {
width: 100%;
height: 100%; height: 100%;
border: 1px solid green;
} }
</style> </style>
<div id='map'></div> <div id='map'></div>
<script type="text/javascript"> <script type="text/javascript">
@ -94,8 +93,84 @@ html,body {
popupAncor : [ 0, -17 ], popupAncor : [ 0, -17 ],
iconUrl : "images/ndb.svg", iconUrl : "images/ndb.svg",
}); });
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 + ')';
}
}
});
var navdbLayer = L.geoJson(null, { var navdbLayer = L.geoJson(null, {
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 );
},
onEachFeature : function(feature, layer) { onEachFeature : function(feature, layer) {
if (feature.properties) { if (feature.properties) {
var popupString = '<div class="popup">'; var popupString = '<div class="popup">';
@ -107,10 +182,9 @@ html,body {
layer.bindPopup(popupString, { layer.bindPopup(popupString, {
maxHeight : 200 maxHeight : 200
}); });
if (feature.properties.type in MAP_ICON)
layer.setIcon(MAP_ICON[feature.properties.type]);
} }
}, },
style: function(feature) { style: function(feature) {
if( feature.properties.type == "ILS" || feature.properties.type == "localizer" ) { if( feature.properties.type == "ILS" || feature.properties.type == "localizer" ) {
return { return {
@ -131,8 +205,8 @@ html,body {
var overlays = { var overlays = {
"NAVDB" : navdbLayer, "NAVDB" : navdbLayer,
//(Germany)" : icaoGermany, //"ICAO VFR (Germany)" : icaoGermany,
//(Germany)" : lowerGermany, //"Lower Airspace (Germany)" : lowerGermany,
"Precipitation" : owmPrecipitation, "Precipitation" : owmPrecipitation,
"Isobares" : owmPressure, "Isobares" : owmPressure,
}; };
@ -140,10 +214,19 @@ html,body {
L.control.layers(baseLayers, overlays).addTo(map); L.control.layers(baseLayers, overlays).addTo(map);
L.control.scale().addTo(map); L.control.scale().addTo(map);
var aircraftMarker = Object.create(L.marker([ 53.5, 10.0 ])); 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",
})
});
aircraftMarker.addTo(map); aircraftMarker.addTo(map);
aircraftMarker.setState = function(s) { aircraftMarker.setState = function(s) {
var latlng = new L.LatLng(s.lat, s.lon); var latlng = new L.LatLng(s.lat, s.lon);
aircraftMarker.options.angle = s.heading;
aircraftMarker.setLatLng(latlng); aircraftMarker.setLatLng(latlng);
var label = "<p id='aircraft-label'> heading:" + s.heading + "&deg; GS: " + s.speed + "kt</p>"; var label = "<p id='aircraft-label'> heading:" + s.heading + "&deg; GS: " + s.speed + "kt</p>";
aircraftMarker.bindPopup(label); aircraftMarker.bindPopup(label);
@ -175,6 +258,8 @@ html,body {
var jqxhr = $.get(url).done(function(data) { var jqxhr = $.get(url).done(function(data) {
navdbLayer.clearLayers(); navdbLayer.clearLayers();
navdbLayer.addData(data); navdbLayer.addData(data);
var foo = $(".airport");
var bar = "";
}).fail(function() { }).fail(function() {
alert('failed to load navdb data'); alert('failed to load navdb data');
}).always(function() { }).always(function() {
@ -206,7 +291,6 @@ html,body {
setInterval(function() { setInterval(function() {
var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon); var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon);
console.log("moving to " + aircraftState.lat + "/" + aircraftState.lon);
map.setView(latlng); map.setView(latlng);
aircraftMarker.setState(aircraftState); aircraftMarker.setState(aircraftState);
}, 1000); }, 1000);