CODEWITHSUNDEEP
javascriptvue.jsleaflet
ncux199rus
ncux199rus

Reputation: 125

leaflet-search - Cannot read property 'properties' of undefined

I try using leaflet-search. Vue-cli component.

When starting search, it gives an error : This is a valid error log. It refers only 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

Init 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:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;'
  })
  this.tileLayer.addTo(this.map)

  // add marker
  this.createMarkerLayer(this.marker)
  })
},

create 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 aaray 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
    }))
  })
},

create leaflet-search layer - 

createSearch() {
  const markersLayerT = new L.LayerGroup()  // layer contain searched elements
  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  // v alue searched
    const loc = this.marker[i].coordinates      // position found
    const marker1 = L.marker(loc, { 'title': title }) // se property searched
    marker1.bindPopup('title: ' + title)
    markersLayerT.addLayer(marker1)
  }
}

May be problem in - layer.feature.properties. does not correctly pass the value to the function.

Upvotes: 2

Views: 4722

Answers (1)

ncux199rus
ncux199rus

Reputation: 125

In the data from which I tried to fill in the layer, the leaflet search contained empty title fields. Added check and default value.

item.title= item.title || 'Default title' // !!!!!!!!!!!check and default value

for (const i in this.marker) {
    const title = this.marker[i].title  // value searched
    item.title= item.title || 'Default title' // !!!!!!!!!!!check and default value
    const loc = this.marker[i].coordinates      // position found
    const marker1 = L.marker(loc, { 'title': title }) // se property searched
    marker1.bindPopup('title: ' + title)
    markersLayerT.addLayer(marker1)
}

Upvotes: 1

Related Questions