From c3b07eb576add6e2a6402fe11e00920f261d1596 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Fri, 20 Mar 2015 12:38:31 +0100
Subject: [PATCH] Bing maps aerial layer

---
 config.js         |  5 +++++
 css/style.css     |  5 +++++
 index.html        |  2 ++
 js/index.js       | 15 ++++++++++++++-
 js/plugin/Bing.js | 34 ++++++++++++++++++++++++++++++++++
 5 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 js/plugin/Bing.js

diff --git a/config.js b/config.js
index 13849f9..cf0fc10 100644
--- a/config.js
+++ b/config.js
@@ -50,4 +50,9 @@
         //BR.conf.profilesUrl = 'file://YOUR_PATH_TO/profiles2/';
     }
 
+    // COPYING: Please get your own Bing maps key at http://www.microsoft.com/maps/default.aspx
+    //BR.conf.bingKeyUrl = 'bingkey.txt';
+    // External URL for key retrieval, does not work locally on desktop
+    BR.conf.bingKeyUrl = 'http://norbertrenner.de/key/bing.php';
+
 })();
diff --git a/css/style.css b/css/style.css
index 0b7f8d1..ef7d392 100644
--- a/css/style.css
+++ b/css/style.css
@@ -115,6 +115,11 @@ td {
     width: 386px;
 }
 
+/* margin left sidebar + Bing logo (Bing layer) */
+.leaflet-control-attribution {
+    margin-left: 480px !important;
+}
+
 /* Profile Control */
 
 /* flexbox layout: maximize textarea and data table (nested container/box path) */
diff --git a/index.html b/index.html
index 0c17862..75f8b42 100644
--- a/index.html
+++ b/index.html
@@ -85,6 +85,7 @@
     <script src="bower_components/leaflet-search/dist/leaflet-search.min.js"></script>
     <script src="bower_components/leaflet-plugins/control/Permalink.js"></script>
     <script src="bower_components/leaflet-plugins/control/Permalink.Layer.js"></script>
+    <script src="bower_components/leaflet-plugins/layer/tile/Bing.js"></script>
 
     <script src="bower_components/leaflet-routing/src/utils/LineUtil.Snapping.js"></script>
     <script src="bower_components/leaflet-routing/src/utils/Marker.Snapping.js"></script>
@@ -115,6 +116,7 @@
     <script src="js/plugin/NogoAreas.js"></script>
     <script src="js/plugin/Elevation.js"></script>
     <script src="js/plugin/Search.js"></script>
+    <script src="js/plugin/Bing.js"></script>
     <script src="js/plugin/Permalink.Routing.js"></script>
     <script src="js/control/TrackStats.js"></script>
     <script src="js/control/Download.js"></script>
diff --git a/js/index.js b/js/index.js
index 791ed46..9787bdd 100644
--- a/js/index.js
+++ b/js/index.js
@@ -53,6 +53,18 @@
                   + '(<a target="_blank" href="http://creativecommons.org/licenses/by-sa/3.0/de/deed.en">CC-BY-SA 3.0 DE</a>)'
         });
 
+        // COPYING: Please get your own Bing maps key at http://www.microsoft.com/maps/default.aspx
+        var bing = new BR.BingLayer();
+        BR.Util.get(BR.conf.bingKeyUrl, function (err, key) {
+            if (err) {
+                layersControl.removeLayer(bing);
+                return;
+            }
+
+            bing._key = key;
+            bing.loadMetadata();
+        });
+
         map = new L.Map('map', {
             layers: [osm], 
             center: new L.LatLng(50.99, 9.86), 
@@ -69,7 +81,8 @@
             'OpenStreetMap.de': osmde,
             'OpenTopoMap': topo,
             'OpenCycleMap (Thunderf.)': cycle,
-            'Outdoors (Thunderforest)': outdoors
+            'Outdoors (Thunderforest)': outdoors,
+            'Bing Aerial': bing
         }, {
              'Cycling (Waymarked Trails)': cycling,
              'Hiking (Waymarked Trails)': hiking
diff --git a/js/plugin/Bing.js b/js/plugin/Bing.js
new file mode 100644
index 0000000..69eaee5
--- /dev/null
+++ b/js/plugin/Bing.js
@@ -0,0 +1,34 @@
+BR.BingLayer = L.BingLayer.extend({
+    options: {
+        maxZoom: 19,
+        attribution: '<a target="_blank" href="http://www.bing.com/maps/">Bing Maps</a>'
+            + ' (<a target="_blank" href="http://go.microsoft.com/?linkid=9710837">TOU</a>)'
+    },
+
+    initialize: function(key, options) {
+        // override super to disable loadMetadata until async key load (called explicitly then)
+        L.Util.setOptions(this, options);
+
+        this._key = key;
+        this._url = null;
+        this.meta = {};
+        //this.loadMetadata();
+
+        this._logo = L.control({position: 'bottomleft'});
+        this._logo.onAdd = function (map) {
+            this._div = L.DomUtil.create('div', 'bing-logo');
+            this._div.innerHTML = '<img src="http://www.microsoft.com/maps/images/branding/Bing%20logo%20white_50px-19px.png">';
+            return this._div;
+        };
+    },
+
+    onAdd: function(map) {
+        L.BingLayer.prototype.onAdd.call(this, map);
+        map.addControl(this._logo);
+    },
+
+    onRemove: function(map) {
+        L.BingLayer.prototype.onRemove.call(this, map);
+        map.removeControl(this._logo);
+    }
+});