【OpenLayers 8】埋め込み地図を表示させる方法
はじめに
OpenLayers とは、ブラウザでマップデータを表示する、JavaScript のオープンソースライブラリです。Web サイト上にマップをカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。この問題は、OpenLayers とオープンソースのマップを組み合わせることで解決することが出来ます。
他のマップライブラリとして Leaflet も知られていますが、Leaflet はプラグインが豊富でソースコードがシンプルな反面、日付変更線を跨ぐ図形の描画に問題点があったり、ベクトルタイルが使えなかったり、投影法が Web メルカトルから変更できなかったりします。そういった問題点を気にされる方には、OpenLayers は一つの選択肢になるかと思います。
今回はそんな OpenLayers （OpenLayers 8）の導入方法について簡単に説明します。
（なお、OpenLayers は結構頻繁にバージョンアップがあるので、ついて行くのが大変です…）
OpenLayers の導入方法
まず HTML ファイルを作成して、OpenLayers の JavaScript と CSS を読み込みます。
公式サイトによると、製品などに用いる場合は、自分のサーバーにダウンロードしておくことを推奨しているみたいです。
<script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">次に、マップを表示させるエリアを div タグで定義します。ここで z-index = 0 としておかないと、他の要素に潜り込んだりするので注意です。
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>JavaScriptで OpenLayers のマップオブジェクトを生成するには、以下のように記載します。
const map = new ol.Map({ ... });上記の…にあたる部分に、idを使った<div>要素との紐づけ、マップレイヤーの追加、表示範囲の設定を記載すれば、埋め込みマップが表示されます。ここで使用しているマップは、OpenStreetMap というオープンソースのマップデータです。
const 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 -->
<script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">
<script>
function init_map() {
const 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>対する Leaflet について
Leaflet については、当サイトで HTML/JavaScript を自動生成するフォームを作っています。気になる方は、トップページ もしくは「【Leaflet】埋め込み地図を表示させる方法」をご覧になってください。どんなものか、試しに使うことが出来るかと思います。
また、当サイトと連携した Android の GPS ロガーアプリもあります（ Android4.1 からAndroid13 に対応）。ダウンロード/使い方はこちら。ソースコードも公開しているので、こちらも気になる方は「【osmdroid】Android で GPS ロガーを自作する（Java）」のページをご覧になってください。
