From 65050e536795c060a4b49eefe0d24a6226768160 Mon Sep 17 00:00:00 2001
From: Torsten Dreyer <torsten@t3r.de>
Date: Mon, 17 Mar 2014 16:40:33 +0100
Subject: [PATCH] Add a simple OSM-based moving map

---
 webgui/map/index.html | 86 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 webgui/map/index.html
diff --git a/webgui/map/index.html b/webgui/map/index.html
new file mode 100644
index 000000000..268b29975
--- /dev/null
+++ b/webgui/map/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html>
+<head>
+<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" />
+
+</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 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'
+    });
+
+    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);
+
+    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 );
+
+    $(document).ready(function() {
+      PropertyChangeListener(function() {
+        SetListener("/position/latitude-deg", function(n) {
+          centerMap( n.value, null );
+        });
+        SetListener("/position/longitude-deg", function(n) {
+          centerMap( null, n.value );
+        });
+        SetListener("/orientation/heading-deg", function(n) {
+          setSpeedVector( n.value, null );
+        });
+        SetListener("/velocities/groundspeed-kt", function(n) {
+          setSpeedVector( null, n.value );
+        });
+      });
+    });
+  </script>
+</body>
+</html>
