Leafletの使い方

Leafletの概要

　Leafletは、Webのブラウザ上で地図を表示するためのJavaScriptのライブラリです。
　全国風景ガイドや全国ロケ地ガイドでは、地図の表示にLeafletを利用しています。 その開発作業で得たノウハウを、私の知識の範囲内でまとめ、Leafletの使い方や、カスタマイズ方法として紹介しています。
　このWebページは、全国風景ガイドや全国ロケ地ガイドの作成時に利用したサンプルプログラムを使って解説していますので、Leaflet入門用のチュートリアルとして利用できます。 あくまで、私が利用している機能の事例紹介ですので、すべての機能を紹介しているわけではありません。 また、Leafletは、プラグインを利用することで、簡単に機能を増やすことができますが、自作プラグイン以外は使っていません。
　詳しく知りたい方は、オフィシャルページに、英語版ですが、チュートリアルやAPIリファレンスがありますので、そちらを参考にしてください。

• Leaflet (English)
• Leafletチュートリアル (English)
• Leaflet API仕様(English)

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のCRS座標系を使って、CADの平面図の座標系で表示するサンプルプログラムです。 緯度経度ではなく、m単位の直交座標系で表示します。
• 平面図の座標系で座標値を取得
  LeafletのCRS座標系を使って、CADの平面図の座標系で座標値を取得するサンプルプログラムです。 緯度経度ではなく、m単位の直交座標系の座標値を取得します。
• 平面図の座標系でグリッド表示
  LeafletのCRS座標系を使って、CADの平面図の座標系でグリッドを表示するサンプルプログラムです。
• 平面図上に複数の画像を重ね合わせて表示
  Leafletの平面図上に、複数の画像を重ね合わせて表示するサンプルプログラムです。
• 平面図上に線や円などのベクタデータを表示
  Leafletの平面図上に、線や円などのベクタデータを表示するサンプルプログラムです。
• 平面図上に矢印のSVGデータを表示
  Leafletの平面図上に、矢印のSVGデータを表示するサンプルプログラムです。
• 平面図上にキャンバスを表示 （自作プラグインを利用）
  Leafletの平面図上に、キャンバスを表示するサンプルプログラムです。

Leaflet関連の参考サイト

• Leaflet関連の参考サイト
  Leafletの参考サイトや、地図関連の参考サイトなどを紹介しています。