Map not rendering in hidden tab

[Akshay]

I am using Kendo angular maps with geojson layer for drawing maps in a tab. The map elements are visible in the developer html elements but are not rendered in the tab. The issue might be because of the svg viewbox having height 0 at the time of drawing. 

Is there any way to handle the issue.

 

Thanks!

[Alex Hajigeorgieva]

Hello Akshay,

I tried to recreate the map not appearing when in a hidden tab to no avail:

http://dojo.telerik.com/UxOBa

In my case, I have added a width and height to the div from which I initialize the Kendo UI Map, however, the map gets rendered without it with no problem. 

Could you confirm that the map renders as expected when it is placed out of the hidden tab?

One thing which you may try is:

- set width/height of the HTML element with the kendo-map directive
- add a handler for the activate event of the Kendo UI TabStrip
- get the map instance and call its resize method in the activate event to see if this makes any difference

If this does not help, could you look at the provided example and edit it to best mimic your scenario and send back the newly generated URL from the address bar so I can inspect the behaviour and make suggestions.

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Akshay]

Hi. Thanks for the answering the question fast :). i attached a handler to the event and used map_reset to again draw the map. I achieved the results I wanted. 

Initially at the beginning the class K-layer had height 0px after drawing the map. So I made the height of K-layer class as I wanted and that also gave the same results as reset ing the map in handler.

Regards,

Akshay

[Alex Hajigeorgieva]

Hi Akshay,

I am glad to hear you have solved the issue you were experiencing and thank you for sharing your solution in the forum. 

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress