Dinamically remove markers inside dom-repeat

[ralexrdz]

I'm binding an array to a dom-repeat to show markers in a map

markers: {
  type: Array,
  value: [{lat: 19.4, lng: -99.15, msg: 'Marker 1'}, {lat: 19.3, lng: -99.15, msg: 'Marker 2'}] 

this.set('markers', this.markers.slice(0,1)) // or what ever

when the array changes, specifically remove some elements, the markers stay in the map.

Any ideas? How could I achieve this?

[ralexrdz]

for a very strange reason If change your mapbox-gl-marker.html file If I set a new property x in line 173 disconnectedCallback ()

if (this.x) {
  this.x.remove();
}

and in line 214 _createMarker ()

let mapboxMarker = new mapboxgl.Marker(ele, {offset: [offsetLeft, offsetTop]})
                          .setLngLat([this.longitude, this.latitude])
                          .addTo(map)
this.set('x',mapboxMarker)
return mapboxMarker;

it do binds and remove the Markers

My main problem is that marker property is undefined. I don't know why, I've tried debbug it and have no clue why this happens. I've even removed the readOnly: true and nothing

I'll open other issue [#27]

[eterna2]

Let me have a look.

[eterna2]

@ralexrdz I made a typo mistake. I forgot to return the marker object when creating it. It should work in the next release.

Once I fix the other few bugs, I will release the next version.