Map not rendering in hidden tab

4 posts, 0 answers
  1. Akshay
    Akshay avatar
    5 posts
    Member since:
    Feb 2017

    Posted 16 Feb 2017 Link to this post

    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!

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 20 Feb 2017 Link to this post

    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 visualization (charts) and form elements.
  3. Akshay
    Akshay avatar
    5 posts
    Member since:
    Feb 2017

    Posted 20 Feb 2017 in reply to Alex Hajigeorgieva Link to this post

    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

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 20 Feb 2017 Link to this post

    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 visualization (charts) and form elements.
Back to Top