Heatmap Leaflet in a Hidden Div

问题:

Hello I have 2 maps in tabs. One shows a simple map and the other shows the heat map. when the page loads the simple one is shown whereas the heat map is in the hidden div. When I click on the tab which has the heat map it does not display it properly until I resize the browser or the open the browser console. I have tried the resize option but that doesn't works. Can somebody tell me what should I do

HTML CODE

<ul class="nav nav-tabs nav-tabs-inverse nav-justified nav-justified-mobile" data-sortable-id="index-2">
        <li class="active"><a href="#map1" data-toggle="tab"><i class="fa fa-picture-o m-r-5"></i> <span class="hidden-xs">World Map</span></a></li>
        <li class="" id="heatMap"><a href="#heat-map2" data-toggle="tab"><i class="fa fa-picture-o m-r-5"></i> <span class="hidden-xs">Heat Map</span></a></li>
    </ul>




    <div class="tab-content" data-sortable-id="index-3">

        <div class="tab-pane fade  active in" id="map1">
            <div class="panel-body p-0">
                <div id="map" class="height-sm width-full"></div>
            </div>
        </div>
        <div class="tab-pane fade" id="heat-map2">
            <div class="panel-body p-0">
                <!--<div id="world-map" class="height-sm width-full"></div>-->
                <div id="hmap" class="height-sm width-full"></div>
            </div>
        </div>

    </div>

JS CODE

map = L.map('hmap',{center: [53.15, -6.7],zoom: 10});

                    // OSM Baselayer

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

                    var kildareStyle = {
                        "fillColor": "#CC9933", 
                        "color": "#000000",
                        "weight": 2,  
                        "fillOpacity": 0.2
                    };

                    var pointStyle = {
                        radius: 8,
                        fillColor: "#ff7800",
                        color: "#000",
                        weight: 1,
                        opacity: 1,
                        fillOpacity: 0.8

                    };
                     //var kildare = new L.geoJson.ajax('assets/kildare.geojson', {style:kildareStyle}).addTo(map);
                // var points = new L.GeoJSON.AJAX('assets/kildare.geojson').addTo(map);

                // var heat = L.heatLayer(heat_points, {radius:12,blur:25,maxZoom:11}).addTo(map);
                        google.maps.event.addListenerOnce(map, 'idle', function() {
                        // debugger;
                        console.log("Now the map is in idle state"); 
                    });

Update

I have solved the issue but now I am facing another error that heat layer is not a function. Can somebody tell me why am I facing this error

回答1:

I don't know if this is a correct answer or not but one way to get out of this stupid bug is to heatmap initialization when the user clicks on the tab. like this

$('#heatMap').click(function(){
map = L.map('hmap',{center: [53.15, -6.7],zoom: 10});

                    // OSM Baselayer

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

                    var kildareStyle = {
                        "fillColor": "#CC9933", 
                        "color": "#000000",
                        "weight": 2,  
                        "fillOpacity": 0.2
                    };

                    var pointStyle = {
                        radius: 8,
                        fillColor: "#ff7800",
                        color: "#000",
                        weight: 1,
                        opacity: 1,
                        fillOpacity: 0.8

                    };
                     //var kildare = new L.geoJson.ajax('assets/kildare.geojson', {style:kildareStyle}).addTo(map);
                // var points = new L.GeoJSON.AJAX('assets/kildare.geojson').addTo(map);

                // var heat = L.heatLayer(heat_points, {radius:12,blur:25,maxZoom:11}).addTo(map);
                        google.maps.event.addListenerOnce(map, 'idle', function() {
                        // debugger;
                        console.log("Now the map is in idle state"); 
                    });
}); 

If that does not helps put this code in settimeout function and set it to 500 milliseconds. what this will do is when the user clicks on the tab the jquery will wait for 500 milliseconds and then it will trigger the code.

Hope this helps