From 71c4c85511009ec0892a61f6c39714de2e018ebd Mon Sep 17 00:00:00 2001
From: Torsten Dreyer <torsten@t3r.de>
Date: Wed, 19 Mar 2014 17:27:16 +0100
Subject: [PATCH] Enable the /navdb uri and use it in the browsermap

---
 httpd-settings.xml    |   1 +
 webgui/map/index.html | 171 ++++++++++++++++++++++++++++++++----------
 2 files changed, 134 insertions(+), 38 deletions(-)
diff --git a/httpd-settings.xml b/httpd-settings.xml
index 9c4fac57a..e58e828ec 100644
--- a/httpd-settings.xml
+++ b/httpd-settings.xml
@@ -8,6 +8,7 @@
 		<property>/props/</property>
 		<json>/json/</json>
 		<run>/run.cgi</run>
+		<navdb>/navdb</navdb>
 	</uri-handler>
 	<options>
 		<!-- for a complete description of options, see
diff --git a/webgui/map/index.html b/webgui/map/index.html
index 268b29975..8b372e4b1 100644
--- a/webgui/map/index.html
+++ b/webgui/map/index.html
@@ -1,11 +1,11 @@
 <!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="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script -->
-<!-- script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script-->
 <script src="../lib/props.js" type="text/javascript"></script>
 <meta charset="UTF-8" />
 <meta name="description" content="FlightGear - Map" />
@@ -26,61 +26,156 @@ html,body {
 }
 </style>
 	<div id='map'></div>
-	<script src="http://code.jquery.com/jquery-1.11.0.js"
-		type="text/javascript"></script>
 	<script type="text/javascript">
-    var map = new L.Map('map');
-
-    //        var googleLayer = new L.Google('ROADMAP');
-    //        map.addLayer(googleLayer);
-
-    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      minZoom : 6,
-      maxZoom : 15,
-      attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+    /* <![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 aircraft = L.marker([53.5, 10.0]).addTo(map);
-    var latlng = new L.LatLng(53.5,10);
-    map.setView(latlng, 10);
+    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.'
+        });
 
-    function centerMap( lat, lon ) {
-      if( null != lat ) this.latlng.lat = lat;
-      else if( null != lon ) this.latlng.lng = lon;
-    }
-    
-    var heading = 0;
-    var speed = 0;
-    function setSpeedVector( heading, speed ) {
-      if( null != heading ) this.heading = heading;
-      else if( null != speed ) this.speed = speed;
-    } 
-    
-    setInterval( function() {
-      this.map.setView(this.latlng);
-      this.aircraft.setLatLng( this.latlng );
-      var label = "<p id='aircraft-label'>" + this.heading + "@" + this.speed + "</p>";
-      this.aircraft.bindPopup( label );
-    }, 200 );
+    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>'
+    });
+
+    var navdbLayer = L.geoJson(null, {
+      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
+          });
+        }
+      }
+    });
+
+    map.addLayer(navdbLayer);
+
+    var baseLayers = {
+      "OpenStreetMaps" : osm,
+      "MapQuest Satelite" : mqsat,
+      "MapQuest Roads" : mqroad,
+    };
+
+    var overlays = {
+      "NAVDB" : navdbLayer,
+    //        "ICAO (Germany)" : icaoGermany,
+    //        "IFR Lower Airspace (Germany)" : lowerGermany,
+    };
+
+    L.control.layers(baseLayers, overlays).addTo(map);
+
+    var aircraftMarker = Object.create(L.marker([ 53.5, 10.0 ]));
+    aircraftMarker.addTo(map);
+    aircraftMarker.setState = function(s) {
+      var latlng = new L.LatLng(s.lat, s.lon);
+      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;
+
+      var center = map.getCenter();
+      var lat = center.lat;
+      var lon = center.lng;
+
+      var url = "/navdb?q=findWithinRange&type=vor,ils,ndb&range=" + radius + "&lat=" + lat + "&lon=" + lon;
+      console.log(url);
+      var jqxhr = $.get(url).done(function(data) {
+        navdbLayer.clearLayers();
+        navdbLayer.addData(data);
+      }).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);
+        console.log("moving to " + aircraftState.lat + "/" + aircraftState.lon);
+        map.setView(latlng);
+        aircraftMarker.setState(aircraftState);
+      }, 1000);
+
       PropertyChangeListener(function() {
         SetListener("/position/latitude-deg", function(n) {
-          centerMap( n.value, null );
+          aircraftState.lat = n.value;
         });
         SetListener("/position/longitude-deg", function(n) {
-          centerMap( null, n.value );
+          aircraftState.lon = n.value;
         });
         SetListener("/orientation/heading-deg", function(n) {
-          setSpeedVector( n.value, null );
+          aircraftState.heading = Math.round(n.value);
         });
         SetListener("/velocities/groundspeed-kt", function(n) {
-          setSpeedVector( null, n.value );
+          aircraftState.speed = Math.round(n.value);
         });
       });
     });
+    /* ]]> */
   </script>
 </body>
 </html>
