Disable map key on non-default layers

app/assets/javascripts/index.js

@@ -48,7 +48,12 @@ $(document).ready(function () {
     })
   ];
 
-  layers[0].addTo(map);
+  for (var i = layers.length - 1; i >= 0; i--) {
+    if (i === 0 || params.layers.indexOf(layers[i].options.code) >= 0) {
+      map.addLayer(layers[i]);
+      break;
+    }
+  }
 
   map.noteLayer = new L.LayerGroup();
   map.noteLayer.options = {code: 'N'};
@@ -116,21 +121,6 @@ $(document).ready(function () {
     }).addTo(map);
   }
 
-  if (params.layers) {
-    var foundLayer = false;
-    for (var i = 0; i < layers.length; i++) {
-      if (params.layers.indexOf(layers[i].options.code) >= 0) {
-        map.addLayer(layers[i]);
-        foundLayer = true;
-      } else {
-        map.removeLayer(layers[i]);
-      }
-    }
-    if (!foundLayer) {
-      map.addLayer(layers[0]);
-    }
-  }
-
   if (params.marker) {
     L.marker([params.mlat, params.mlon], {icon: getUserIcon()}).addTo(map.markerLayer);
   }

app/assets/javascripts/leaflet.key.js

@@ -39,6 +39,10 @@ L.OSM.key = function (options) {
       .on('show', shown)
       .on('hide', hidden);
 
+    map.on('baselayerchange', updateButton);
+
+    updateButton();
+
     function shown() {
       map.on('zoomend baselayerchange', update);
       $section.load('/key', update);
@@ -51,8 +55,15 @@ L.OSM.key = function (options) {
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
+      if (!button.hasClass('disabled')) {
         options.sidebar.togglePane($ui, button);
       }
+    }
+
+    function updateButton() {
+      var layer = map.getMapBaseLayerId();
+      button.toggleClass('disabled', layer !== 'mapnik');
+    }
 
     function update() {
       var layer = map.getMapBaseLayerId(),

app/assets/stylesheets/common.css.scss

@@ -537,6 +537,24 @@ a.donate {
   border-radius: 4px 0 0 4px;
   margin-bottom: 10px;
   outline: none;
+
+  &:hover {
+    background-color: black;
+  }
+
+  &.active {
+    background-color: #9ed485;
+  }
+
+  &.disabled {
+    background-color: #333;
+    background-color: rgba(0,0,0,.5);
+    cursor: default;
+  }
+
+  .icon {
+    margin: 10px;
+  }
 }
 
 .leaflet-control .zoomin,
@@ -557,18 +575,6 @@ a.donate {
   border-radius: 0 0 0 4px;
 }
 
-.leaflet-control .control-button:hover {
-  background-color: black;
-}
-
-.leaflet-control .control-button.active {
-  background-color: #9ed485;
-}
-
-.leaflet-control .control-button .icon {
-  margin: 10px;
-}
-
 /* Rules for the home page */
 
 .site-export #map,