コンテンツにスキップ

Leaflet

出典: フリー百科事典『ウィキペディア(Wikipedia)』
Leaflet
作者 Volodymyr Agafonkin
初版 2011年5月
最新版
1.9.4 / 2023年5月18日 (2年前) (2023-05-18)
最新評価版
2.0.0-alpha.1 / 2025年8月16日 (3か月前) (2025-08-16)
リポジトリ github.com/Leaflet/Leaflet
プログラミング
言語
JavaScript
対応OS クロスプラットフォーム(Web)
サポート状況 開発継続中
種別 JavaScriptライブラリ
ライセンス BSD-2-Clause[1]
公式サイト leafletjs.com
テンプレートを表示

Leafletは、インタラクティブ地図のためのオープンソースJavaScriptライブラリである[2]GeoJSONなどの地理データを読み込み・スタイル付けし、タイルベースのWeb地図やインタラクティブなレイヤー(クリック時にポップアップを表示するマーカー等)を容易に扱える。

Leafletは2011年に初公開され[3]、軽量なコアと豊富なプラグインで機能拡張できる[4]。著名な採用例として、FoursquarePinterestFlickr米国地質調査所(USGS)などが挙げられている[5]

開発者はVolodymyr(Vladimir) Agafonkinで、2013年Mapboxへ参加した[6]

使用例

[編集]

Leafletの典型的な使い方としては、spanやdivなどのHTML要素にLeafletの"map"オブジェクトをバインドする。 そしてそのmapオブジェクトにレイヤーやマーカーを追加する。

 // "map" divに地図を作成し、指定した場所とズームで表示する
 var map = L.map('map').setView([51.505, -0.09], 13);
 
 // OpenStreetMapタイルレイヤーを追加する
 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);

変数Lを使ってLeafletライブラリそのものにアクセスできる。

機能

[編集]

Leafletは基本機能としてWMS(Web Map Service)レイヤー、GeoJSONレイヤー、ベクターグラフィックスレイヤー、タイルレイヤーに対応している。 プラグインを使うとそれ以外にも多くのレイヤーに対応できる。

Leafletの基本的な表示モデルは、他のWeb地図ライブラリと同様に、1個のベースマップとその上に表示される0個以上の半透明のオーバーレイ、0個以上のベクターオブジェクトからなる。

構成要素

[編集]

Leafletの主なオブジェクトのタイプは次の通りである: [7]

  • ラスタータイプ (TileLayer と ImageOverlay)
  • ベクタータイプ (Path, Polygon, Circle)
  • グループタイプ (LayerGroup, FeatureGroup, GeoJSON)
  • コントロール (Zoom, Layers, など)

他に様々なユーティリティクラスが存在する(地図投影のためのインターフェイスクラス、変形、DOMの操作など)。

GISフォーマットへの対応状況

[編集]

Leafletは少数のGIS標準フォーマットに対応しており、それ以外への対応はプラグインによって実現されている。

標準 対応状況
GeoJSON 良好。geoJson 関数により標準でサポートされている。
KML, CSV, WKT, TopoJSON, GPX Leaflet-Omnivore プラグインによりサポートされている。[8]
WMS TileLayer.WMSにより標準でサポートされている[9]
WFS英語版 未対応。ただしサードパーティによるプラグインは存在する[10]
GML 未対応。[11]

ブラウザ対応状況

[編集]

Leaflet 1.3.4(2018年現在)はデスクトップでChrome, Firefox, Safari 5+, Opera 12+, IE 7-11、モバイルにおいてSafari for iOS 7+、Android browser 2.2+, 3.1+, 4+、Chrome for mobile、Firefox for mobile、IE10+ for Win8 devicesをサポートしている。

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

[編集]

LeafletとOpenLayersはどちらもオープンソースでクライアントサイドのみのJavaScriptライブラリであるため、直接に比較できる。 Leafletの方がはるかに小さく、2015年の時点でLeafletのソースコードは7,000行、OpenLayersは230,000行である[12]。 ライブラリのファイルサイズもLeafletの方が小さい。 Leafletの方がコードベースが新しく、JavaScriptの最新の機能とHTML5、CSS3を利用している。しかし機能面ではOpenLayersにありLeafletにないものがある。 WFS(Web Feature Service)やEPSG 3785以外の投影法へのネイティブサポートなどである。

LeafletはプロプライエタリでクローズドソースのGoogle Maps APIやBing Maps APIとも比較できる。 Google Maps APIは高速、シンプル、柔軟性に富むが、Google Mapsサービスにアクセスするためにしか使えない。ただしGoogleのAPIのDataLayerを使うと外部データソースを表示できる [13]

歴史

[編集]

Leafletは2010年、当時Agafonkinが働いていた地図プロバイダCloudMadeのためのWeb地図API JavaScriptライブラリとして生まれた。 2011年5月、CloudMadeはLeafletの最初のリリースを発表した。それは改めて作り直されたものだったが、古いAPIコードの一部を流用したものだった[14]

  • 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対応と多くのユーザビリティ、ユーザエクスペリエンスの改善を含んでいた [15]

  • 0.6: 2013年6月26日

このリリースはAPIのメソッドとイベントの範囲を拡大し、GeoJSONの保存機能を追加した。これはMapboxの援助による2日間のコードスプリントで完成した [16]

  • 0.7: 2013年11月22日

このリリースはバグ修正にフォーカスし、リファクタリングと後方非互換性の可能性がまもなく来ることを公表した[17]

  • 1.0: Sep 27, 2016

このリリースは、v0.7.7 と比較し 400 を超える変更があった[18]。主な改善点は:

  • ライブラリ全般、特にベクターレイヤーのパフォーマンスの改善。
  • 鳥瞰アニメーション(カーブ状のズームとパン)。
  • 分数ズームレベルのサポート。
  • タイルロードのアルゴリズムの改善。点滅を減らした。
  • カスタム区画(pane)管理。複数のベクターレイヤー区画、差し込みベクターやタイルレイヤーを含む。
  • 標準でない投影法のサポートの改善。
  • アクセシビリティ機能の追加。
  • ドキュメントの改善。
  • 安定性の改善。

参考文献

[編集]
  1. ^ License - Leaflet”. GitHub. Leaflet. 2025年11月8日閲覧。
  2. ^ Leaflet - a JavaScript library for interactive maps”. leafletjs.com. 2025年11月8日閲覧。
  3. ^ Leaflet - a JavaScript library for interactive maps”. leafletjs.com. 2025年11月8日閲覧。
  4. ^ Leaflet Plugins”. leafletjs.com. 2025年11月8日閲覧。
  5. ^ Trusted by the best”. leafletjs.com. 2025年11月8日閲覧。
  6. ^ Leaflet 0.7 Release, MapBox and Plans for Future”. leafletjs.com (2013年11月18日). 2025年11月8日閲覧。
  7. ^ Leaflet API”. 2014年8月6日閲覧。
  8. ^ https://github.com/mapbox/leaflet-omnivore
  9. ^ Leaflet documentation”. 2014年8月6日閲覧。
  10. ^ https://github.com/Georepublic/leaflet-wfs
  11. ^ https://github.com/Leaflet/Leaflet/issues/547
  12. ^ OpenHub.net comparison between OpenLayers and Leaflet”. OpenHub.net. 2014年8月8日時点のオリジナルよりアーカイブ。2015年4月18日閲覧。
  13. ^ Data Layer - Google Maps Javascript API - Google Developers”. 2014年8月6日閲覧。
  14. ^ Announcing Leaflet: a Modern Open Source JavaScript Library for Interactive Maps”. CloudMade (2011年5月13日). 2014年8月7日閲覧。
  15. ^ Leaflet 0.5 released”. 2014年8月6日閲覧。
  16. ^ Leaflet 0.6 Released, Code Sprint in DC with MapBox”. 2014年8月6日閲覧。
  17. ^ Leaflet 0.7 Release, MapBox and Plans for Future”. 2014年8月6日閲覧。
  18. ^ Meet Leaflet 1.0.”. 2018年2月4日閲覧。

外部リンク

[編集]