I attempted to implement the leaflet-search feature using a Vue-cli component.
However, when I initiate a search, I encounter the following error message specifically related to the leaflet search function:
Uncaught TypeError: Cannot read property 'properties' of undefined at NewClass._searchInLayer (leaflet-search.src.js:569) at leaflet-search.src.js:634 at NewClass.eachLayer (leaflet-src.js:6693) at NewClass._recordsFromLayer (leaflet-search.src.js:633) at NewClass._fillRecordsCache (leaflet-search.src.js:774) at leaflet-search.src.js:736
Initializing the map -
initMap() {
this.map = L.map('map', {
center: [55.75, 37.61],
zoom: 11,
layers: this.layer
})
this.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©'
})
this.tileLayer.addTo(this.map)
// add marker
this.createMarkerLayer(this.marker)
})
},
Creating the marker layer -
createMarkerLayer(data) {
const promiseMarkerArray = this.createMarkerArray(data)
promiseMarkerArray
.then(res => {
this.markersArray = res
this.markerLayer = L.layerGroup(this.markersArray)
this.addMarker()
})
.catch(err => {
console.log(err)
})
},
// create array of markers
createMarkerArray(data) {
return new Promise((res, rej) => {
return res(data.map(item => {
let icon = null
item.agent !== null ? icon = this.iconAgent : icon = this.iconDefault
const marker = L.marker(item.coordinates, { title: item.title, icon: icon })
marker.bindPopup('<p>' + item.title + '</p>').openPopup()
marker.on('click', () => {
this.sidebarToggle(item.id)
})
marker.alarm = item.alarm
marker.agent = item.agent
return marker
}))
})
},
Setting up the leaflet-search layer -
createSearch() {
const markersLayerT = new L.LayerGroup()
this.map.addLayer(markersLayerT)
this.searchLayer = new L.Control.Search({
position: 'topleft',
layer: markersLayerT,
initial: true,
zoom: 18,
marker: false
})
this.map.addControl(this.searchLayer)
for (const i in this.marker) {
const title = this.marker[i].title
const loc = this.marker[i].coordinates
const marker1 = L.marker(loc, { 'title': title })
marker1.bindPopup('title: ' + title)
markersLayerT.addLayer(marker1)
}
}
The issue may be with the layer.feature.properties not passing the value correctly to the function.