These are chat archives for ThoughtWorksInc/Binding.scala

21st
Dec 2018
Mustafa Kuscu
@mcku
Dec 21 2018 05:48
Sometimes I have issue with displaying leaflet maps. Here is a question https://stackoverflow.com/questions/53879753/leaflet-map-does-not-appear-correctly-until-resize
Mustafa Kuscu
@mcku
Dec 21 2018 11:35
this is related to component initialization, again. a quick snippet is here:
  @dom def renderMap: Binding[Element] = {

    val mapElement = <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"></div>.asInstanceOf[HTMLElement]

    val mapOptions=LMapOptions.zoom(13).center((51.505, -0.09))

    val lmap: LMap = L.map(mapElement, mapOptions)

    val tileLayer = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZmFuY2VsbHUiLCJhIjoiY2oxMHRzZm5zMDAyMDMycndyaTZyYnp6NSJ9.AJ3owakJtFAJaaRuYB7Ukw",
      TileLayerOptions.id("mapbox.streets").maxZoom(19).attribution("""Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,
                                                                      |<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
                                                                      |Imagery © <a href="http://mapbox.com">Mapbox</a>""".stripMargin))
    tileLayer.addTo(lmap)

    println("mapElement._leaflet_id " +mapElement.asInstanceOf[js.Dynamic]._leaflet_id)
    println(s"map width ${mapElement.style.width}")
    lmap.invalidateSize(true)

    mapElement
  }
the element width prints correctly on the console
what would prevent the map from rendering?
Mustafa Kuscu
@mcku
Dec 21 2018 12:59
OK. it looks like, the map element has its clientWidth property not available during this process. Which is understandable as the document is not "ready" yet. However, if the css style.width is available. It is possible to patch leaflet to take css style width into account during computation.
it works if the style width is specified in px.
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);
+^M
+                               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;
                }