browser map: continue map overhaul

- re-add the navdb layer
and this time add the improved icon svgs

webgui/map/Marker.js

@@ -20,17 +20,21 @@ L.RotatedMarker = L.Marker.extend({
 
   initialize: function(latlng,options) {
     L.Marker.prototype.initialize(latlng,options);
+    if( options )
+      L.Util.setOptions(this,options);
   },
 
 });
 
-L.rotatedMarker = function(pos) {
-  return new L.RotatedMarker(pos);
+L.rotatedMarker = function(pos,options) {
+  return new L.RotatedMarker(pos,options);
 }
 
 L.AircraftMarker = L.RotatedMarker.extend({
   options : {
     angle : 0,
+    clickable: false,
+    keyboard: false,
     getProperties:function() {
       return {};
     },
@@ -52,6 +56,8 @@ L.AircraftMarker = L.RotatedMarker.extend({
   onAdd: function( map ) {
     L.RotatedMarker.prototype.onAdd.call(this,map);
     this.popup = L.popup( {
+      autoPan: false,
+      keepInView: false,
       closeButton: false,
       className:   'aircraft-marker-popup',
       closeOnClick: false,
@@ -84,6 +90,8 @@ L.AircraftMarker = L.RotatedMarker.extend({
     this.popup.setContent(popup);
 
     this.options.angle = props.heading;
+//    this.options.title = props.callsign + ' Heading ' + props.heading + '°';
+//    this.options.alt = this.options.title;
     this.setLatLng( props.position );
     var that = this;
     this.timeoutid = setTimeout( function() { that.timeout(); }, this.options.updateInterval );

webgui/map/NavdbLayer.js

@@ -0,0 +1,201 @@
+    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",
+    });
+    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",
+    });
+    MAP_ICON["arp"] = L.icon({
+      iconSize : [ 30, 30 ],
+      iconAnchor : [ 15, 15 ],
+      popupAncor : [ 0, -17 ],
+      iconUrl : "images/arp.svg",
+    });
+    MAP_ICON["aircraft"] = L.icon({
+      iconSize : [ 20, 20 ],
+      iconAnchor : [ 10, 10 ],
+      popupAncor : [ 0, -12 ],
+      iconUrl : "images/aircraft.svg",
+    });
+
+L.NavdbLayer = L.GeoJSON.extend({
+  options: {
+    pointToLayer : function(feature, latlng) {
+      var options = {
+        title : feature.properties.id + ' (' + feature.properties.name + ')',
+        alt : feature.properties.id,
+        riseOnHover : true,
+      };
+
+      if (feature.properties.type == "airport") {
+        if( map.getZoom() >= 13 ) {
+              options.icon = MAP_ICON['arp'];
+        } else {
+          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 L.rotatedMarker(latlng, options);
+    },
+
+/*
+    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
+        });
+      }
+    },
+*/
+
+    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;
+    },
+
+    style : function(feature) {
+      if (feature.properties.type == "ILS" || feature.properties.type == "localizer") {
+        return {
+          color : 'black',
+          weight : 1,
+        };
+      }
+      if (feature.properties.type == "airport") {
+        return {
+          color : 'black',
+          weight : 3,
+          fill : 'true',
+          fillColor : '#606060',
+          fillOpacity : 1.0,
+          lineJoin : 'bevel',
+        };
+      }
+    },
+  },
+
+  onAdd: function( map ) {
+    L.GeoJSON.prototype.onAdd.call(this,map);
+    this.dirty = true;
+    this.update();
+  },
+
+  onRemove: function( map ) {
+    L.GeoJSON.prototype.onRemove.call(this,map);
+    if( this.timeoutid != null )
+      clearTimeout( this.timeoutid );
+  },
+
+
+  invalidate: function() {
+    this.dirty = true;
+  },
+
+  dirty: true,
+  timeoutid: null,
+  update: function() {
+    if (this.dirty) {
+      this.dirty = false;
+      var bounds = this._map.getBounds();
+      var radius = bounds.getSouthWest().distanceTo(bounds.getNorthEast()) / 3704; // radius in NM
+
+      if (radius > 250)
+        radius = 250;
+      if (radius < 10)
+        radius = 10;
+
+      var filter = "vor,ndb,airport";
+      if (radius < 60)
+        filter += ",ils,dme,loc,om";
+      if (radius < 20)
+        filter += ",mm";
+
+      var center = this._map.getCenter();
+      var lat = center.lat;
+      var lon = center.lng;
+
+      var url = "/navdb?q=findWithinRange&type=" + filter + "&range=" + radius + "&lat=" + lat + "&lon=" + lon;
+
+      var that = this;
+      var jqxhr = $.get(url).done(function(data) {
+        that.clearLayers();
+        that.addData(data);
+      }).fail(function() {
+        alert('failed to load navdb data');
+      }).always(function() {
+      });
+    }
+    var that = this;
+    timeoutid = setTimeout(function() { that.update() }, 5000);
+  },
+
+});
+
+L.navdbLayer = function(options) {
+  return new L.NavdbLayer(null,options);
+}

webgui/map/images/aircraft.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="500" width="500">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
 <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>

webgui/map/images/airport-paved.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
 <circle cx="50" cy="50" r="49" fill="mediumblue" />
 <rect x="40" y="20" width="20" height="60" fill="white" />
 </svg> 

webgui/map/images/airport-unknown.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
 <circle cx="50" cy="50" r="49" fill="mediumblue" />
 </svg> 

webgui/map/images/airport-unpaved.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
 <circle cx="50" cy="50" r="49" fill="mediumblue" />
 <rect x="40" y="20" width="20" height="60" fill="#228822" />
 </svg> 

webgui/map/images/dme.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
 <rect x="1" y="1" width="98" height="98" fill="none" stroke="mediumblue" stroke-width="3" />
 </svg> 

webgui/map/images/followAircraft.svg

@@ -1,8 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns="http://www.w3.org/2000/svg"
-   width="100%"
-   height="100%"
-   viewBox="0 0 512 512">
-     <path d="m 256.00225,133.67887 c 4.11893,0 7.55419,3.43151 7.55419,7.77922 v 45.76843 l 64.06982,35.92658 v 16.01707 l -64.06982,-18.53388 v 33.40788 l 15.10276,11.21221 v 13.2715 l -22.65957,-7.55568 -22.65283,7.55044 v -13.273 l 15.10426,-11.21222 v -33.40788 l -64.07732,18.53726 v -16.01708 l 64.07732,-35.92658 v -45.76843 c 0,-4.34771 3.42589,-7.77922 7.54819,-7.77922 z M 256,50 C 162.939,50 87.5,125.44 87.5,218.5 87.5,313 169.43,375.333 256,462 342.57,375.333 424.5,313 424.5,218.5 424.5,125.44 349.061,50 256,50 z m 0,286.958 c -68.275,0 -123.624,-55.349 -123.624,-123.624 0,-68.276 55.349,-123.624 123.624,-123.624 68.277,0 123.625,55.348 123.625,123.624 0,68.275 -55.348,123.624 -123.625,123.624 z" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.87207282" />
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512" preserveAspectRatio="xMinYMin meet">
+<path d="m 256.00225,133.67887 c 4.11893,0 7.55419,3.43151 7.55419,7.77922 v 45.76843 l 64.06982,35.92658 v 16.01707 l -64.06982,-18.53388 v 33.40788 l 15.10276,11.21221 v 13.2715 l -22.65957,-7.55568 -22.65283,7.55044 v -13.273 l 15.10426,-11.21222 v -33.40788 l -64.07732,18.53726 v -16.01708 l 64.07732,-35.92658 v -45.76843 c 0,-4.34771 3.42589,-7.77922 7.54819,-7.77922 z M 256,50 C 162.939,50 87.5,125.44 87.5,218.5 87.5,313 169.43,375.333 256,462 342.57,375.333 424.5,313 424.5,218.5 424.5,125.44 349.061,50 256,50 z m 0,286.958 c -68.275,0 -123.624,-55.349 -123.624,-123.624 0,-68.276 55.349,-123.624 123.624,-123.624 68.277,0 123.625,55.348 123.625,123.624 0,68.275 -55.348,123.624 -123.625,123.624 z" style="fill:#000000;stroke:#000000;stroke-width:1.87207282" />
 </svg>

webgui/map/images/ndb.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
 <circle cx="50" cy="50" r="7" stroke="mediumblue" stroke-width="6" fill="white" fill-opacity="0" />
 
 <circle cx="50.0" cy="65.0" r="3" fill="mediumblue"/>

webgui/map/images/vor.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
 <path fill="none" stroke="mediumblue" stroke-width="3" d="M25,1 L75,1 L99,25 L99,75 L75,99 L25,99 L1,75 L 1,25 z" />
 <circle cx="50" cy="50" r="7" fill="mediumblue"/>
 </svg> 

webgui/map/index-2.0.html

@@ -19,6 +19,7 @@
 <script src="../lib/fgfs.js" type="text/javascript"></script>
 <script src="FollowControl.js" type="text/javascript"></script>
 <script src="Marker.js" type="text/javascript"></script>
+<script src="NavdbLayer.js" type="text/javascript"></script>
 
 <title>FlightGear - Map</title>
 </head>
@@ -91,7 +92,7 @@ html,body {
     var propertyMirror = new FGFS.PropertyMirror([
       [ "latitude",    "/position/latitude-deg" ],
       [ "longitude",   "/position/longitude-deg" ],
-      [ "altitude",    "/position/altitude-deg" ],
+      [ "altitude",    "/position/altitude-ft" ],
       [ "heading",     "/orientation/heading-deg" ],
       [ "groundspeed", "/velocities/groundspeed-kt" ],
       [ "model",       "/sim/model/path" ],
@@ -114,6 +115,20 @@ html,body {
       attributionControl: true,
     });
 
+    var navdbLayer = L.navdbLayer();
+    map.on('resize', function(e) {
+      navdbLayer.invalidate();
+    });
+
+    map.on('zoomend', function(e) {
+      navdbLayer.invalidate();
+    });
+
+    map.on('moveend', function(e) {
+      navdbLayer.invalidate();
+    });
+
+
     L.control.layers({
       "OpenStreetMaps" : osmLayer,
       "MapQuest Satelite" : new L.TileLayer(
@@ -176,6 +191,8 @@ html,body {
           bounds: L.latLngBounds(L.latLng(46.0,5.0), L.latLng(55.1,16.5) ),
         }),
 
+      "NavDB" : navdbLayer,
+
       "Precipitation" : new L.TileLayer(
         'http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png', 
         {