I am in an Ionic2 / Angular2 typescript project. I want[1] to use leaflet and it's working quite fine, I can do all the basic operations like adding/editing markers and so on.
But as a next step I need to load my markers dynamically from the database and show them on the map. As database I'm using meteor, so my data I get from the server are in an Observable<marker[]>.
In other map-systems it's possible to add the markers dynamically via the html-source-code like for example this (pseudo-code):
<map>
<marker *ngFor="let marker of markers | async">
</map>
As far as I know this is not possible for leaflet, so I have to watch/subscribe the Observable manually. On every change on the Observable, I get a new complete marker[], not only a new single marker.
So I have different options how I can solve this.
1) drop all markers and draw all new
I think that's the most basic and easiest idea, but I don't think it's a really good one, actually. It looks like lot of useless operations behind the scene, no? If there are 50 markers I would delete them 49 times and draw in total 1275 markers (1+2+3+...+50)
2) check new array and actual array for differences [2]
That's the little bit advanced basic idea... I will have an array of the actually shown markers and a new array of my observable. I will check for the markers that exist in one but not the other array and add the new markers or delete removed markers.. That would be some more operations on the array, but much less for the map and the UI. So for 50 markers I would only draw 50 and adding and deleting only done when necessary.
Would be nice, if you can give me your opinion on this, or maybe I didn't catch anything and there is a better solution for it. So thank you very much in advance, I'm looking forward to your input.
[1] For my project I need a map, that supports offline usage, so I can't use google-maps, afaik. Therefore OSM and therefore leaflet. If you use something else/better, please let me know.
