スタートページ＞ Javascript＞ Leaflet

Leaflet による国土地理院地図の二次加工

地図作成環境

ここでは、国土地理院の地図タイルを、地図加工のフリーソフトである Leaflet およびそのアドオンソフト群を用いて、GoogleMap のような二次加工処理を行います。

国土地理院地図

国土地理院が日本の国土の地形図、写真、標高、地形分類、災害情報などを総合的に提供する公開ライブラリです。

地理院タイル
地図のことです。基本的なタイルに「標準地図」「淡色地図」「航空写真」があり、その他、標高地図、土地利用地図、火山・活断層・治水などの防災地図など多様なタイルを提供しています。→参照：地理院タイル一覧
これらは、出典を明示するだけで、自由に二次加工をすることができます。
地図作成サービス
地理院地図のＷｅｂサイトで、これらの地図を多様な機能で閲覧・加工することができます。マーカーや吹き出しの操作などをＧＵＩ環境で行えますし、作成した地図の保存や共有もできます。→参照： 初期画面、地理院地図操作マニュアル
実務的に便利なサイトですが、ほとんどがＧＵＩ操作であり、本シリーズの「JavaScript」の範疇ではないので割愛します。下記のＵＲＬを参照してください。
地理院地図Vector（仮称）
利用者が地理院タイルを二次加工して、独自の地図を作成するために、地図情報をベクトルタイル化して、Ｗｅｂ上で加工できる地理院地図Vector（仮称）を試験公開しています。 →参照：地理院地図 Vector操作マニュアル

Leaflet

Goole Mapsが自身の地図タイル（地図情報）を持っているのに対して、Leafletは地図タイルは持たず、Goole Mapsや国土地理院が公開している地図タイルを利用して、地図加工を行うソフトウェアです。オープンソースのJavaScriptライブラリで、アプリケーションを構築するためのＡＰＩを提供します。
Leafletは膨大な機能があり、プラグインも多くあります。ここでは、Leafletの「超初歩的」な使い方の説明をします。

Leafletを利用するには、head部に
　　　　<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.01/dist/leaflet.css">
　　　　<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
と記述するだけです（@1.8.0はバージョンで逐次改訂されています）。
　さらに、地図を全画面表示／元の画面表示に切り替えるには下のプラグインを用います。
　　　　<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet'>
　　　　<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
Goole Maps API と異なりアカウントを取得する必要もありませんし、無料での利用制限もありません。

基本的な機能のサンプル

上記の「参考ＵＲＬ」を参考にして、Leafletの基本的機能のプログラムを自作しました。解説書というよりも、むしろ私個人用のメモです。
次の機能は独立しています。Ａの処理結果はＢに引き継がれません。

Head部に次のＣＤＮがあります。
　　　　<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
　　　　<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
　　　　<link rel="stylesheet"href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css">
　　　　<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
Body部に次の表示場所が定義されています。
　　　　<div id="地図表示場所" style="width:400px;height:400px"></div>
　　　　<div id="結果表示場所" style="color: red;"></div>　　// 必要なときだけ

地図表示。
クリック場所の座標取得：地図下に赤字で表示されます。
標準アイコンでのマーカー表示。
アイコンの位置：アイコンのどこがマーカー位置に一致するか。（説明図）
標準アイコンの色を変える。出所：pointhi/leaflet-color-markers
アイコン作成：標準以外のアイコンをマーカーにします。
連続画像アイコン：画像名称が連続の場合です。
マーカーの操作：マウス合わせ、クリック時のポップアップなど。
図形表示：線、円、多角形（文字や画像はアイコンとして表示）。