Kendo TabStrip and Leaflet Map

Question

I am trying to get a leaflet map to function/draw up correctly inside a Kendo Tabstrip.

The tabstrip is defined by a script inside a jsp page. Bootstrap is being used to handle placement. When the user clicks on a previous page this executes javascript and generates the tabstrip with data being queried and supplied to the resulting tabstrip from ajax data sources.

The javascript uses the kendo script to generate the html elements i.e. the kendo tabstrip. When the template script is called, it does create the map, but the data within the map does not render properly. There are gray tiles showing. If you resize the window, the map draws perfectly. This seemingly, from everything I've read online, relates to Leaflet having issues with tabs and containers created on the fly, so to speak.

I've used the 'show' event on the tabstrip to execute the population of the map (creating markers, setting the extent to these etc), so at least I know the tabstrip has been opened and at that point I update the map. This satisfies FireFox. I've used the L.Util.requestAnimFrame without success.

L.Util.requestAnimFrame(map_realEstateDetails.invalidateSize,map_realEstateDetails,!1,map_realEstateDetails._container);

Nor does invalidateSize(); I've gone through searches online, and there are a varity of solutions offered. I've tried all and I am able to get my code to work in Firefox but not Chrome or IE.

inside the jsp we have

script type="text/x-kendo-tmpl" id="templateNewRealEstateTab">
    div id="tabWrapperRealEstate_#=id#"
        div class="col-md-3 pt-15"
            div id="map_realEstateDetails" class="map_realEstateDetails" /div
        /div

in css

.map_realEstateDetails { height:320px; z-index: 0;}

The javascript uses the kendo script to generate the html elements i.e. the kendo tabstrip

var newTabTemplate = kendo.template($('#templateNewRealEstateTab').html());


$("#realEstateDetailTabStrip").kendoTabStrip({show: popRealEstateMapDetails('newId')});

function positionRealEstateMapDetails() {

    if (map_realEstateDetails != null) {
    baseTileLayer = getBaseTileLayer();
    map_realEstateDetails = L.map('map_realEstateDetails', {
    center: [18.8964, 34.3794],
    zoom: 3,
    layers: [baseTileLayer] });
    }
}

function popRealEstateMapDetails(id){


    var del = [];
    $.ajax({
      url: urldel.delegations,
      async:false,
      success: function (listdel) {
          del = listdel;
      },
      dataType: "json"
    });

    var markers = {};
    markerMapGroup = new L.featureGroup();
    map_realEstateDetails.addLayer(markerMapGroup);

    for (var i = 0; i < del.length; i++) {
            if (del[i].id == delegationId) {
                console.log(del[i].id);
            markers[del[i].id] = L.marker(del[i].coordinates, {icon:_buildingIcon, title: del[i].tooltip});         
            markers[del[i].id].addTo(markerMapGroup);
            markers[del[i].id]._icon.id = del[i].id;
            var latlongs = [markers[del[i].id].getLatLng()];
            var markerBounds = L.latLngBounds(latlongs);
            map_realEstateDetails.fitBounds(markerBounds);
            map_realEstateDetails.setZoom(3);

            }


    }

What I should see is a leaflet map in the resulting tabstrip with relevant markers. Works in FF but IE and Chrome need to have the window resized to have the map render properly. Otherwise the map is mostly gray.

Dan Dan · Accepted Answer · 2019-08-29T14:47:23

So after debugging and help from a great colleague. He discovered a solution. If we delayed the execution (setTimeout) of the function populating the map with markers and throw in the L.Util.requestAnimFrame.... at the end of this function. It works in Chrome!

Kendo TabStrip and Leaflet Map

1 Answers