Kendo Map layout problem

2 posts, 0 answers
  1. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 11 Feb Link to this post

    I have a kendo map inside a bootstrap modal.

     Inside tha modal I have a div tag for the map:

    <div id="map"></div>

    The javascript I use for loading the map is this one:

    $("#map").kendoMap({
             controls: {
                 
             },
             center: [45.873275, 9.366302],
             zoom: 7,
             layers: [{
                     type: "tile",
                     urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                     subdomains: ["a", "b", "c"],
                     attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
                 }],
             markers: [{
                  
                 }],
             click: onMapClick,
         });

     

    The map is created with controls in the right position, but the map itself is positioned partially outside the div.

    Tiles are not called in that part since map is centered outside the div on the right, and missing tiles of course appear only if you fire a mouse event on the map.

     

    I attach a screenshot to show result.

    Kind regards

     

    Paolo

    The result is the

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 16 Feb Link to this post

    Hi Paolo,

    Apologies for the delayed reply.

    In order to achieve the expected outcome you should call kendo.resize when the modal is fully shown (i.e. in its shown.bs.modal event). For your convenience here is a basic dojo

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top