スタートページJavascriptLeaflet

Leaflet:地図作成ツール


Leafletとは

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

Leafletを利用するには、head部に
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
と記述するだけです(@1.5.1はバージョンで逐次改訂されています)。
Goole Maps API と異なりアカウントを取得する必要もありませんし、無料での利用制限もありません。

ここでは、地図タイルを国土地理院のものを利用しています。登録の必要もなく無料で利用できます。また、住所と緯度経度のデータも公開しておりダウンロードもできます。

参照URL


基本的な機能

上記の「参考URL」を参考にして、Leafletの基本的機能のプログラムを自作しました。解説書というよりも、むしろ私個人用のメモです。

次の機能は独立しています。Aの処理結果はBに引き継がれません。

単純地図表示:国土地理院の地図を用いる。
単純地図表示:地図選択。
地図への追加表示:地図タイルの選択、距離スケールの表示。
クリック場所の座標取得:地図下に赤字で表示されます。
マーカー表示:標準マーカー。
マーカーのオプション:簡単なポップ、重なるマーカー、ドラッグ。
アイコン作成:標準以外のマーカーにする。
ポップアップ表示:マーカーをクリックしてポップアップ表示。
図形文字表示:線、円、多角形、文字などを加える。