【Leaflet】埋め込み地図を表示させる方法
はじめに
Web サイトに地図をカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。ここで、Google Maps の代わりとなるのが Leaflet です。Leaflet とは JavaScript のライブラリで、自由度の高いカスタマイズを行うことができる上、オープンソースのマップを参照すれば著作権の問題も緩和されます。OpenLayers や MapLibre など他のライブラリも有りますが、それらと比較して簡単なコードでかけて、プラグインも充実しています。
今回はそんな Leaflet の導入方法について簡単に説明します。
DrawTrail
DrawTrail で生成する方法
当サイトでは、Leaflet のプログラムを簡単に生成できるようなフォームをつくっています。
トップページより、マップの表示を好きな範囲に合わせて、①「エクスポート」→ ②「埋め込みコードを生成」→ ③「クリップボードにコピー」と順に選択すると、埋め込み用のHTMLが生成されます。WordPress を使っている場合は、「カスタムHTML」 にそのまま張り付ければ動作します。
あるいは試しに動かしてみたいだけの場合、①「エクスポート」→ ②’「HTMLファイルをダウンロード」と順にクリックすると、テストファイルが生成されます。
なお、当サイト（DrawTrail）と連携している Android の GPS ロガーアプリもあります。（ Android4.1 からAndroid13 に対応しています。）ダウンロード/使い方はこちら。ソースコードも公開しているので、気になる方は「【osmdroid】Android で GPS ロガーを自作する（Java）」のページをご覧になってください。
JS / HTML で表示させる方法
自分で JavaScript と HTML を使って表示させる方法について説明します。
まず HTML ファイルを作成して、Leaflet の CSS と JavaScript ファイルを読み込みます。CSS、JavaScript の順に記載します。integrity の欄がありますが、CDN（Leaflet を保存しているネット上の空間）でのセキュリティの為に必要との事です。
<!-- 以下LeafletのJavaScriptとCSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>次に、マップを表示させるエリアを div タグで定義します。ここで z-index = 0 としておかないと、他の要素に潜り込んだりするので注意です。
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>JavaScript でマップの表示領域を指示します。ちなみに「map」 という変数を定義していますが、「Map」と変数名を設定しない方が良いです。「Uncaught TypeError : Map is not a constructor」というエラーが出ます。
const 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.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
function init_map() {
const 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>
