diff --git a/webgui/map/images/aircraft.svg b/webgui/map/images/aircraft.svg
new file mode 100644
index 000000000..bd138cf1c
--- /dev/null
+++ b/webgui/map/images/aircraft.svg
@@ -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>
diff --git a/webgui/map/images/airport.svg b/webgui/map/images/airport-paved.svg
similarity index 100%
rename from webgui/map/images/airport.svg
rename to webgui/map/images/airport-paved.svg
diff --git a/webgui/map/images/airport-unknown.svg b/webgui/map/images/airport-unknown.svg
new file mode 100644
index 000000000..d120b1427
--- /dev/null
+++ b/webgui/map/images/airport-unknown.svg
@@ -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> 
diff --git a/webgui/map/images/airport-unpaved.svg b/webgui/map/images/airport-unpaved.svg
new file mode 100644
index 000000000..144bd9579
--- /dev/null
+++ b/webgui/map/images/airport-unpaved.svg
@@ -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> 
diff --git a/webgui/map/index.html b/webgui/map/index.html
index 81ed8e503..075e101eb 100644
--- a/webgui/map/index.html
+++ b/webgui/map/index.html
@@ -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 + "&deg; 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);
