Add legend and clean up code.

public/js/evolucion_urbana.js

@@ -5,8 +5,8 @@
  * August 2020
  */
 
-/* globals omnivore, Promise, chroma, makeBaseMap, makeIndicatorGraph, getData, getDataInSelection */
-/* exported indicators. userFiles, userDates, timeParse, layerControl, updateCharts, intervals */
+/* globals Promise */
+/* exported layerControl */
 
 let timeDimensionControl,
     map,
@@ -15,12 +15,11 @@ let timeDimensionControl,
     osmLayer, cartoLightLayer, cartoDarkLayer,
     timeLayer,
     layerControl,
-    tiles,
-    scale;
+    tiles;
 
 const getMinMax = table => {
     return new Promise(resolve => {
-        let table = "urbanization_year";
+        //let table = "urbanization_year";
         const baseUrl = new URL(`/data`, window.location.href).href;
         let minmaxQuery = `${baseUrl}/query/${table}?columns=${`min(yeartrimes), max(yeartrimes)`}`;
         d3.json(minmaxQuery).then(minmax => {
@@ -68,7 +67,6 @@ const setupMap = (dates) => {
             //timeDimensionControl: true,
             timeDimensionOptions: {
                 times: L.TimeDimension.Util.explodeTimeRange(times[0], times[1], "P3M")
-                //times: userDates,
                 //currentTime: dates.min
             },
             maxBounds: bounds
@@ -162,13 +160,6 @@ const populateMap = async(mapData) => {
         });
         timeLayer.addTo(map);
 
-        // FIX: comment out to avoid DB calls
-        // style currentTiles
-        /*let option = $("#indicatorSelect").val(); // option selected from dropdrown
-        styleTiles(option, minIndicators, maxIndicators)
-            .then(legend.addTo(map)); // add legend control -> it updates
-        */
-
         let baseLayers = {
             "Carto Dark": cartoDarkLayer,
             "Carto Light": cartoLightLayer,
@@ -187,6 +178,46 @@ const populateMap = async(mapData) => {
         let glmapChildren = map.getPanes().tilePane.children,
             children = Array.from(glmapChildren);
         children.forEach( c => c.style.zIndex = "inherit" );
+
+        let legend = L.control({
+            position: "bottomright"
+        });
+
+        let years = [],
+            colors = [];
+
+        legend.onAdd = () => {
+            let div = L.DomUtil.create("div", "info legend leaflet-bar");
+            // get layer style from mapbox map
+            let layerStyle = glmap.getMapboxMap().getStyle().layers[0];
+            if (layerStyle.id == "urbanization_year") {
+                let paint = layerStyle.paint;
+                let legendStuff = paint["fill-color"].slice(3);
+                legendStuff.forEach(entry => {
+                    if (typeof(entry) === "number") {
+                        years.push(entry);
+                    } else {
+                        colors.push(entry);
+                    }
+                });
+            }
+            //let html = `<div><h6>A&ntilde;o</h6></div><div class="colors", style="background: linear-gradient(to bottom, ${colors.join(",")})">`;
+            let html = "<div><h6>A&ntilde;o</h6></div><div class=\"colors\">";
+            // create legend items
+            years.forEach( y => {
+                html += `<div class="yearLegendItem">${y}</div>`;
+            });
+            html += "</div>";
+
+            div.innerHTML = html;
+
+            return div;
+        };
+
+        legend.addTo(map);
+        // once legend is added and divs exist, style background with color gradient
+        $(".colors").css({background: `linear-gradient(to bottom, ${colors.join(",")})`, width: "5px", marginRight: "35px"});
+        $(".yearLegendItem").css({paddingLeft: "10px"});
     });
 }
 
@@ -235,7 +266,6 @@ const setupTimeDimensionControl = () => {
             let d = new Date(date);
             let year = d.getFullYear().toString();
             let month = d.getUTCMonth();
-            //return `${monthArray[month]} ${year}`;
             return `Q${month/3+1} ${year}`;
         }
     });
@@ -327,32 +357,6 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
 
         let filter =  ["<=", ["get", "yeartrimes"], parseFloat(yeartrimester)];
         glmap.getMapboxMap().setFilter("urbanization_year", filter);
-
-        /*let color = [
-            "interpolate", ["linear"],
-            ["get", option],
-            minIndicators[option], scale(minIndicators[option]).hex(),
-            maxIndicators[option], scale(maxIndicators[option]).hex()
-        ];*/
-        //glmap.getMapboxMap().setPaintProperty(layer, "fill-color", color);
-
-        // Update graphs only on timeload event
-        /*indicators.forEach(indicator => {
-            indicatorVars[indicator].chartData = indicatorVars[indicator].chart.data(); // get chart data
-            indicatorVars[indicator].chart.data(indicatorVars[indicator].chartData); // set chart data
-        });*/
-
-        //console.time("process");
-        //console.log("data for", monthYear);
-        //console.log(currentTiles)
-        /*Object.keys(allTiles).forEach(layer => {
-            if (layer !== monthYear) { // hide all other months
-                glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0);
-            } else { // except current one
-                glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0.7);
-            }
-        });*/
-        //console.timeEnd("process");
     }
 });