leaflet-map
leaflet-map copied to clipboard
Making use of the attach callback
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.