Naive Choropleth legend, WIP

This commit is contained in:
Yohan Boniface 2023-06-20 20:32:40 +02:00
parent 7a0dbd014a
commit 451eb8c0bf
3 changed files with 25 additions and 0 deletions

View file

@ -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()
},

View file

@ -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({

View file

@ -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 */