【OpenLayers 6】埋め込み地図を表示させる方法
Contents
はじめに
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>
