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
This commit is contained in:
Torsten Dreyer
parent
436b1e6a9c
commit
c9d86b815a
5 changed files with 107 additions and 10 deletions
4
webgui/map/images/aircraft.svg
Normal file
4
webgui/map/images/aircraft.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 428 B |
|
Before Width: | Height: | Size: 224 B After Width: | Height: | Size: 224 B |
4
webgui/map/images/airport-unknown.svg
Normal file
4
webgui/map/images/airport-unknown.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 165 B |
5
webgui/map/images/airport-unpaved.svg
Normal file
5
webgui/map/images/airport-unpaved.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 226 B |
|
|
@ -9,21 +9,20 @@
|
|||
<script src="../lib/props.js" type="text/javascript"></script>
|
||||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
<body>
|
||||
<style>
|
||||
html,body {
|
||||
html,body,#map {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id='map'></div>
|
||||
<script type="text/javascript">
|
||||
|
|
@ -94,8 +93,84 @@ html,body {
|
|||
popupAncor : [ 0, -17 ],
|
||||
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, {
|
||||
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) {
|
||||
if (feature.properties) {
|
||||
var popupString = '<div class="popup">';
|
||||
|
|
@ -107,10 +182,9 @@ html,body {
|
|||
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 {
|
||||
|
|
@ -131,8 +205,8 @@ html,body {
|
|||
|
||||
var overlays = {
|
||||
"NAVDB" : navdbLayer,
|
||||
//(Germany)" : icaoGermany,
|
||||
//(Germany)" : lowerGermany,
|
||||
//"ICAO VFR (Germany)" : icaoGermany,
|
||||
//"Lower Airspace (Germany)" : lowerGermany,
|
||||
"Precipitation" : owmPrecipitation,
|
||||
"Isobares" : owmPressure,
|
||||
};
|
||||
|
|
@ -140,10 +214,19 @@ html,body {
|
|||
L.control.layers(baseLayers, overlays).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.setState = function(s) {
|
||||
var latlng = new L.LatLng(s.lat, s.lon);
|
||||
aircraftMarker.options.angle = s.heading;
|
||||
aircraftMarker.setLatLng(latlng);
|
||||
var label = "<p id='aircraft-label'> heading:" + s.heading + "° GS: " + s.speed + "kt</p>";
|
||||
aircraftMarker.bindPopup(label);
|
||||
|
|
@ -175,6 +258,8 @@ html,body {
|
|||
var jqxhr = $.get(url).done(function(data) {
|
||||
navdbLayer.clearLayers();
|
||||
navdbLayer.addData(data);
|
||||
var foo = $(".airport");
|
||||
var bar = "";
|
||||
}).fail(function() {
|
||||
alert('failed to load navdb data');
|
||||
}).always(function() {
|
||||
|
|
@ -206,7 +291,6 @@ html,body {
|
|||
|
||||
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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue