Leafletの使い方
Leafletの概要
Leafletは、Webのブラウザ上で地図を表示するためのJavaScriptのライブラリです。
全国ロケ地ガイドでは、ロケ地マップにLeafletを利用しています。
その開発作業で得たノウハウを、私の知識の範囲内でまとめ、Leafletの使い方や、カスタマイズ方法として紹介しています。
このWebページは、ロケ地マップの作成時に利用したサンプルプログラムを使って解説していますので、Leaflet入門用のチュートリアルとして利用できます。
あくまで、私が利用している機能の事例紹介ですので、すべての機能を紹介しているわけではありません。
また、Leafletは、プラグインを利用することで、簡単に機能を増やすことができますが、自作プラグイン以外は使っていません。
詳しく知りたい方は、オフィシャルページに、英語版ですが、チュートリアルやAPIリファレンスがありますので、そちらを参考にしてください。
Leafletを使った地図表示のサンプルプログラム
-
基本的な地図表示
Leafletを使って地理院地図を表示するだけの基本的なプログラムです。
地図の移動や拡大縮小などは、すべてLeafletが行ってくれます。
-
地図にボタンを表示
Leafletを使った地図に、HTMLのボタンを重ねて表示する基本的なプログラムです。
Leafletの機能説明ではありませんが、Letfletを利用する場合の知識として必要です。
-
複数の地図の切替表示
Leafletを使って地理院地図やOpenStreetMapや航空写真など、いろいろな地図を切り替えて表示するサンプルプログラムです。
地図の切替は、Leafletが行ってくれます。
-
複数の地図の切替と透過表示
（自作プラグインを利用）
標準のマップ切替コントローラを透過度設定付きのコントローラにカスタマイズしてみました。
クラス名を変えるだけで、透過度設定が可能になります。
-
地図の中央に十字カーソルを表示
地図の中央に十字カーソルを表示するプログラムです。
地図を表示しているタグの中央に十字カーソルを表示しているだけで、Leafletの機能は使っていません。
-
URL欄に地図の位置情報を反映
（自作プラグインを利用）
自作プラグインを読み込むだけで、地図の中央位置の緯度経度とズームレベルをURL欄に反映するプログラムです。
表示されているURLをコピーして貼り付けると、その場所の地図を表示することができます。
-
汎用的な地図表示
（自作プラグインを複数利用）
今までのサンプルプログラムを組み合わせた、Leafletを使った汎用的な地図表示プログラムです。
地図の移動・拡大縮小や地図切替や十字カーソルの表示やURL欄への表示などの機能が、すべて組み込まれていますので、この地図をベースに地図アプリを作成することができます。
-
地図の2画面連動表示
（各種プラグインを複数利用）
Leafletを使った汎用的な地図表示プログラムを2画面化し、連動表示するサンプルプログラムです。
Leafletのサンプルプログラム（入門用チュートリアル）
Leafletのサンプルプログラムには、地図を使ったサンプルプログラムと、CRS座標系を使ったサンプルプログラムがあります。CRS座標系とは、CADの平面図など独自の座標系に対応するための座標系で、地図の緯度経度と同等に扱えますので、座標系が異なるサンプルプログラムも参考にすることができます。
Leafletの地図を使ったサンプルプログラム
-
地図上にマーカを表示
地図上にマーカを表示するプログラムです。
マーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
-
地図上に円マーカを表示
地図上に円マーカを表示するプログラムです。
円マーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
-
地図上にCSSマーカを表示
地図上にCSSマーカを表示するプログラムです。
CSSマーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
-
地図上に文字列を表示
地図上に文字列を表示するプログラムです。
文字列マーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
-
地図上のマーカにIDを設定
地図上のマーカにIDを設定するプログラムです。 マーカをクリックすると、設定したIDからデータを参照し、ポップアップを表示し、詳細情報や写真を表示しています。
-
地図上に画像を重ね合わせて表示
Leafletの地図上に、旧版の地図を重ね合わせて表示するサンプルプログラムです。
-
地図上に線や円などのベクタデータを表示
Leafletの地図上に、線や円などのベクタデータを表示するサンプルプログラムです。
-
地図上に矢印のSVGデータを表示
Leafletの地図上に、矢印のSVGデータを表示するサンプルプログラムです。
LeafletのCRS座標系を使ったサンプルプログラム
Leaflet対応ウィンドウマネージャー
-
JavaScriptのペインウィンドウマネージャの使い方
ペインウィンドウマネージャは、Webのブラウザ上で画面分割型のウィンドウを表示するためのJavaScriptのライブラリです。
Leafletと一緒に利用することを前提に作成していますが、LeafletのないJavascriptのみの環境でも動作しますし、jQueryなどのプラグインも不要です。
このページは、ウィンドウマネージャの使い方についての解説ページです。
-
ウィンドウマネージャーを利用したサンプルプログラム
（自作プラグインを利用）
ペインウィンドウマネージャーに、Leafletの地図を組み込んだサンプルプログラムです。
このサンプルプログラムをベースに、全国ロケ地ガイドのロケ地マップを作成しました。
全国ロケ地ガイドでは「妻、小学生になる。 ロケ地マップ」などとして、提供しています。
Leafletの作者について
Leafletの作者は、ウクライナの首都キーウに住んでいるウラジミール氏です。
ロシアのウクライナ侵攻により、ウラジミール氏はウクライナから脱出し、支援を求めています。
そこで、Leafletの使い方の解説ページを作成することで、支援につながればと思い、このページを作成し公開しています。
最新の情報は、Leaflet公式twitterを見てください。
このページが、少しでもLeafletを学ぶ人の参考になり、Leafletの作者のウラジミール氏やウクライナの人々の支援にも繋がることを期待します。
Leaflet関連の参考サイト