How to add Markes to a Leaflet-map with coordinates from Supabase database?

user_13062082 0
Viewed 158

I want to add some Markers from coordinates stored in a supabase database colomn.

Here is my vue code:

<l-marker v-for="(marker, index) in markers" :key="index" ref="markersRef" :lat-lng="marker.position"></l-marker>

I'm script:

  export default {
   async created() {
    const { data: events, error } = await this.$supabase
     .from('events')
     .select('coordinates')
    this.markers = events
    this.loaded = true
    console.log(this.markers)
    
   },
  data: () => ({
   markers: [],
  }),
 }

If I output markes, the result is:

[
   { "coordinates": "lat: 59.339025, lng: 18.065818" },
   { "coordinates": "lat: 59.923043, lng: 10.752839" }
]

the error is: "latlng is Null"

supabase vuejs2 leaflet vue.js javascript
1 Answers

Your problem is the Vue reactivity system itself.

Vue can't recognize your new markers after fetching them. You can read about it here in the Vue documentation.

Just use Vue.set or .splice

// Vue.set
Vue.set(this.markes, indexOfItem, newValue)

// Array.prototype.splice
this.markes.splice(indexOfItem, 1, newValue)
user_118691000
Related