search

bluehalo / ngx-leaflet

Core Leaflet package for Angular.io
MIT License
774 stars 127 forks source link

Leaflet Map doesn't show card data after reload of the containing subelement #185

Open Zankel-Engineering opened 6 years ago

Zankel-Engineering commented 6 years ago

Environment: Windows 10 Pro Chrome 68.0.3440.106 (Offizieller Build) (64-Bit) Application: angular: 6.0.4 angular- cli: 6.0.8 npm: 6.4.1 node: 8.12.0 ngx-leaflet: 4.0.0

Hello we use the ngx-leaflet component in a kendo split-panel. In the panel it is possible to add rows and columns. In case of an add or remove, this leads to an reload of the existing tiles.

The problem now is that as soon as the leaflet component gets reinstantiated, it doesn't show the card data anymore, even though the browser downloads the corresponding pictures from open streetmap.

The overlay layers get redrawn, but the background stays gray.

invalidateSize doesn't seem to do the trick.

Expected behaviour: The map layer gets redrawn Actual behavior: The map layer stays grey

reblace commented 6 years ago

Do you think you can provide a repo with an example that reproduces the issue?

A common issue with multiple maps (or adding/removing maps) is that sometimes the baselayer objects are reused between multiple maps. That can cause issues cause once a baselayer is added to a map, it is mutated by Leaflet and can't be added to another map.

You might want to ensure that when the map is reinstantiated, that the baselayers are being recreated as well.

Zankel-Engineering commented 6 years ago

Thanks for your answer. Unfortunately the leaflet implementation is used in a bigger application and it would be time consuming to isolate the issue. I will try what you said and if it doesn't work will write you again, if you don't mind?

Azbesciak commented 6 years ago

I have very similiar problem - I have 2 leaflet components (wrapper-api and business logic component which wraps this wrapper component). The problem is that changes in business component are not reflected in wrapper (they are assigned to buisness component and then should be passed by angular bindings to child, but they are not, at least not immediately). It works when I am using something connected with view refreshing, for example buffer from rxjs or simple ChangeDetectorRef.detectChanges(). Another problem is that toasts from Angular material are showing in left-right corner - are actually glitched if there is no interaction with window (resize, refresh as mentioned above - click on map etc does not help). Bellow screenshot: image