leaflet-map icon indicating copy to clipboard operation
leaflet-map copied to clipboard

Making use of the attach callback

Open cwmrowe opened this issue 8 years ago • 0 comments

I am using the leaflet-map web component within an Angular 2 app, and the two appear to be a very good match.

However, there appears to be a problem with the way that Angular 2 updates the view and the way that leaflet-map updates the underlying leaflet map. For example, lets say I have an array of 3 locations and plot these on a map with the leaflet-marker element. If I then remove the second location from my array angular will update the DOM to show only two leaflet-marker elements, however, the last two markers are removed from the map.

It appears that Angular 2 removes the last maker (but not the first), and then reattaches it. This is the same leaflet-marker element, so no new marker is created.

I have managed to get the markers working correctly with Angular 2 by adding the following Polymer callback to leaflet-marker.

attached: function(){
    if(this.container && this.feature){
       this.feature.addTo(this.container);
    }
}

I'm happy to create a pull request if you think this is an acceptable approach.

cwmrowe avatar Jan 04 '16 16:01 cwmrowe