Kendo Map layout problem

[Paolo]

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

[Iliana Dyankova]

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