今回は「Leaflet.js と Open Street Map を利用して地図を表示する方法」についてまとめます。
概要
最近はホームページ上に地図を表示するサイトも増えています。 今回は、そんな前例にならって自分も地図を表示したい！という方に向けた記事になります。
とはいえ、あらかじめ表示したい場所の緯度経度が分かっている前提になります。 もし、任意の住所から緯度経度を調べたいのであれば「住所から緯度経度を求める方法」をまずは参照してみてください。
今回利用するのは「leaflet.js」と「Open Street Map」です。 「leaflet.js」はオープンソースの地図操作を支援する JavaScript ライブラリです。 「Open Street Map」はその名の通りオープンソースの地図データです。 今回はこれらを組み合わせて地図表示を行ってみます。
実装
実装はポイントだけ記載すると分かりづらいので全体を載せてポイント解説します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<style>
#mapid { height: 500px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script type="text/javascript">
var mymap = L.map('mapid',{
center: [35.710063, 139.8107],
zoom: 16
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>"
}).addTo(mymap);
L.marker([35.710063, 139.8107])
.addTo(mymap)
.bindPopup("スカイツリーはここ！")
.openPopup();
</script>
</body>
</html>
L.7 スタイルシートの追加
Leaflet.jsが提供するスタイルシートをhead内に追加します。
L.9 地図の高さを指定
地図の表示サイズはスタイルで指定します。
L.14 地図表示するdiv要素
実際に地図を描画するエリアです。 この div要素 に指定する id は後続のスクリプトでも利用します。
L.16 Leaflet.jsの本体スクリプトを追加
Leaflet.jsが提供するJavaScriptライブラリを追加します。 独自に実装する初期化処理やマーカー追加処理より手前で読み込まれるように入れ込みます。
L.18-21 地図の初期化
何かのランドマークを地図中央に表示したいのであれば、サンプル実装のように center で指定する方法が簡易です。
zoom は数字が大きいほどズームインしている状態（詳細表示）、数字が小さいとズームアウトしている状態（広域表示）になります。
L.23-25 地図のスタイルを指定
マップデータを指定します。
今回は Open Street Map を利用するので https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png を指定しています。
地図データはコピーライトが付くことが多いので、必要に応じて attribute でルールに従ってコピーライトを付けておきます。
参考までに Open Street Map以外にも日本であれば国土地理院が提供している地図もあります。 国土地理院のものが使いたい場合、以下のようなコードになります。
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", {
attribution: "© <a href='https://maps.gsi.go.jp/development/ichiran.html'>国土地理院</a>"
}).addTo(mymap);
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
attribution: "© <a href='https://maps.gsi.go.jp/development/ichiran.html'>国土地理院</a>"
}).addTo(mymap);
L.27-30 マーカーを追加
場所と文言を指定してマーカーを表示させます。
実行
前述の index.html をブラウザで開くと以下のような画面が表示されます。
地図は Google Map のようにドラッグ＆ドロップで移動したり、マウスホイールで拡大縮小したりできます。 緯度経度を取得するのが面倒ではありますが…そこまでできていれば意外と簡単に地図表示できました。
今回は「Leaflet.js と Open Street Map を使って地図を表示する方法」についてまとめました。 参考になったでしょうか？ 本記事がお役に立っていると嬉しいです！！
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！