Added map legend

public/js/centropais_periurbano.js

@@ -362,6 +362,7 @@ const populateMap = async (mapData) => {
             duration: "P1Y"
         });
         timeLayer.addTo(map);
+        legend.addTo(map);
 
         let baseLayers = {
             "Carto Dark": cartoDarkLayer,
@@ -521,6 +522,27 @@ L.timeDimension.layer.Tile = (layer, options) => {
     return new L.TimeDimension.Layer.Tile(layer, options);
 };
 
+
+let legend = L.control({
+    position: "bottomright"
+});
+
+legend.onAdd = () => {
+    let div = L.DomUtil.create("div", "info legend leaflet-bar");
+    let html = "<h6>Urbanizaci&oacute;n</h6><ul>";
+    let colorGrados = {
+        "Baja": "rgb(49,149,54)",
+        "Media": "rgb(255,255,191)",
+        "Alta": "rgb(158,1,66)"
+    };
+    Object.keys(colorGrados).forEach( grado => {
+        html += `<li><i style="background: ${colorGrados[grado]}"></i>${grado}</li>`;
+    });
+    html += "</ul>";
+    div.innerHTML = html;
+    return div;
+};
+
 // hide initial screen and show map
 $("#startHeader").remove();
 $("#initial-backdrop").remove();