v-leaflet half of map grayed after moving from screen

Flow
1

Hi Matti,

We have map presented in different views of application. All of them are focused initially at the same center point of the map.
First map always looks fine, but switching to another view renders only half (or less) of the visible part of the map. After small shift of the map it gets fine again. This behavior is very stable and next switch brings only part of the map again.

2

Hi,

I haven’t seen anything like this. Sounds like the underlaying Leaflet maps would need an extra call for invalidateSize method (in client side JS). If you have a test case where this can be reproduced I could have a look at this.

Are you using same or different map instance on different views? If using same, switching to different instances might be a workaround.

cheers,
matti

3

I made a test and found that the problem was with styling map component. I’m not sure what exactly wrong with the styling (and/or setting sizes of components), specifically it had style
.map{
display:block;
width: 100%;
height:100%;
background-size: cover;
border:1px solid #D6D6D6;
}
On switching between views width was treated wrongly and tiles brought correspondingly. I made correction (actually a bad one, cause I’m not so confident with CSS stuff and sizing of components), changing width to 2000px and now it’s fine. Component is not wider than necessary, still limited by surrounding stuff, but map is fine.