Leafletで地図を表示しようとしてなかなか表示されないと思ってたらブラウザーのサイズを小さくしたら表示された件

Leafletで地図を表示しようとして、全く地図が表示されず、試しにFirefoxを起動したら表示され、Chromeでは表示されないというなかなか奇妙な現象に半日を費やしてしまいました。

どうも地図の幅が800pxくらいを境に表示されなくなるようで、たまたまFirefoxのウインドウサイズが小さくて表示されてたようです。

関連する内容はここら辺と思われます。

環境

• Rails 5.2.0
• ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]
• leaflet-rails (1.3.1)
• twitter-bootstrap-rails (4.0.0)

地図の表示

Railsプロジェクトの作成や、twitter-bootstrap-rails、leaflet-railsの実装は本題ではないので省略します。

github等を参照してください。

https://github.com/seyhunak/twitter-bootstrap-rails
https://github.com/axyjo/leaflet-rails

Homeコントローを作成しましたので、各種ファイルはhome.*になっています。

#map
  = map center: {latlng: [51.52238797921441, -0.08366235665359283], zoom:18}

Error: Map container is already initialized.

home.coffeeにLeafletのサイトを参考に下のように記述しました。

ready = ->
  map = L.map('map').setView([
    51.505
    -0.09
  ], 13)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors').addTo map

$(document).ready(ready)

ここで、ブラウザーのウインドウサイズを小さくしないと表示されないことが発覚しました。

スタイルシートでmap要素のサイズが800pxより大きくならないように試してみたりしましたがうまくいかずしばらく対処方法が分かりませんでした。

原因

実はレイアウトでスマホのような画面サイズが小さいデバイスではbootstrapsの12カラムで表示するようにしていて、パソコンのような画面サイズが大きいデバイスでは前後に1カラム余白をとって10カラムで表示するようにしていました。

    .container
      .row
        .visible-xs.visible-sm
          .col-xs-12.col-sm-12
            = bootstrap_flash
            = yield
        .visible-md.visible-lg
          .col-md-1
          .col-md-10
            = bootstrap_flash
            = yield
          .col-md-1

どうも12カラム使用しないとうまく表示されないようで、800pxくらいを境に12カラム表示になったり10カラム表示なったりで、10カラムの時は表示されないという現象でした。

対処

12カラム表示だけで使用する用にレイアウトを変更しました。

    .container
      .row
        .col-xs-12.col-sm-12
          = bootstrap_flash
          = yield

これで地図がブラウザーのウインドウサイズに関わらず常に表示されるようになりました。

また、leaflet-railsのヘルパーを使用した方法でも問題なく表示されるようになりました。
エラーが出ていたのも12カラム表示することと関係したようです。