title: LeafLet map doesnt render properly on modal
body: <p>i m working on a university project, and i m quite new to JS coding and i faced an issue, i am implementing my application using w3 libraries, and there is modal window which is shown when user click on the button, and this modal contains a Leaflet map, which isnt rendering properly, so I found a solution of this problem on Stackoverflow:
  <a href="https://stackoverflow.com/questions/20400713/leaflet-map-not-showing-properly-in-bootstrap-3-0-modal">Leaflet map not showing properly in bootstrap 3.0 modal</a> so i tryied the proposed solution in that thread and put this in my JS code:</p>
  
  <pre><code>$('#comparator_modal').on('show.w3.modal', function(){
      setTimeout(function() {
          mymap.invalidateSize();
      }, 400);
  });
  </code></pre>
  
  <p>but i faced another problem which i cant find a solution to. My map still renders badly, but when i resize browser window it seems to work fine(re-renders whole map, and shows a map properly), so i thought this problem might be time related, because modal might take too long to load and map invalidateSize() is executed before modal is loaded, and i tried to use different timeouts(4, 40, 400, 4000), but this doesnt resolve anything, so i m bit lost here, any ideas would be appreciated,guys 
  here is my modal body:</p>
  
  <pre><code>&lt;div id="comparator_modal" class="  w3-modal"&gt;
                  &lt;div  class="w3-modal-content  w3-animate-left w3-card-4"&gt;
                      &lt;header class="w3-container w3-blue"&gt;
                          &lt;span onclick="document.getElementById('comparator_modal').style.display='none'"
                                class="w3-btn w3-red w3-round w3-display-topright" style="font-size:16px; text-shadow:2px 1px 0 #444;"&gt;&amp;times;&lt;/span&gt;
                          &lt;h3 class="w3-center" style="text-shadow:2px 1px 0 #444;"&gt;Comparator&lt;/h3&gt;
                      &lt;/header&gt;
                      &lt;body&gt;
                          &lt;div id="comparator_modal_body"&gt;
                              &lt;div class=w3-row"&gt;
                                  &lt;div id="map01_comparator"&gt;&lt;/div&gt;
                                  &lt;!--&lt;div id=map01_comparator class="w3-half w3-text-black"&gt;Map#1&lt;/div&gt;
                                  &lt;div id=map02_comparator class="w3-half w3-text-black"&gt;Map#2&lt;/div&gt;--&gt;
                                  &lt;div class="w3-row"&gt;
                                      &lt;div class="w3-half w3-center w3-text-black"&gt;
                                          &lt;div id="time_stamp1"&gt;Time_stamp&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="w3-half w3-center w3-text-black"&gt;
                                          &lt;div id = "time_stamp2"&gt;Time_stamp&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/body&gt;
                      &lt;footer class="w3-container w3-light-grey"&gt;
  
                      &lt;/footer&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And my JS which loads map:</p>
  
  <pre><code>&lt;head&gt;
      &lt;!-- Load Leaflet from CDN--&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" &gt;
      &lt;script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"&gt;&lt;/script&gt;
      &lt;!-- Load Esri Leaflet from CDN --&gt;
      &lt;script src="https://unpkg.com/esri-leaflet@2.0.8/dist/esri-leaflet.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          #basemaps-wrapper {
              position: absolute;
              top: 10px;
              right: 10px;
              z-index: 900;
              background: white;
              padding: 10px;
          }
          #basemaps {
              margin-bottom: 5px;
          }
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
  
      // initialize the map
      var mymap = L.map('map01_comparator').setView([42.35, -71.08], 13);
      // load a tile layer
      L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
          {
              attribution: 'Tiles by &lt;a href="http://mapc.org"&gt;MAPC&lt;/a&gt;, Data by &lt;a href="http://mass.gov/mgis"&gt;MassGIS&lt;/a&gt;',
              maxZoom: 17,
              minZoom: 9
          }).addTo(mymap);
  
      $('#comparator_modal').on('show.w3.modal', function(){
          setTimeout(function() {
              mymap.invalidateSize();
          }, 4000);
      });
  
  &lt;/script&gt;
  </code></pre>