Disable overlay layers at minZoom and add tooltips

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 2bb4c5c1b44f008cba6f3d115c6c20c8e652af35..2d28c256cac10042927dfcdcb6f6c889bfd86ad5 100644 (file)
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -120,8 +120,13 @@ L.OSM.layers = function(options) {
       var list = $('<ul>')
         .appendTo(overlaySection);
 
       var list = $('<ul>')
         .appendTo(overlaySection);
 

-      function addOverlay(layer, name) {
+      function addOverlay(layer, name, minZoom) {
+        var refName = name.split(' ').join('_').toLowerCase();

         var item = $('<li>')
         var item = $('<li>')

+          .attr('class', refName)
+          .tooltip({
+            placement: 'top'
+          })

           .appendTo(list);
 
         var label = $('<label>')
           .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('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);
     }
 
     options.sidebar.addPane($ui);

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index caf9a8bfb6ca3cee6b7b9c14f78d4735ffdaf049..6120101a94e1ba1c175c6dad93cfd30b488a57d3 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -764,6 +764,7 @@ nav.secondary {
       font-size: 13px;
       margin-bottom: 8px;
     }
       font-size: 13px;
       margin-bottom: 8px;
     }

+    li.disabled { color: #999; }

   }
 }
 
   }
 }