Leaflet JS rectangle work only after browser resize on bootstrap modal nav-tabs

Question

I have a bootstrap modal with four tabs. On each tab clicked, the map is initialized and 4 diff images are added on top of the respective maps.

The box is already created, but only if I manually resize the browser, the box will then appear. From my researches, I already tried map.invalidateSize() but it does not work. Could you please help me?

The following is my codes please assume x1,y1,x2,y2 is passed correctly

       var map = L.map(mapArea, {
            minZoom: -2,
            maxZoom: 4,
            center: [500, 500],
            zoom: -1,
            crs: L.CRS.Simple,
            attributionControl: false

        });

        L.imageOverlay(image, [[y1, x1], [y2, x2]]).addTo(map);

next, I tried to add the rectangle on this image.

        var rect;  
                           
                rect = new L.rectangle([[x1, y1], [x2, y2]], rectOptions);                    
                map.addLayer(rect);
            
        

Answer 1

       for each tab clicked, i added the following event handler and now it works!

        $('.nav-tabs a[href="#myTab0"]').on('shown.bs.tab', function (event) {
            setTimeout(function () {
                Map.invalidateSize();
            },1);
        });