From c628771b4b988b7242ee00f2bbfd4f6924558197 Mon Sep 17 00:00:00 2001
From: Torsten Dreyer <torsten@t3r.de>
Date: Thu, 20 Mar 2014 10:43:08 +0100
Subject: [PATCH] browser-map: add symbols for vor and ndb

---
 webgui/map/images/ndb.svg |  91 +++++++++
 webgui/map/images/vor.svg |   6 +
 webgui/map/index.html     | 378 ++++++++++++++++++++------------------
 3 files changed, 294 insertions(+), 181 deletions(-)
 create mode 100644 webgui/map/images/ndb.svg
 create mode 100644 webgui/map/images/vor.svg

diff --git a/webgui/map/images/ndb.svg b/webgui/map/images/ndb.svg
new file mode 100644
index 000000000..5efa319b4
--- /dev/null
+++ b/webgui/map/images/ndb.svg
@@ -0,0 +1,91 @@
+<?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="7" stroke="black" stroke-width="6" fill="white" fill-opacity="0" />
+
+<circle cx="50.0" cy="65.0" r="3" fill="black"/>
+<circle cx="57.5" cy="63.0" r="3" fill="black"/>
+<circle cx="63.0" cy="57.5" r="3" fill="black"/>
+<circle cx="65.0" cy="50.0" r="3" fill="black"/>
+<circle cx="63.0" cy="42.5" r="3" fill="black"/>
+<circle cx="57.5" cy="37.0" r="3" fill="black"/>
+<circle cx="50.0" cy="35.0" r="3" fill="black"/>
+<circle cx="42.5" cy="37.0" r="3" fill="black"/>
+<circle cx="37.0" cy="42.5" r="3" fill="black"/>
+<circle cx="35.0" cy="50.0" r="3" fill="black"/>
+<circle cx="37.0" cy="57.5" r="3" fill="black"/>
+<circle cx="42.5" cy="63.0" r="3" fill="black"/>
+
+<circle cx="50.00" cy="75.00" r="3" fill="black"/>
+<circle cx="59.03" cy="73.31" r="3" fill="black"/>
+<circle cx="66.84" cy="68.48" r="3" fill="black"/>
+<circle cx="72.38" cy="61.14" r="3" fill="black"/>
+<circle cx="74.89" cy="52.31" r="3" fill="black"/>
+<circle cx="74.05" cy="43.16" r="3" fill="black"/>
+<circle cx="69.95" cy="34.93" r="3" fill="black"/>
+<circle cx="63.16" cy="28.74" r="3" fill="black"/>
+<circle cx="54.59" cy="25.43" r="3" fill="black"/>
+<circle cx="45.41" cy="25.43" r="3" fill="black"/>
+<circle cx="36.84" cy="28.74" r="3" fill="black"/>
+<circle cx="30.05" cy="34.93" r="3" fill="black"/>
+<circle cx="25.95" cy="43.16" r="3" fill="black"/>
+<circle cx="25.11" cy="52.31" r="3" fill="black"/>
+<circle cx="27.62" cy="61.14" r="3" fill="black"/>
+<circle cx="33.16" cy="68.48" r="3" fill="black"/>
+<circle cx="40.97" cy="73.31" r="3" fill="black"/>
+
+<circle cx="50.00" cy="85.00" r="3" fill="black"/>
+<circle cx="59.44" cy="83.70" r="3" fill="black"/>
+<circle cx="68.19" cy="79.90" r="3" fill="black"/>
+<circle cx="75.58" cy="73.89" r="3" fill="black"/>
+<circle cx="81.08" cy="66.10" r="3" fill="black"/>
+<circle cx="84.27" cy="57.12" r="3" fill="black"/>
+<circle cx="84.92" cy="47.61" r="3" fill="black"/>
+<circle cx="82.98" cy="38.28" r="3" fill="black"/>
+<circle cx="78.59" cy="29.82" r="3" fill="black"/>
+<circle cx="72.09" cy="22.85" r="3" fill="black"/>
+<circle cx="63.94" cy="17.90" r="3" fill="black"/>
+<circle cx="54.77" cy="15.33" r="3" fill="black"/>
+<circle cx="45.23" cy="15.33" r="3" fill="black"/>
+<circle cx="36.06" cy="17.90" r="3" fill="black"/>
+<circle cx="27.91" cy="22.85" r="3" fill="black"/>
+<circle cx="21.41" cy="29.82" r="3" fill="black"/>
+<circle cx="17.02" cy="38.28" r="3" fill="black"/>
+<circle cx="15.08" cy="47.61" r="3" fill="black"/>
+<circle cx="15.73" cy="57.12" r="3" fill="black"/>
+<circle cx="18.92" cy="66.10" r="3" fill="black"/>
+<circle cx="24.42" cy="73.89" r="3" fill="black"/>
+<circle cx="31.81" cy="79.90" r="3" fill="black"/>
+<circle cx="40.56" cy="83.70" r="3" fill="black"/>
+
+<circle cx="50.00" cy="95.00" r="3" fill="black"/>
+<circle cx="59.67" cy="93.95" r="3" fill="black"/>
+<circle cx="68.90" cy="90.84" r="3" fill="black"/>
+<circle cx="77.23" cy="85.82" r="3" fill="black"/>
+<circle cx="84.30" cy="79.13" r="3" fill="black"/>
+<circle cx="89.76" cy="71.08" r="3" fill="black"/>
+<circle cx="93.36" cy="62.04" r="3" fill="black"/>
+<circle cx="94.93" cy="52.44" r="3" fill="black"/>
+<circle cx="94.41" cy="42.72" r="3" fill="black"/>
+<circle cx="91.80" cy="33.34" r="3" fill="black"/>
+<circle cx="87.25" cy="24.75" r="3" fill="black"/>
+<circle cx="80.95" cy="17.33" r="3" fill="black"/>
+<circle cx="73.20" cy="11.44" r="3" fill="black"/>
+<circle cx="64.37" cy="7.36" r="3" fill="black"/>
+<circle cx="54.87" cy="5.26" r="3" fill="black"/>
+<circle cx="45.13" cy="5.26" r="3" fill="black"/>
+<circle cx="35.63" cy="7.36" r="3" fill="black"/>
+<circle cx="26.80" cy="11.44" r="3" fill="black"/>
+<circle cx="19.05" cy="17.33" r="3" fill="black"/>
+<circle cx="12.75" cy="24.75" r="3" fill="black"/>
+<circle cx="8.20" cy="33.34" r="3" fill="black"/>
+<circle cx="5.59" cy="42.72" r="3" fill="black"/>
+<circle cx="5.07" cy="52.44" r="3" fill="black"/>
+<circle cx="6.64" cy="62.04" r="3" fill="black"/>
+<circle cx="10.24" cy="71.08" r="3" fill="black"/>
+<circle cx="15.70" cy="79.13" r="3" fill="black"/>
+<circle cx="22.77" cy="85.82" r="3" fill="black"/>
+<circle cx="31.10" cy="90.84" r="3" fill="black"/>
+<circle cx="40.33" cy="93.95" r="3" fill="black"/>
+
+
+</svg>
diff --git a/webgui/map/images/vor.svg b/webgui/map/images/vor.svg
new file mode 100644
index 000000000..65120b8da
--- /dev/null
+++ b/webgui/map/images/vor.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="95" height="83">
+<!--path fill="none" stroke="#000" stroke-width="3" d="m1,1h93v80H1zm0,40 23-40h47l23,40-23,40h-47z"/-->
+<path fill="none" stroke="#000" stroke-width="3" d="m0,40 23-40h47l23,40-23,40h-47z"/>
+<circle cx="47" cy="41" r="7"/>
+</svg> 
diff --git a/webgui/map/index.html b/webgui/map/index.html
index 8b372e4b1..08e0e8ab5 100644
--- a/webgui/map/index.html
+++ b/webgui/map/index.html
@@ -1,181 +1,197 @@
-<!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="../lib/props.js" type="text/javascript"></script>
-<meta charset="UTF-8" />
-<meta name="description" content="FlightGear - Map" />
-
-</head>
-<body>
-	<style>
-html,body {
-	height: 100%;
-	margin: 0;
-	padding: 0;
-}
-
-#map {
-	width: 100%;
-	height: 100%;
-	border: 1px solid green;
-}
-</style>
-	<div id='map'></div>
-	<script type="text/javascript">
-    /* <![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 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.'
-        });
-
-    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) {
-          aircraftState.lat = n.value;
-        });
-        SetListener("/position/longitude-deg", function(n) {
-          aircraftState.lon = n.value;
-        });
-        SetListener("/orientation/heading-deg", function(n) {
-          aircraftState.heading = Math.round(n.value);
-        });
-        SetListener("/velocities/groundspeed-kt", function(n) {
-          aircraftState.speed = Math.round(n.value);
-        });
-      });
-    });
-    /* ]]> */
-  </script>
-</body>
-</html>
+<!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="../lib/props.js" type="text/javascript"></script>
+<meta charset="UTF-8" />
+<meta name="description" content="FlightGear - Map" />
+
+</head>
+<body>
+	<style>
+html,body {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+#map {
+	width: 100%;
+	height: 100%;
+	border: 1px solid green;
+}
+</style>
+	<div id='map'></div>
+	<script type="text/javascript">
+    /* <![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 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.'
+        });
+
+    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 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",
+    });
+
+    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
+          });
+          if (feature.properties.type in MAP_ICON)
+            layer.setIcon(MAP_ICON[feature.properties.type]);
+        }
+      }
+    });
+
+    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) {
+          aircraftState.lat = n.value;
+        });
+        SetListener("/position/longitude-deg", function(n) {
+          aircraftState.lon = n.value;
+        });
+        SetListener("/orientation/heading-deg", function(n) {
+          aircraftState.heading = Math.round(n.value);
+        });
+        SetListener("/velocities/groundspeed-kt", function(n) {
+          aircraftState.speed = Math.round(n.value);
+        });
+      });
+    });
+    /* ]]> */
+  </script>
+</body>
+</html>