leafletとは？わかりやすく解説

Leaflet
作者	Vladimir Agafonkin
初版	2011年5月13日
最新版	1.9.4 - 2023年5月18日 (21か月前)
リポジトリ	github.com/Leaflet/Leaflet;
プログラミング; 言語	JavaScript
プラットフォーム	ブラウザ対応状況を参照
サポート状況	開発中
種別	JavaScriptライブラリ
ライセンス	BSD-2-Clause
公式サイト	leafletjs.com
	テンプレートを表示

Leafletは広く使われているWeb地図のためのJavaScriptライブラリである。 2011年に最初にリリースされた^[3]。モバイルとデスクトップのプラットフォームのほとんどに対応し、HTML5とCSS3に対応している。 OpenLayersやGoogle Maps API（英語版）とともに最も人気のあるJavaScript地図ライブラリの一つであり、FourSquare、Pinterest、Flickrなどの有名なサイトで使われている。

Leafletを使うと、GISの知識のない開発者でも容易にタイルベースのWeb地図を表示できる。またGeoJSONから地物データを読み込んでスタイリングしたり、インタラクティブなレイヤーを作ることができる（クリックするとポップアップが表示されるマーカーなど）。

LeafletはVladimir Agafonkinによって開発されている。Vladimir Agafonkinは2013年からMapboxに加わっている ^[4]。

使用例

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の主なオブジェクトのタイプは次の通りである: ^[5]

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

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

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

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

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

ブラウザ対応状況

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行である^[10]。ライブラリのファイルサイズも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を使うと外部データソースを表示できる ^[11]。

歴史

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

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

0.6: 2013年6月26日

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

0.7: 2013年11月22日

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

1.0: Sep 27, 2016

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

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

参考文献

[脚注の使い方]

^ "v1.9.4 Latest"; 閲覧日: 2023年5月20日; 出版日: 2023年5月18日.
^ “License - Leaflet”. Leaflet. 12 February 2015閲覧。
^ Lovelace, Robin. “Testing web map APIs - Google vs OpenLayers vs Leaflet”. 2014年8月6日閲覧。
^ Macwright, Tom (2014年8月6日). “Leaflet Creator Vladimir Agafonkin Joins MapBox”. Mapbox. 2014年8月6日閲覧。
^ “Leaflet API”. 2014年8月6日閲覧。
^ https://github.com/mapbox/leaflet-omnivore
^ “Leaflet documentation”. 2014年8月6日閲覧。
^ https://github.com/Georepublic/leaflet-wfs
^ https://github.com/Leaflet/Leaflet/issues/547
^ “OpenHub.net comparison between OpenLayers and Leaflet”. OpenHub.net. 2014年8月8日時点のオリジナルよりアーカイブ。2015年4月18日閲覧。
^ “Data Layer - Google Maps Javascript API - Google Developers”. 2014年8月6日閲覧。
^ “Announcing Leaflet: a Modern Open Source JavaScript Library for Interactive Maps”. CloudMade (2011年5月13日). 2014年8月7日閲覧。
^ “Leaflet 0.5 released”. 2014年8月6日閲覧。
^ “Leaflet 0.6 Released, Code Sprint in DC with MapBox”. 2014年8月6日閲覧。
^ “Leaflet 0.7 Release, MapBox and Plans for Future”. 2014年8月6日閲覧。
^ “Meet Leaflet 1.0.”. 2018年2月4日閲覧。

外部リンク

[wikidata-4d6568eef89822c3fca9ef797ecf00ae8b5046b9-v3-1] "v1.9.4 Latest"; 閲覧日: 2023年5月20日; 出版日: 2023年5月18日.

[2] “License - Leaflet”. Leaflet. 12 February 2015閲覧。

[3] Lovelace, Robin. “Testing web map APIs - Google vs OpenLayers vs Leaflet”. 2014年8月6日閲覧。

[4] Macwright, Tom (2014年8月6日). “Leaflet Creator Vladimir Agafonkin Joins MapBox”. Mapbox. 2014年8月6日閲覧。

[5] “Leaflet API”. 2014年8月6日閲覧。

[6] ttps://github.com/mapbox/leaflet-omnivore

[7] “Leaflet documentation”. 2014年8月6日閲覧。

[8] ttps://github.com/Georepublic/leaflet-wfs

[9] ttps://github.com/Leaflet/Leaflet/issues/547

[10] “OpenHub.net comparison between OpenLayers and Leaflet”. OpenHub.net. 2014年8月8日時点のオリジナルよりアーカイブ。2015年4月18日閲覧。

[11] “Data Layer - Google Maps Javascript API - Google Developers”. 2014年8月6日閲覧。

[12] “Announcing Leaflet: a Modern Open Source JavaScript Library for Interactive Maps”. CloudMade (2011年5月13日). 2014年8月7日閲覧。

[13] “Leaflet 0.5 released”. 2014年8月6日閲覧。

[14] “Leaflet 0.6 Released, Code Sprint in DC with MapBox”. 2014年8月6日閲覧。

[15] “Leaflet 0.7 Release, MapBox and Plans for Future”. 2014年8月6日閲覧。

[16] “Meet Leaflet 1.0.”. 2018年2月4日閲覧。

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]


	(C)Shogakukan Inc. 株式会社小学館
	Copyright (C) 2025 K'sBookshelf All Rights Reserved.
	(c)2025 The National Institute for Japanese Language
	All text is available under the terms of the GNU Free Documentation License. この記事は、ウィキペディアのLeaflet (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。

leafletとは？わかりやすく解説

リーフレット【leaflet】

リーフレット【leaflet】

リーフレット leaflet

Leaflet

使用例

機能

構成要素

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

ブラウザ対応状況

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

歴史

参考文献

外部リンク

「leaflet」の関連用語

leafletとは？ わかりやすく解説

リーフレット【leaflet】

リーフレット 【leaflet】

リーフレット leaflet

Leaflet

使用例

機能

構成要素

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

ブラウザ対応状況

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

歴史

参考文献

外部リンク

「leaflet」の関連用語

leafletとは？わかりやすく解説

リーフレット【leaflet】