Naive Choropleth legend, WIP

umap/static/umap/js/umap.controls.js

@@ -598,6 +598,7 @@ L.U.DataLayersControl = L.Control.extend({
 
 L.U.DataLayer.include({
   renderLegend: function (container) {
+    if (this.layer.renderLegend) return this.layer.renderLegend(container)
     const color = L.DomUtil.create('span', 'datalayer-color', container)
     color.style.backgroundColor = this.getColor()
   },

umap/static/umap/js/umap.layer.js

@@ -218,6 +218,19 @@ L.U.Layer.Choropleth = L.FeatureGroup.extend({
       ],
     ]
   },
+
+  renderLegend: function (container) {
+    const parent = L.DomUtil.create('ul', '', container)
+    let li, color, label
+
+    this.options.limits.slice(0, -1).forEach((limit, index) => {
+      li = L.DomUtil.create('li', '', parent)
+      color = L.DomUtil.create('span', 'datalayer-color', li)
+      color.style.backgroundColor = this.options.colors[index]
+      label = L.DomUtil.create('span', '', li)
+      label.textContent = `${+this.options.limits[index].toFixed(1)} - ${+this.options.limits[index+1].toFixed(1)}`
+    })
+  },
 })
 
 L.U.Layer.Heat = L.HeatLayer.extend({

umap/static/umap/map.css

@@ -1080,6 +1080,17 @@ a.add-datalayer:hover,
     vertical-align: middle;
 }
 
+.datalayer-legend {
+    color: #555;
+    padding: 6px 8px;
+    box-shadow: 0 0 3px rgba(0,0,0,0.2);
+    border-radius: 1px;
+}
+.datalayer-legend ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
 
 /* ********************************* */
 /*           Popup                   */