This is a migrated thread and some comments may be shown as answers.

Map not rendering in hidden tab

3 Answers 99 Views
Map
This is a migrated thread and some comments may be shown as answers.
Akshay
Top achievements
Rank 1
Akshay asked on 16 Feb 2017, 06:15 AM

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!

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 20 Feb 2017, 07:34 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Akshay
Top achievements
Rank 1
answered on 20 Feb 2017, 12:16 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 20 Feb 2017, 12:31 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Map
Asked by
Akshay
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Akshay
Top achievements
Rank 1
Share this question
or