1

I have a page that generates a series of maps based off of an async call. When the maps first load, they are missing tiles, as seen in the below image.

enter image description here

I can resolve this by calling map.invalidateSize() to redraw the tiles in each. Currently I create 8 on load and the rest are paginated via an Angular directive. Toggling to any other 8 or switching back and forth will "fix" the first 8.

Since these first 8 are the product of an ngRepeat, they all have the same ID. I could, in theory, add the index or some other string modification to the ids of each of the 8 maps and create a loop of the below code to run map.invalidateSize() on each, but this seems like a roundabout and overall poor solution to the issue. Does anyone have a better suggestion?

leafletData.getMap('leafletMap-trips').then(function(map) {
    setTimeout(function () { map.invalidateSize() });
});
kuanb
  • 1,618
  • 2
  • 20
  • 42

1 Answers1

2

As a matter of fact, nope. The leaflet API only allow size invalidation per-map, so you will pretty much need to do as you explained.

Pierre Gayvallet
  • 2,933
  • 2
  • 23
  • 37
  • Thanks Pierre, any chance there is a way to acquire a list of all maps currently controlled by the directive? – kuanb Aug 13 '15 at 16:46