OpenLayersでマップを画面全体に表示する方法

概要

OpenLayersという地図などのマップをブラウザなどで表示するライブラリがあります。

今回、このOpenLayersでマップを表示する際に、ブラウザのウィンドウ全体にマップを表示する方法を紹介します。

環境

• Google Chrome
• OpenLayers 4

全画面表示

ウィンドウ全体に表示するには、CSSを使います。

実際に動作するコードはこのようになります。

HTML

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

JavaScript

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

#map {
  width: 100%;
  height: 100%;
  position: fixed;
}

ウィンドウいっぱいに表示するために必要な設定は、CSSのposition: fixed;です。

これは、要素をブラウザのウィンドウの端に配置するためのものです。この設定とwidth: 100%; height: 100%;を組み合わせることで、ブラウザのウィンドウの端から横と縦いっぱいにマップを表示するということを表現できます。

まとめ

この方法は、OpenLayersに限らず他のものでも応用できると思います。

これからは画面いっぱいに表示したいのであれば、position: fixed;でその要素をブラウザのウィンドウの端に配置して、適切なサイズを設定するのが良さそうです。