Disable overlay layers at minZoom and add tooltips
authorAaron Lidman <aaronlidman@gmail.com>
Thu, 14 Nov 2013 01:30:07 +0000 (17:30 -0800)
committerAaron Lidman <aaronlidman@gmail.com>
Thu, 14 Nov 2013 01:30:15 +0000 (17:30 -0800)
app/assets/javascripts/leaflet.layers.js
app/assets/stylesheets/common.css.scss

index 2bb4c5c1b44f008cba6f3d115c6c20c8e652af35..2d28c256cac10042927dfcdcb6f6c889bfd86ad5 100644 (file)
@@ -120,8 +120,13 @@ L.OSM.layers = function(options) {
       var list = $('<ul>')
         .appendTo(overlaySection);
 
-      function addOverlay(layer, name) {
+      function addOverlay(layer, name, minZoom) {
+        var refName = name.split(' ').join('_').toLowerCase();
         var item = $('<li>')
+          .attr('class', refName)
+          .tooltip({
+            placement: 'top'
+          })
           .appendTo(list);
 
         var label = $('<label>')
@@ -146,10 +151,18 @@ L.OSM.layers = function(options) {
         map.on('layeradd layerremove', function() {
           input.prop('checked', map.hasLayer(layer));
         });
+
+        map.on('zoomend', function() {
+          var disabled = map.getZoom() < minZoom + 1;
+          $(input).prop('disabled', disabled);
+          disabled ? $(item).attr('class', 'disabled') : $(item).attr('class', '');
+          item.attr('data-original-title', disabled ?
+            'Zoom in to see ' + name.toLowerCase() : '');
+        });
       }
 
-      addOverlay(map.noteLayer, I18n.t('javascripts.map.layers.notes'));
-      addOverlay(map.dataLayer, I18n.t('javascripts.map.layers.data'));
+      addOverlay(map.noteLayer, I18n.t('javascripts.map.layers.notes'), 10);
+      addOverlay(map.dataLayer, I18n.t('javascripts.map.layers.data'), 15);
     }
 
     options.sidebar.addPane($ui);
index caf9a8bfb6ca3cee6b7b9c14f78d4735ffdaf049..6120101a94e1ba1c175c6dad93cfd30b488a57d3 100644 (file)
@@ -764,6 +764,7 @@ nav.secondary {
       font-size: 13px;
       margin-bottom: 8px;
     }
+    li.disabled { color: #999; }
   }
 }