Bing maps aerial layer

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';
+
 })();

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) */

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>

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

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);
+    }
+});