Show number of active layers on a badge

Gruntfile.js

@@ -6,6 +6,16 @@ module.exports = function(grunt) {
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
 
+        copy: {
+          dist: {
+            files: [
+              // copy badge stylesheet
+              {expand: true, src: ['src/css/badge.css'], dest: 'dist/css/', flatten: true, filter: 'isFile'}
+
+            ],
+          },
+        },
+
         watch: {
           files: ['<%= jshint.files %>'],
           tasks: ['jshint']  // test file can be added here
@@ -60,13 +70,15 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-qunit');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     */
 
     /* Default (development): Watch files and build on change. */
     grunt.loadNpmTasks("grunt-contrib-jasmine");
     grunt.registerTask("default", ["watch", "jasmine"]);
     grunt.registerTask("test", ["jshint", "jasmine"]);
     grunt.registerTask('build', [
+        'copy',
         'browserify:dist'
     ]);
 

README.md

@@ -241,3 +241,14 @@ We're going to try spinning this out into its own library; see: https://github.c
 	    hash: true,             // by default this is FALSE
          }).addTo(map);
 
+## Add badge to display number of active layers
+
+    // Link to stylesheet
+    <link rel="stylesheet" href="../dist/css/badge.css">
+
+    // To add the badge 
+    // map and leafletControl are variables containing the map and layers control instances
+    var badge = activeLayersBadge(map, leafletControl);
+
+    // The badge will be included when line is used
+    L.LayerGroup.EnvironmentalLayers().addTo(map, leafletControl);

example/index.html

@@ -39,6 +39,7 @@
 
 
   <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="../dist/css/badge.css">
 
   </head>
 

example/layers.js

@@ -233,5 +233,5 @@
     var leafletControl = new L.control.layers(baseMaps,overlayMaps);
     leafletControl.addTo(map);
 
-
-
+    // Display number of active overlay layers
+    var badge = activeLayersBadge(map, leafletControl);

example/styles.css

@@ -29,4 +29,4 @@ z-index: 10; }
   padding-bottom: 25px;
   margin-right: 65px;
   display: inline;
-}
+}

package.json

@@ -28,6 +28,7 @@
     "grunt": "^1.0.4",
     "grunt-browserify": "^5.0.0",
     "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-jasmine": "^1.1.0",
     "grunt-contrib-jshint": "^1.1.0",
     "grunt-contrib-uglify": "^2.2.0",

src/AllLayers.js

@@ -108,11 +108,14 @@ L.LayerGroup.environmentalLayers = L.LayerGroup.extend(
 
 	       }
 
-           L.control.layers(baseMaps,this.overlayMaps).addTo(map);
+		   var leafletControl = L.control.layers(baseMaps,this.overlayMaps);
+		   leafletControl.addTo(map);
 
 		   if(this.options.hash)
 		     var hash = new L.Hash(map, this.overlayMaps);
 
+			// Display number of active overlay layers
+			var badge = activeLayersBadge(map, leafletControl);       
         },
 
         onRemove: function (map) {},

src/activeLayersBadge.js

@@ -0,0 +1,40 @@
+activeLayersBadge = function(map, leafletControl) {
+    var touched = false;
+    var activeOverlays = leafletControl.getActiveOverlayNames();
+    var badge = L.control.badge(activeOverlays.length, { position: 'topright' }).addTo(map);
+
+    map.on('layeradd', function(ev) {
+        // Displays badge on page load
+        $(badge.getContainer()).css("display", "block");
+        if(touched) {
+            $(badge.getContainer()).css("display", "none");
+        }
+    }); 
+
+    map.on('overlayadd', function(ev) {
+        this.removeControl(badge);
+        $(badge.getContainer()).css("display", "none");
+        activeOverlays = leafletControl.getActiveOverlayNames();
+        badge = L.control.badge(activeOverlays.length, { position: 'topright' }).addTo(map);
+        $(badge.getContainer()).css("display", "none");
+    });
+
+    map.on('overlayremove', function(ev) {
+        this.removeControl(badge);
+        activeOverlays = leafletControl.getActiveOverlayNames();
+        badge = L.control.badge(activeOverlays.length, { position: 'topright' }).addTo(map);
+        $(badge.getContainer()).css("display", "none");
+    }); 
+
+    L.DomEvent.on(leafletControl.getContainer(), 'mouseover', function (ev) {
+        touched = true;
+        $(badge.getContainer()).css("display", "none");
+    });
+
+    L.DomEvent.on(leafletControl.getContainer(), 'mouseout', function (ev) {
+        touched = false;
+        $(badge.getContainer()).css("display", "block");
+    });
+
+    return badge;
+}

src/css/badge.css

@@ -0,0 +1,16 @@
+/*--- Badge styles ---*/
+.badge {
+    width: 30px;
+    height: 30px;
+    padding: 4px 2px 0;
+    border-radius: 50px;
+    border: 2px solid #908f8f;
+    background: white;
+    color: black;
+    font-weight: bold;
+    font-size: 1.4em;
+    margin-left: 80%;
+    position: absolute;
+    text-align: center;
+    top: 9px;   
+}

src/leafletEnvironmentalLayers.js

@@ -14,4 +14,5 @@ require('./pfasLayer.js');
 require('./indigenousLayers.js');
 //require('./PLpeopleLayer.js');
 require('./layercode.js')
+require('./activeLayersBadge');
 require('./eonetFiresLayer')

src/util/badgeControl.js

@@ -0,0 +1,25 @@
+L.Control.Badge = L.Control.extend({
+
+    initialize: function(content, options) {
+        this.content = content;
+        L.setOptions(this, options);
+    },
+
+	onAdd: function(map) {
+        var badgeElement = L.DomUtil.create('div');
+
+        badgeElement.classList.add('badge');
+        badgeElement.innerHTML = this.content;
+
+		return badgeElement;
+	},
+
+	onRemove: function(map) {
+		// Nothing to do here
+    }
+
+});
+
+L.control.badge = function(content, options) {
+	return new L.Control.Badge(content, options);
+}