リーフレット（ソフトウェア）

リーフレット

原作者	ヴォロディミル・アガフォンキン
初回リリース	2011年5月13日 ( 2011-05-13 )
安定リリース	1.9.4 [1] / 2023年5月18日; 16か月前 ( 2023年5月18日)
リポジトリ	github.com/リーフレット/リーフレット
書かれた	JavaScript
プラットフォーム	ブラウザのサポートを参照してください
タイプ	JavaScript ライブラリ
ライセンス	BSD-2条項[2]
Webサイト	リーフレット

Leaflet は、Web マッピングアプリケーションの構築に使用されるJavaScript ライブラリです。GIS の経験がない開発者でも、パブリック サーバーでホストされているタイル化された Web マップを、オプションのタイル化されたオーバーレイとともに表示できます。GeoJSON ファイルからフィーチャデータを読み込み、スタイルを設定したり、クリックするとポップアップが表示されるマーカーなどのインタラクティブなレイヤーを作成したり できます。

2011年に初めてリリースされ、^[3] HTML5とCSS3をサポートし、ほとんどのモバイルおよびデスクトッププラットフォームをサポートしています。ユーザーには、FourSquare、Pinterest、Flickr、USGSなどがあります。

Leafletはオープンソースであり、2013年にMapboxに入社したVolodymyr Agafonkinによって開発されました。 ^[4]

Leaflet は、インタラクティブ マップを作成するためのオープンソースの JavaScript ベースのライブラリです。2011 年にウクライナ人の Volodymyr Agafonkin によって作成されました。^[5]開発者がインタラクティブ マップを作成するために必要な幅広い機能をカバーしています。Chrome、Firefox、Safari 5+、Opera 12+、Internet Explorer 9 以降のバージョン、Edge など、多くのブラウザーでサポートされています。^[6]多くのサードパーティ プラグインをサポートしているため、タイルや画像のレイヤー化、オーバーレイ表示、さまざまなインタラクションなどのさまざまな機能をマップに統合できます。これらのプラグインは、開発者が優れたマップを作成するのに役立ちます。^[7]

Leaflet は、意図したとおり軽量 (JS が約 42KB) ^[8]であり、維持に協力してくれる素晴らしい貢献者のコミュニティがあります。Leaflet はシンプルに構築されており、読みやすくわかりやすいソースコードと豊富な API ドキュメントが特長です。Leaflet はまだ新しいため、サードパーティのプラグインを実装するためのステップバイステップのガイドなど、詳細なソースコード例を提供することにさらに力を入れることができます。Leaflet のリソースのほとんどは GitHub にドッキングされており、簡単にダウンロードして好きなように変更できます。ソースコードは完全にオープンソースです。^[9]

これまでにLeafletの3つのバージョンがリリースされており、最も安定したバージョン（Leaflet 1.9.4）は2023年5月18日にリリースされました。以前のバージョン（Leaflet 1.8.0）は2022年4月18日にリリースされました。新しいバージョン（Leaflet 2.0）が開発中であり、リリース日はまだ設定されていません。^[10]

Leaflet の一般的な使用法は、Leaflet の「マップ」要素をdivなどの HTML 要素にバインドすることです。次に、レイヤーとマーカーがマップ要素に追加されます。

< html > 
< head > 
< title > Leafletマップの例< /title> <!-- Leaflet CSSファイルへのリンク--> < link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <!-- Leaflet JavaScriptファイルへのリンク--> < script src = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" >< /script> < style > # map { height : 250 px ; width : 400 px ; border : 1 px solid gray ; } < /style> < /head> < body > < div id = "map" >< /div> < script > // マップを初期化しますvar map = L . map ( 'map' ). setView ([ 51.505 , - 0.09 ], 13 );    
        
     
        
   
  
     
       
	   
	     
    
  


   
  
    
         

    // タイル レイヤーを追加します (URL を変更することで、別のマップ スタイルを選択できます) 
L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { attribution : '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors' }). addTo ( map );     
		 
	

    // 特定の半径と色で円オーバーレイを追加します
。var circle = L .circle ([ 51.508 , - 0.11 ], { color : 'red' , radius : 500 // 半径（メートル） }). addTo ( map );         
       
        
    

    // ポップアップ付きのマーカーを追加します
var marker = L . marker ([ 51.5 , - 0.09 ]). addTo ( map ) . bindPopup ( '<b>Hello World!</b><br/> 私はポップアップです。' );        
      

  < /script> 
< /body> 
< /html>

このコードサンプルでは、​​変数 を介して Leaflet ライブラリ自体にアクセスできますL。

Leaflet は、Web マップ サービス(WMS) レイヤー、GeoJSONレイヤー、ベクターレイヤー、タイル レイヤーをネイティブにサポートします。他の多くの種類のレイヤーは、プラグインを介してサポートされます。

他の Web マップ ライブラリと同様に、Leaflet によって実装される基本的な表示モデルは、1 つのベースマップと、0 個以上の半透明オーバーレイで構成され、その上に 0 個以上のベクター オブジェクトが表示されます。

主要なLeafletオブジェクトタイプは以下のとおりです。^[11]

• ラスター タイプ (TileLayer および ImageOverlay)
• ベクター型（パス、ポリゴン、円などの特定の型）
• グループ化されたタイプ (LayerGroup、FeatureGroup、GeoJSON)
• コントロール（ズーム、レイヤーなど）

投影、変換を管理したり、 DOMと対話したりするためのインターフェースなど、さまざまなユーティリティ クラスもあります。

Leaflet は複数の GIS 標準形式をコアでサポートしており、その他の形式はプラグインでサポートされています。

Leaflet 0.7はChrome、Firefox、Safari 5+、Opera 12+、IE 7～11をサポートしています。^[17]

Leaflet の onEachFeature は、たとえば geojson データを扱うときに非常に便利です。この関数には、「feature」と「layer」という 2 つのパラメータがあります。「feature」を使用すると geojson 内の各オブジェクトにアクセスでき、「layer」を使用するとポップアップやツールチップなどを追加できます。

以下に JavaScript の例を示します。

 let geoJson = L.geoJSON ( geoJsonData , { weight : 2 , onEachFeature : getFeature , style : getStyle } ) . addTo ( map ) ; const getFeature = ( feature , layer ) = > { if ( ! feature.properties.name ) return layer.bindTooltip ( feature.properties.cityName ) ; layer.bindPopup ( `             <ul> <li>                名前: $ { feature.properties.cityName } </li>                 <li>人口: $ { feature.properties.population } </li> </ul> ` )​​​​​​​            ​            ​​    
         
         
    
    
        
          
         
        
            





    

fetch() などの Promise を使用するために、getFeature 関数に "async" キーワードを追加することもできます。geojson の各オブジェクトのプロパティを利用してカスタマイズされた jsonqueries を作成し、たとえば都市固有の情報を取得して、layer.bindTooltip、layer.bindPopup などを使用して表示することができます。

LeafletはOpenLayersと直接比較できます。どちらもオープンソースでクライアント側のみのJavaScriptライブラリです。ライブラリ全体のコード行数は約7,000行と、OpenLayersの230,000行（2015年現在）に比べてはるかに小さくなっています。^[18]モジュール構造のため、OpenLayersよりもコードフットプリントが小さくなっています（約123KB ^[19]対 423KB ^[20]）。コードベースはより新しく、JavaScriptの最新機能に加えてHTML5とCSS3を活用しています。ただし、LeafletにはWeb Feature Service（WFS）^{[21]やGoogle} Web Mercator （EPSG 3857）以外の投影法のネイティブサポートなど、OpenLayersがサポートする機能が欠けています。^[22]

また、これは独自仕様のクローズドソースのGoogle Maps API (2005 年にデビュー) や Bing Maps API にも匹敵します。どちらも、ジオコーディング、ルーティング、検索、Google Earthなどの機能との統合などのサービスを提供する重要なサーバー側コンポーネントを組み込んでいます。^[要出典] Google Maps API はスピードとシンプルさを提供しますが、柔軟性に欠け、Google Maps サービスへのアクセスにしか使用できません。ただし、Google の API の新しい DataLayer 部分では、外部データ ソースを表示できます。^[23]

Leafletは2010年に「Web Maps API」として誕生しました。これは、当時アガフォンキンが働いていたCloudMadeマッピングプロバイダー向けのJavaScriptライブラリです。2011年5月、CloudMadeは、古いAPIコードの一部を使用してゼロから構築されたLeafletの最初のリリースを発表しました。^[24]

• 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サポートが導入され、多くの使いやすさとユーザーエクスペリエンスが向上しました。^[25]
• 0.6: 2013年6月26日
  • このリリースでは、APIのメソッドとイベントの範囲が拡張され、使いやすさが向上し、GeoJSONの保存が追加されました。これは、Mapboxの支援を受けた2日間のコードスプリントで完了しました。^[26]
• 0.7: 2013年11月22日
  • このリリースではバグ修正に重点が置かれ、リファクタリングと潜在的な下位互換性の修正が間もなく行われることが発表されました。^[27]
• 1.0: 2016年9月27日
  • このリリースにはv0.7.7と比較して400以上の変更が含まれています。^[28]
    • 特にライブラリとベクター レイヤーのあらゆる側面でパフォーマンスが向上しました。
    • フライオーバーアニメーション（曲線でのズームとパン）。
    • 分数ズーム レベルのサポート。
    • ちらつきが少なくなり、タイル読み込みアルゴリズムが改善されました。
    • カスタム ペイン管理 (複数のベクター レイヤー ペイン、インターリーブ ベクターおよびタイル レイヤーを含む)。
    • 非標準投影のサポートが強化されました。
    • より多くのアクセシビリティ機能。
    • ドキュメントが改善されました。
    • 安定性の向上。
• 1.1: 2017年6月27日
  • このリリースでは、ビデオ オーバーレイが追加され、ECMAScript 6 モジュールに移行します。
• 1.2: 2017年10月25日
• 1.3: 2018年1月15日
• 1.3.2: 2018年7月17日
• 1.3.3: 2018年7月18日
• 1.3.4: 2018年8月21日
• 1.4.0: 2018年12月30日
• 1.5.0 および 1.5.1 : 2019 年 5 月 8 日
• 1.6.0: 2019年11月17日
• 1.7.1 : 2020年9月4日
• 1.8 : 2022年4月18日^[29]
• 1.9 : 2022年9月22日^[30]

2022年3月、開発者はLeafletのウェブサイトでロシアのウクライナ侵攻に対する行動を促した。 ^[31]

• 公式サイト
• リーフレットチュートリアル
• Leaflet TileLayer のマップ
• オープンストリートマップ:リーフレット

• Leaflet で作成された無料の Web アプリ:embedMap