Naive Choropleth legend, WIP
This commit is contained in:
parent
7a0dbd014a
commit
451eb8c0bf
3 changed files with 25 additions and 0 deletions
|
@ -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()
|
||||
},
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in a new issue