Map Component in Bootstrap modal

[Isaiah]

I am attempting to implement the map control within a bootstrap modal The map loads as follows and when the mouse drag event occurs it displays as a filled pane. This happens with Both OpenStreetMap and Bing implementation.

Here is the HtmlCode utilized. Any ideas?






Layout Page includes the following (Kendo UI v2022.3.1109)

[Alexander]

Hi Isaiah,

Thank you for reaching out and for taking the time to share the relevant configuration on your end, it is greatly appreciated.

Based on my current understanding of the case, the main issue revolving around your current scenario is related to the Map's layout problem when it is displayed within a bootstrap modal. Am I assuming correctly?

If this is the case, in order to achieve the expected outcome you should call kendo.resize() method when the modal is fully shown (i.e. in its shown.bs.modal event). To elaborate more, this would be required due to the Map control not being able to assert whether it is allocated within a hidden container. Thus, not being able to automatically calculate its rendering dimensions. For example:

<script>
    $("#myModal").on('shown.bs.modal', function () {
        kendo.resize($("#map"));
        var map = $("#map").data("kendoMap");
        map.center([30.268107, -97.744821]);
      });
</script>    

For your convenience, here is a Telerik REPL example that depicts the aforementioned approach:

• Telerik REPL for ASP.NET Core Example

This would produce the following result:

Please give this suggestion a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik