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

Contents

1 はじめに
2 DrawTrail で生成する方法
3 JS / HTML で表示させる方法
4 実装例

はじめに

　Web サイトに地図をカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。ここで、Google Maps の代わりとなるのが Leaflet です。Leaflet とは JavaScript のライブラリで、自由度の高いカスタマイズを行うことができる上、オープンソースのマップを参照すれば著作権の問題も緩和されます。

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

DrawTrail

図1. Leaflet を使った埋め込み地図

DrawTrail で生成する方法

　当サイトでは、Leaflet のプログラムを簡単に生成できるようなフォームをつくっています。

　トップページより、マップの表示を好きな範囲に合わせて、①「エクスポート」→ ②「埋め込みコードを生成」→ ③「クリップボードにコピー」と順に選択すると、埋め込み用のHTMLが生成されます。Wordpress を使っている場合は、「カスタムHTML」にそのまま張り付ければ動作します。

　あるいは試しに動かしてみたいだけの場合、①「エクスポート」→ ②’「HTMLファイルをダウンロード」と順にクリックすると、テストファイルが生成されます。
　

図2. 「エクスポート」→「埋め込みコードを生成」「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>