Leaflet

`など）にLeafletの`map`オブジェクトをバインドします。その後、この`map`オブジェクトにレイヤーやマーカーを追加することで、地図を表示します。

`L`という変数を介してLeafletライブラリ自体にアクセスします。

主な機能

Leafletは、WMS（Web Map Service）レイヤー、Geoレイヤー、ベクターグラフィックスレイヤー、タイルレイヤーを基本的な機能としてサポートしています。プラグインを利用すれば、さらに多くのレイヤータイプにも対応可能です。

Leafletの表示モデルは、他のWeb地図ライブラリと同様に、1つのベースマップと、その上に重ねて表示される複数の半透明のオーバーレイ、そしてベクターオブジェクトで構成されます。

構成要素

Leafletの主なオブジェクトタイプは以下の通りです。

ラスタータイプ： `TileLayer`, `ImageOverlay`
ベクタータイプ： `Path`, `Polygon`, `Circle`
グループタイプ： `LayerGroup`, `FeatureGroup`, `Geo`
コントロール： `Zoom`, `Layers` など

その他、地図投影、変換、DOM操作など、様々なユーティリティクラスも提供されています。

GISフォーマットのサポート

Leafletは、基本的なGISフォーマットに対応しており、それ以外のフォーマットについてはプラグインを利用して対応できます。

ブラウザ対応

Leaflet 1.3.4（2018年時点）は、デスクトップブラウザ（Chrome、Firefox、Safari 5+、Opera 12+、IE 7-11）と、モバイルブラウザ（iOS 7+のSafari、Android Browser 2.2+, 3.1+, 4+、モバイル版Chrome、モバイル版Firefox、Win8デバイスのIE10+）をサポートしています。

他の地図ライブラリとの比較

LeafletとOpenLayersはどちらもオープンソースのクライアントサイドJavaScriptライブラリであり、直接比較されることが多いです。LeafletはOpenLayersと比較して非常に軽量で、2015年時点でのソースコードの行数はLeafletが約7,000行、OpenLayersが約230,000行です。ライブラリのファイルサイズもLeafletの方が小さいです。

Leafletは新しいコードベースで、最新のJavaScript機能とHTML5、CSS3を活用しています。一方、機能面ではOpenLayersにしかないものもあります（WFSやEPSG 3785以外の投影法のネイティブサポートなど）。

Leafletは、プロプライエタリでクローズドソースのGoogle Maps APIやBing Maps APIとも比較されます。Google Maps APIは高速で柔軟性に優れていますが、Google Mapsサービスのみに限定されます。ただし、GoogleのAPIのDataLayerを使用することで、外部データソースを表示できます。

歴史

Leafletは、2010年にVladimir Agafonkin氏が当時所属していた地図プロバイダのCloudMadeのWeb地図API JavaScriptライブラリとして開発されました。

2011年5月に、CloudMadeはLeafletの最初のリリースを発表しました。これは再設計されたものでしたが、古いAPIコードの一部が流用されていました。

以下は、主なバージョンリリース履歴です。

0.1: 2011年5月17日
0.2: 2011年6月18日
0.3: 2012年2月14日
0.4: 2012年7月30日
0.5: 2013年1月17日 (Retina対応とユーザビリティ改善)
0.6: 2013年6月26日 (APIの拡充、Geoの保存機能追加)
0.7: 2013年11月22日 (バグ修正、リファクタリング)
1.0: 2016年9月27日 (パフォーマンス改善、アニメーション、分数ズームレベルサポート、カスタム区画管理、アクセシビリティ機能追加など大幅な改善)

参考文献

公式ウェブサイト
OpenStreetMap Wiki
* Leaflet Tutorials