Add legend to map

public/js/grijalva_functions.js

@@ -24,13 +24,15 @@ let timeParse,
     glmap,
     osmLayer, cartoLightLayer, cartoDarkLayer,
     timeLayer,
-    layerControl;
+    layerControl,
+    scale;
 
 // define empty objects and indicators
 let maxIndicators = {},
     minIndicators = {},
     indicators = ["area", "perimeter", "costa", "df"],
-    indicatorsNames = ["Área", "Perímetro", "Desarrollo de la línea de costa", "Dimensión fractal"];
+    indicatorsNames = ["Área", "Perímetro", "Desarrollo de la línea de costa", "Dimensión fractal"],
+    indicatorsUnits = ["m\u00B2", "m", "", ""];
 
 let cols = [];
 indicators.forEach( (indicator) => {
@@ -359,7 +361,8 @@ const updateMap = (mapData) => {
         let option = $("#indicatorSelect").val(), // option selected from dropdrown
             min = values.minIndicators,
             max = values.maxIndicators;
-        styleTiles(option, min, max);
+        styleTiles(option, min, max)
+            .then(legend.addTo(map)); // add legend control -> it updates
 
         //TODO: update charts
     });
@@ -422,7 +425,8 @@ const populateMap = (mapData) => {
 
         // style currentTiles
         let option = $("#indicatorSelect").val(); // option selected from dropdrown
-        styleTiles(option, minIndicators, maxIndicators);
+        styleTiles(option, minIndicators, maxIndicators)
+            .then(legend.addTo(map)); // add legend control -> it updates
 
         let baseLayers = {
             "Carto Dark": cartoDarkLayer,
@@ -596,8 +600,8 @@ L.timeDimension.layer.Tile = (layer, options) => {
 $("#indicatorSelect").on("change", function() {
     // style currentTiles
     let option = this.value; // option selected from dropdrown
-    styleTiles(option, minIndicators, maxIndicators);
-    //    .then(legend.addTo(map)); // add legend control -> it updates
+    styleTiles(option, minIndicators, maxIndicators)
+        .then(legend.addTo(map)); // add legend control -> it updates
     // FIXME: re-adding control updates its contents... why?
     // Highlight plot title according to selected option
     //indicators.forEach( indicator => {
@@ -609,7 +613,7 @@ const styleTiles = (option, minIndicators, maxIndicators) => {
     // define color scale domain based on min-max values for selected indicator
     let domain = [minIndicators[option], maxIndicators[option]];
     //console.log(domain)
-    let scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5);
+    scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5);
     Object.keys(currentTiles).forEach(layer => {
         let color = [
             'interpolate',
@@ -623,5 +627,27 @@ const styleTiles = (option, minIndicators, maxIndicators) => {
     return Promise.resolve(scale);
 }
 
-// TODO: add layer control
+let legend = L.control({
+    position: "bottomright"
+});
+
+legend.onAdd = () => {
+    let div = L.DomUtil.create("div", "info legend leaflet-bar");
+    let option = $("#indicatorSelect").val();
+    let optionIndex = indicators.indexOf(option);
+    let legendText = indicatorsUnits[optionIndex] == "" ? indicatorsNames[optionIndex] :
+        indicatorsNames[optionIndex] + " (" + indicatorsUnits[optionIndex] + ")";
+    var html = "<h6>" + legendText + "</h6><ul>";
+    let classes = scale.classes();
+    classes.forEach( (c, idx, array) => {
+        if (idx != array.length - 1) {
+            html += "<li><i style=\"background:" + scale(c).hex() + "\"></i> " +
+            " " + d3.format(",.4~s")(classes[idx]) + " - " + d3.format(",.4~s")(classes[idx+1]) + "</li>";
+        }
+    });
+    html += "</ul>";
+    div.innerHTML = html;
+    return div;
+};
+
 // TODO: add charts
\ No newline at end of file