Leaflet 0.4-インタラクティブマップ用のオープンJSライブラリの新しいバージョン

前バージョンのリリースから5か月半の開発の後、最終的にLeaflet 0.4をご紹介します。これは、デスクトップブラウザとモバイルデバイスで同様に機能するインタラクティブマップ用の軽量JavaScriptライブラリの新しいバージョンです。



33人の開発者が手がけたこのリリースは、 ドキュメントの大規模な更新、 公式ブログおよびプラグインページの立ち上げとともに、よりシンプルで便利なAPIと膨大な数の改善と修正をもたらします 。 改善点を順番に見てみましょう。

簡素化されたAPI

以下の変更（および他の多くの変更）は、 忘れられていたHabréの批判的なレビューによって促されました 。 本当にありがとうございます！



Leaflet 0.4には、以前のアプローチとの下位互換性を維持しながら（jQueryスタイルで）よりシンプルで簡潔なコードを記述できるようにするいくつかのAPI拡張機能が含まれています（両方のスタイルを混在させることができます）。

L.marker([51.5, -0.09]) .addTo(map) .bindPopup('Hello world!') .openPopup();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、メソッドはLatLng



、 LatLngBounds



、 Point



およびBounds



オブジェクトを単純な配列の形式で受け入れるようにLatLng



ました-現在、それらを明示的に作成する必要はありません。

 map.panTo([50, 30]); //   , : map.panTo(new L.LatLng(50, 30));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

第二に、 addLayer



、 addControl



、 openPopup



などのMap



クラスのメソッドは、対応するものを取得しました：

 marker.addTo(map); //  map.addLayer(marker) control.addTo(map); // map.addControl(control) popup.openOn(map); // map.openPopup(popup)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Leafletでは、明示的な値を返さないメソッドはすべてオブジェクト自体（ this



）を返すため、「チェーン内」でメソッドを呼び出す方が便利です。



第三に、Leafletの各クラスには独自のクラスファクトリーがあり（同じ名前で、小文字で始まる）、 new



オペレーターなしでオブジェクトを作成できます（多くのチェーン呼び出しを含むコードがより美しくなります）。

 L.map('map').fitWorld(); //   , : (new L.Map('map')).fitWorld();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新機能

拡張ズームアニメーション

以前のバージョンのマーカー、ポップアップ、ベクターオブジェクト、および画像のレイヤーはズーム中に非表示でしたが、現在はタイルで美しくスムーズにアニメーション化されています。 マップ上に数百のマーカーがあり、アニメーションが非常にスムーズに進まない場合（たとえば、Chromeの場合は1000以上）、 markerZoomAnimation



マップmarkerZoomAnimation



で無効にすることができmarkerZoomAnimation



が、この場合はマーカークラスタリングプラグインを使用することをお勧めします。

キーボード制御

リーフレットカードの可用性は、デフォルトで有効になっている新しいキーボード対応機能により著しく改善されました。 矢印キーと+/-



押してマップを制御できます。 ところで、非常に便利です-やってみてください！

慣性効果

マウスまたは指でカードをドラッグすると、カードを引いたのと同じ方向にゆっくりと減速し続ける慣性効果により、より快適になりました。 この効果は設定するのに十分な柔軟性があり、慣性がトリガーされる最大初期速度、減速、感度のしきい値を制御できます。

Android 4のフィンガースケーリング

Leafletの以前のバージョンでは、マップでズームイン/ズームアウトするジェスチャーはiOSでのみ機能し、Androidユーザーはボタンのあるコンテンツである必要がありました。 これで、ジェスチャーを使用して、Android 4以降、組み込みブラウザーだけでなく、ChromeとFirefox for Androidでも地図の縮尺を変更できます。

スケールインジケータ

メトリックおよび/または帝国の測定システムの現在のスケールの簡単なインジケータ。 いつものように、外観はCSSを使用して完全に変更できます。

ポリラインとポリゴンの編集

シンプルで直感的なインターフェイスを使用して、ポリラインとポリゴンを編集できます。 確かに、将来のバージョンのこの機能は、 Leaflet.draw図形を描画するための別のプラグインに転送される可能性が高いです。

マーカー用の軽量divアイコン

画像のマーカーの従来のアイコンに加えて、軽量のアイコンを使用できるようになりました。これは、特定のHTMLが内部CSSで定型化された通常のdiv



です。 たとえば、現在は編集（頂点の四角形）およびクラスタリングのプラグイン （カラークラスター）に使用されています。

 L.marker([50.505, 30.57], { icon: L.divIcon({className: 'my-div-icon'}) }).addTo(map);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

長方形

地図上に長方形のエリアを作成する簡単な方法。 同じことがポリゴンを使用して以前に実行できましたが、より便利です。

 L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

APIの機能強化

GeoJSON API

GeoJSONレイヤーを表示するAPIが大幅に改善され、より柔軟で使いやすくなりました。 更新されたAPIは、サイトのトレーニング記事を使用して見つけることができます。 確かに、これらの変更には後方互換性がないため、古いコードを更新する必要があります。

アイコンAPI

アイコンAPIは改善および簡素化されていますが、変更には下位互換性もありません。 現在の表示は、対応するトレーニング記事で 、またはすぐにドキュメントで確認できます 。

制御API

独自のコントロールの作成がはるかに簡単になりました-例はドキュメントで見ることができます 。

イベント処理の改善

on



およびoff



イベントを操作するメソッドは、同じ行で複数のタイプのイベントを受け入れることができます（タイプ間にスペースがあります）。

 map.on('click dblclick moveend', doStuff);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベント/リスナーのペアを含むオブジェクトを転送することもできます。

 marker.on({ click: onMarkerClick, dragend: onMarkerDragEnd });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、イベントの名前を除いてoff



メソッドに何も渡されない場合、オブジェクトはこのイベントにサブスクライブしたすべてのリスナーをサブスクライブ解除します。

 map.off('click');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その他の改善

Leaflet 0.4には、さまざまなクラスの30を超える新しいメソッド、オプション、イベントが含まれており、ライブラリがより完全で強力になります。 完全なリストを見ることができます。

パフォーマンスと使いやすさの強化

新しいバージョンには、リーフレットをさらに高速にするいくつかの改善が含まれています。

• マップのドラッグアンドドロップ（およびそのサイズの変更）の速度が改善されました（これの基礎となるいくつかのトリックについて、Habréの別の記事に書きたいと思います）
• Canvasで描画されたベクターレイヤーの追加と更新（たとえば、Android 2の場合）がはるかに高速になり始めました（独立した変更の大規模なバンドルにより、画面の再描画が1回のみになりました）
• モバイルコントロールの影は、パフォーマンスを向上させるために通常の境界線に置き換えられました。
• iOSでマップをドラッグした後、ベクターレイヤーがちらつきなくなりました

さらに、いくつかの使いやすさが改善されました。

• カーソルがマーカー上にある場合でも、マップのドラッグが機能するようになりました（多くのマーカーがあるマップで役立ちます）
• ポップアップビューの改善
• タイルレイヤーにdetectRetina
  
  
  
  オプションが追加されました。これにより、網膜上のタイルの解像度が2倍になります（ Habrの悪名高いMithgolによって実装されます）

訂正

Leaflet 0.4には、サポートされているすべてのブラウザーとプラットフォーム間でライブラリをより安定して信頼性の高いものにする約45の修正が含まれています。 私が特に注意したい修正：いくつかのまれなケースでは、ズーム後のカードの消失につながったiOSでの愚かな不具合。 IE10のアイドルズーム。 ページのヘッダーに厳密なXHTMLコンテンツタイプが指定されている場合のカードの破損。 position: fixed



れた要素内のマップでズームが正しく機能しない。 ここに修正の完全なリストがあります 。

前のバージョンからの更新

上記のGeoJSONおよびIconの変更に加えて、以前のバージョンから0.4にアップグレードする場合、 互換性のない可能性のある変更の短いリストを理解することは価値があります （古いコードを修正するのに数分以上かかることはほとんどありません）。



新しいバージョンをダウンロードしたり、CDNのライブラリへのリンクを取得したり、ダウンロードページのソースコードから独自のアセンブリの手順を読んだりできます 。

コード統計

私は図書館を可能な限り軽く保つことに引き続きコミットしています。 以下に、新しいバージョンの統計を示します。

• JavaScript：圧縮形式で26.7 KB（縮小で102 KB、ソースで176 KB、7578行のコード）
• CSS：圧縮形式で1.8 KB（ソースで8 KB、377行のコード）
• 画像：10 KB（5 png画像）

ドキュメントの更新

それまで、 リーフレットのドキュメントは不完全であり、常に最新の状態に保たれていませんでした。 このリリースでは、ドキュメントを完全で適切な100％の状態にするために多大な労力が費やされました。 残りのすべてのクラス、メソッド、プロパティ、オプション、およびイベントは慎重に文書化され、多数のコードサンプルが添付されました。 今後、ドキュメントは完全な状態に保たれます。



さらに、ドキュメントページのデザイン（色、フォント、インデント、ハイフネーション、列の幅）が大幅に改善され、ページを読みやすく読みやすくするために多くの詳細が作成されました。

プラグインページ

Leaflet Webサイトには、多くの興味深い機能を備えたライブラリを拡張し、サードパーティサービスとの統合を支援するサードパーティプラグインのリストを含むページがついにあります。



個別に言及したいプラグインの1つはLeaflet.markerclusterです 。現時点では、さまざまなAPIマップのソリューションで見たクラスターマーカーに最適なプラグインです。 美しく、高速で、クラスターのスムーズなアニメーション、スケールの最後のレベル（Google Earthのスタイル）のマーカーのクラスターのスマートソリューションが含まれています。マウスホバーによって特定のクラスターで覆われた領域を強調表示でき、モバイルデバイスで適切に機能し、柔軟性に優れています。 必ず見てください！



注目に値する別のプラグインはLeaflet.drawです 。これは、アイコンやツールチップを備えた便利でわかりやすいインターフェースを使用して、ポリライン、ポリゴン、円、長方形、ポイントなどのさまざまな形状を作成する機能を追加します。 将来的には、ベクターレイヤーの編集に関連するすべてのコードがこのプラグインに移行する可能性が高くなります。



LeafletをProj4js地理投影ライブラリと統合するProj4Leafletプラグインのおかげで、Leafletは多くの非標準投影で使用できるようになりました。



さらに、 OSM Buildingsを見てください。これは、リーフレットマップの透視3D投影で家の高さに関するOpenStreetMapデータを視覚化できるJSライブラリです。 とてもかっこいいですね。

Leafletを使用している大企業

次のリリース以降、多くの優れた企業がLeafletの使用を開始しましたが、誇らしげにFlickr 、 foursquare 、 Wikimedia Foundationの 3つに言及したいと思います。 他のいくつかの有名なユーザーは、現在サイトのメインページで誇示しています 。

ありがとう

ライブラリの開発を手伝ったすべての人に感謝します-パッチをGitHubに送信し、バグを報告し、ウェブサイトでリーフレットを使用し、同僚にそれについて話し、会議で言及しました。 私が作成した図書館の周りにこのような素晴らしいコミュニティが集まったことを非常に嬉しく思います。



ご清聴ありがとうございました！ フィードバックをお待ちしております。



PS：この記事は、リーフレットWebサイトでの公式発表のロシア語版を少し修正したものですが、私自身は著者であるため、翻訳にはまだ適用しないと判断しました。 その場合は修正してください。