title: leaflet map does not appear correctly until resize
body: <p>I am using Leaflet with scalajs-leaflet facade on Binding.scala, and the map initializes/appears incorrectly. </p>
  
  <p>In order to reproduce the issue, i have prepared a <code>lihaoyi/workbench</code> page similar to that in scalajs-leaflet. </p>
  
  <p>First, download the forked scalajs-leaflet from <a href="https://github.com/mcku/scalajs-leaflet" rel="noreferrer">https://github.com/mcku/scalajs-leaflet</a></p>
  
  <p>Run <code>sbt</code> in <code>scalajs-leaflet</code> directory. 
  Enter <code>~ example/fastOptJS</code> in sbt. Now, a web server started at port 12345. </p>
  
  <p>Open 
  <a href="http://localhost:12345/example/target/scala-2.12/classes/leaflet2binding-dev.html" rel="noreferrer">http://localhost:12345/example/target/scala-2.12/classes/leaflet2binding-dev.html</a> in a browser</p>
  
  <p>The problem is the map container appears but the content (tiles, etc) is not correct. Map becomes fine after a small resize on window, which triggers <code>_onResize</code> handler of leaflet.</p>
  
  <p>The container is in the <code>Leaflet2Binding.scala</code> file and has its size already specified prior to initialization: </p>
  
  <pre><code>val mapElement = &lt;div id="mapid" style="width: 1000px; height: 600px;
                         position: relative; outline: currentcolor none medium;"
                      class="leaflet-container leaflet-touch leaflet-fade-anim 
                      leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                      data:tabindex="0"&gt;&lt;/div&gt;.asInstanceOf[HTMLElement]
  </code></pre>
  
  <p>It is possible to insert a line <code>lmap.invalidateSize(true)</code> in the following line before returning the element
  <a href="https://github.com/mcku/scalajs-leaflet/blob/83b770bc76de450567ababf6c7d2af0700dd58c9/example/src/main/scala/example/Leaflet2Binding.scala#L39" rel="noreferrer">https://github.com/mcku/scalajs-leaflet/blob/83b770bc76de450567ababf6c7d2af0700dd58c9/example/src/main/scala/example/Leaflet2Binding.scala#L39</a>, but did not help in this case. Namely here: </p>
  
  <pre><code>@dom def renderMap = {
    val mapElement = ... (same element as above)
  
    .. some other initializations ..
  
    lmap.invalidateSize(true) // true means, use animation
  
    println("mapElement._leaflet_id " +mapElement.asInstanceOf[js.Dynamic]._leaflet_id) // prints non-null value, makes me think the container is initialized
  
    mapElement
  }
  </code></pre>
  
  <p>Any ideas? This is binding.scala specific, but it may be a leaflet issue as well. 
  <a href="https://i.stack.imgur.com/mfu68.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mfu68.png" alt="map before resize"></a>
  <a href="https://i.stack.imgur.com/RpkmX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RpkmX.png" alt="after resize"></a></p>
  
  <p><strong>EDIT</strong> Possible workaround
  It looks like, the map element has its <code>clientWidth</code> property not available during the process. Which is understandable as the document is not "ready" yet. However, the css <code>style.width</code> is available and could be defined in px. In that case it is possible to patch leaflet to take css style width into account during computation.</p>
  
  <p>it works if the style width is specified in px. </p>
  
  <pre><code>diff --git a/src/map/Map.js b/src/map/Map.js
  index b94dd443..6544d7b7 100644
  --- a/src/map/Map.js
  +++ b/src/map/Map.js
  @@ -903,8 +903,9 @@ export var Map = Evented.extend({
          getSize: function () {
                  if (!this._size || this._sizeChanged) {
                      this._size = new Point(
  -                               this._container.clientWidth || 0,
  -                               this._container.clientHeight || 0);
  +
  +                               this._container.clientWidth || parseInt(this._container.style.width.replace("px",""),10) || 0,^M
  +                               this._container.clientHeight || parseInt(this._container.style.height.replace("px",""),10) || 0);;^M
  
                          this._sizeChanged = false;
                  }
  </code></pre>