Allow to restrict browser items to current map view
This commit is contained in:
parent
7ca4f0e11c
commit
9cf2bf1578
2 changed files with 15 additions and 4 deletions
|
@ -692,6 +692,9 @@ L.U.Map.include({
|
||||||
|
|
||||||
const filter = L.DomUtil.create('input', '', browserContainer)
|
const filter = L.DomUtil.create('input', '', browserContainer)
|
||||||
let filterValue = ''
|
let filterValue = ''
|
||||||
|
const bboxLabel = L.DomUtil.add('label', '', browserContainer, L._('Current map view'))
|
||||||
|
inBbox = L.DomUtil.create('input', '', bboxLabel)
|
||||||
|
inBbox.type = 'checkbox'
|
||||||
|
|
||||||
const featuresContainer = L.DomUtil.create(
|
const featuresContainer = L.DomUtil.create(
|
||||||
'div',
|
'div',
|
||||||
|
@ -760,15 +763,23 @@ L.U.Map.include({
|
||||||
|
|
||||||
const build = () => {
|
const build = () => {
|
||||||
ul.innerHTML = ''
|
ul.innerHTML = ''
|
||||||
|
const bounds = this.getBounds()
|
||||||
datalayer.eachFeature((feature) => {
|
datalayer.eachFeature((feature) => {
|
||||||
if (filterValue && !feature.matchFilter(filterValue, filterKeys)) return
|
if (filterValue && !feature.matchFilter(filterValue, filterKeys)) return
|
||||||
|
if (inBbox.checked && !feature.isOnScreen(bounds)) return
|
||||||
ul.appendChild(addFeature(feature))
|
ul.appendChild(addFeature(feature))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
build()
|
build()
|
||||||
|
L.DomEvent.on(inBbox, 'click', build)
|
||||||
|
L.DomEvent.on(inBbox, 'click', () => {
|
||||||
|
if (inBbox.checked) this.on('moveend', build)
|
||||||
|
else this.off('moveend', build)
|
||||||
|
})
|
||||||
datalayer.on('datachanged', build)
|
datalayer.on('datachanged', build)
|
||||||
datalayer.map.ui.once('panel:closed', () => {
|
datalayer.map.ui.once('panel:closed', () => {
|
||||||
datalayer.off('datachanged', build)
|
datalayer.off('datachanged', build)
|
||||||
|
this.off('moveend', build)
|
||||||
})
|
})
|
||||||
datalayer.map.ui.once('panel:ready', () => {
|
datalayer.map.ui.once('panel:ready', () => {
|
||||||
datalayer.map.ui.once('panel:ready', () => {
|
datalayer.map.ui.once('panel:ready', () => {
|
||||||
|
|
|
@ -701,8 +701,8 @@ L.U.Marker = L.Marker.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
isOnScreen: function () {
|
isOnScreen: function (bounds) {
|
||||||
const bounds = this.map.getBounds()
|
bounds = bounds || this.map.getBounds()
|
||||||
return bounds.contains(this._latlng)
|
return bounds.contains(this._latlng)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -935,8 +935,8 @@ L.U.PathMixin = {
|
||||||
return items
|
return items
|
||||||
},
|
},
|
||||||
|
|
||||||
isOnScreen: function () {
|
isOnScreen: function (bounds) {
|
||||||
const bounds = this.map.getBounds()
|
bounds = bounds || this.map.getBounds()
|
||||||
return bounds.overlaps(this.getBounds())
|
return bounds.overlaps(this.getBounds())
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue