【OpenLayers 6】埋め込み地図を表示させる方法

はじめに

 OpenLayers とは、ブラウザでマップデータを表示する、JavaScript のオープンソースライブラリです。Web サイト上にマップをカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。この問題は、OpenLayers とオープンソースのマップを組み合わせることで解決することが出来ます。
 他のマップライブラリとして Leaflet も知られていますが、Leaflet はプラグインが豊富で拡張性が高い反面、日付変更線を跨ぐ図形の描画に問題点があります。そういった問題点を気にされる方には、OpenLayers は一つの選択肢になるかと思います。

 今回はそんな OpenLayers (OpenLayers 6)の導入方法について簡単に説明します。

OpenLayers の導入方法

 まず HTML ファイルを作成して、OpenLayers の JavaScript と CSS を読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>

 次に、マップを表示させるエリアを div タグで定義します。ここで z-index = 0 としておかないと、他の要素に潜り込んだりするので注意です。

<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

 JavaScriptで OpenLayers のマップオブジェクトを生成するには、以下のように記載します。

var map = new ol.Map({ ... });

 上記の…にあたる部分に、idを使った<div>要素との紐づけ、マップレイヤーの追加、表示範囲の設定を記載すれば、埋め込みマップが表示されます。ここで使用しているマップは、OpenStreetMap というオープンソースのマップデータです。

var map = new ol.Map({
    target: 'mapcontainer',  //idを使った<div>要素との紐づけ
    layers: [ //マップレイヤーの追加
      new ol.layer.Tile({
        source: new ol.source.OSM() //OpenStreetMap の読み込み
      })
    ],
    view: new ol.View({ //表示範囲の設定
      center: ol.proj.fromLonLat([142.14, 43.65]),  //初期の中心位置 [経度, 緯度]
      zoom: 6 //ズームレベル
    })
});

実装例

 全体のソースコードと実装例は以下の通りです。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth(幅)とheight(高さ)で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下OpenLayersのJavaScriptとCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>

<script>
function init_map() {
    var map = new ol.Map({
        target: 'mapcontainer',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([142.14, 43.65]),  //初期の中心位置 [経度, 緯度]
          zoom: 6 //ズームレベル
        })
    });
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。