【Leaflet】埋め込み地図を表示させる方法
はじめに
Web サイトに地図をカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。ここで、Google Maps の代わりとなるのが Leaflet です。Leaflet とは JavaScript のライブラリで、自由度の高いカスタマイズを行うことができる上、オープンソースのマップを参照すれば著作権の問題も緩和されます。
今回はそんな Leaflet の導入方法について簡単に説明します。
DrawTrail
DrawTrail で生成する方法
当サイトでは、Leaflet のプログラムを簡単に生成できるようなフォームをつくっています。
トップページより、マップの表示を好きな範囲に合わせて、①「エクスポート」→ ②「埋め込みコードを生成」→ ③「クリップボードにコピー」と順に選択すると、埋め込み用のHTMLが生成されます。Wordpress を使っている場合は、「カスタムHTML」 にそのまま張り付ければ動作します。
あるいは試しに動かしてみたいだけの場合、①「エクスポート」→ ②’「HTMLファイルをダウンロード」と順にクリックすると、テストファイルが生成されます。

なお、生成したファイルにはデフォルトで GestureHandling 機能(Ctrl +ズーム)が実装されていますが、これについては別途説明する予定です。
JS / HTML で表示させる方法
自分で JavaScript と HTML を使って表示させる方法について説明します。
まず HTML ファイルを作成して、Leaflet の CSS と JavaScript ファイルを読み込みます。
<!-- 以下LeafletのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.3.0/dist/leaflet.css' />
<script src='https://unpkg.com/leaflet@1.3.0/dist/leaflet.js'></script>
次に、マップを表示させるエリアを div タグで定義します。ここで z-index = 0 としておかないと、他の要素に潜り込んだりするので注意です。
<!-- 埋め込みマップのdivタグ。マップサイズはwidth(幅)とheight(高さ)で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
JavaScript でマップの表示領域を指示します。
var map = L.map('mapcontainer');
map.setView([43.6599240747891, 142.14111328125003], 6); //初期の中心位置とズームレベルを設定
マップタイル(地図の画像)を OpenStreetMap のサーバーから参照します。マップタイルについてはこちらに利用規約の概要をまとめました。
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);
実装例
全体のソースコードと実装例は以下の通りです。
<!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>
<!-- 以下LeafletのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.3.0/dist/leaflet.css' />
<script src='https://unpkg.com/leaflet@1.3.0/dist/leaflet.js'></script>
<script>
function init_map() {
var map = L.map('mapcontainer');
map.setView([43.6599240747891, 142.14111328125003], 6); //初期の中心位置とズームレベルを設定
//マップタイルを読み込み、引用元を記載する
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>