Mapbox-GL 地図を描画すると右半分にしか表示されない

こんな状態になる。言葉では説明しづらいが、ホイールでズームイン/アウトしたときの中心座標も右にズレてる。

<template>
  <div id="app">
    <div id="map"></div>
  </div>
</template>

<script>
    import mapboxgl from 'mapbox-gl'
    
    mapboxgl.accessToken = '(secret)'

    export default {
        name: 'App',

        mounted() {
            // ごく一般的なMapBoxGLによる地図描画
            this.map = new mapboxgl.Map({
                container: "map",
                center: [139.767, 35.681],
                style: 'mapbox://styles/mapbox/light-v9',
                zoom: 11
            })
            this.map.addControl(new mapboxgl.NavigationControl())
        },
    }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  #map {
    width: 100%;
    height: 500px;
  }
</style>

原因

単純な話で、text-align: center と position: absolute を一緒に使っちゃダメというだけのこと。

MapBox-GLによってDOMに追加されるcanvas要素には、以下の3つのスタイルが直接指定される。

<canvas class="mapboxgl-canvas" width="1247" height="500" style="position: absolute; width: 1247px; height: 500px;"></canvas>

position: absolute
width: (親要素のwidth)
height: (親要素のheight)

ここで、Vue.js では、initで作成されるサンプルのルート要素に以下が指定されている。

<style>
#app {
  /* ..略.. */
  text-align: center;
}
</style>

特に何も考えずこれを流用していると、 position:absolute 要素のアンカーは左上にあるので、text-aling:center によって要素の左上が画面の中央に持ってこられてしまった。

参考
- Map canvas renders on only 50% of the width of the container! · Issue #11 · phegman/vue-mapbox-gl

解決策

ルート要素の text-align を消すか、canvasの親要素に text-align: left などを適用して上書きすればいい。

目次

Mapbox-GL 地図を描画すると右半分にしか表示されない

原因

解決策