登録なしで地図を組込みたいなら Leaflet.jsで国土地理院地図を表示

2016年の6月からGoogleMapsAPIのサービスが、APIキー必須になったため
無料とはいえ、地図を設置するWEBサイトを登録することが必須になりました。

そこで、代わりというには少し毛色が違うかもしれませんが
ルート検索などの機能はついていないものの、登録なしで自由にさわられる地図表示の仕組みとして
JavaScriptライブラリLeaflet.jsを使い、国土地理院が無料で公開している地理院地図のタイルデータを表示するサンプルを紹介します。

See the Pen Leaflet.jsで国土地理院地図を表示 by webdev (@webdev-jp-net) on CodePen.0

地図を表示するまで

Leafletのガイドで簡潔に解説してあるため
特に、ここで説明することがないのが心苦しいほどシンプルな手順です。

  1. LeafletのCSS,Javascriptを読み込む
  2. 地図を表示したい位置にidを指定したdivなどのタグを設置
  3. L.mapのコマンドでインスタンス化

Leaflet Quick Start Guide

日本地図を表示

日本向けのWEBサイトで使用するなら、日本語で日本の街をあるていど詳細に表示できなければ概ね役に立ちません。
そこで、Leaflet.jsのtileLayerという地図部分の画像を規定のタイル形式のデータに変更できる機能を使い
国土地理院が無料で提供している地図画像をかぶせます。

L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);

このように、URLを設定すると簡単に画像を取得できます。

URLは、国土地理院のタイルデータ提供ページで案内されています。
サンプルで表示している標準地図のほか、淡色地図や英語表記のものなどもあります。

地理院地図|地理院タイル一覧

関連記事

Pocket