Leaflet 0.4 リリース

Vladimir Agafonkin が 2012年7月30日に投稿

前回の安定版リリースから 33人の貢献者が参加して5.5か月の開発を経て、Leaflet 0.4 のリリースを発表できることを誇りに思います！今回のリリースでは、よりシンプルな API と、多くの素晴らしい改善と重要なバグ修正、ドキュメントのメジャーアップデート、公式プラグインページ、そしてこの開発者ブログの開設が含まれています。改善点を一つずつ見ていきましょう。

よりシンプルな API

Leaflet 0.4 には、以前のアプローチとの後方互換性を維持しつつ（両方のスタイルを使用できます）、よりシンプルで簡潔なコード（jQuery のような）を書けるようにするためのいくつかの API 改善が含まれています。

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

まず、Leaflet メソッドは、LatLng、LatLngBounds、Point、Bounds オブジェクトを単純な配列形式で受け入れるようになりました。そのため、常に明示的に作成する必要はありません。

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

次に、addLayer、addControl、openPopup などの Map メソッドには、反対側からの対応するものが追加されました。

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

明示的に値を返さないすべての Leaflet メソッドはオブジェクト自体を返すという事実と合わせて、これにより便利なメソッドチェーンが可能になります。

第三に、Leaflet クラスには、new キーワードなしでオブジェクトを作成できる小文字のショートカット（クラスファクトリ）が追加され、チェーンされたコードが見やすくなります。

L.map('map').fitWorld(); // same as
(new L.Map('map')).fitWorld();

注目すべき新機能

ズームアニメーションの改善

以前のバージョンでは、マーカー、ポップアップ、ベクターレイヤー、画像オーバーレイはズーム中に非表示になっていましたが、現在（Dave Leaver のおかげで）それらはすべて、他の既存のマッピングライブラリとは異なり、美しくスムーズなズームアニメーションを備えています。上のマップをズームしてどのように見えるか試してみてください！ただし、マップ上に数千個のマーカーがある場合は、マップの markerZoomAnimation オプションを使用して、動作が遅くなる場合にマーカーアニメーションをオフにすることができます。

さらに、すばやく複数回ズームインまたはズームアウトしても、タイルが消えることはなくなりました。

Leaflet マップは、デフォルトで有効になっている新しいキーボードハンドラー（Eric Martinez が貢献）により、0.4 でアクセシビリティが向上しました。これにより、ユーザーは方向キーでパンし、+/- キーでズームすることで（タブキーでフォーカスしたりクリックしたりしてマップをフォーカスした後）、マップを操作できます。上のマップでお試しください。とても快適です！

パンの慣性

もう1つの素晴らしい改善点は、パンの操作性です。素早いパンの後もマップがスムーズに動き続ける慣性運動効果が加わりました。特にタッチデバイスでは自然に感じられます。これもデフォルトで有効になっています。今すぐ試してみてください！また、効果の最大速度、減速度、およびトリガーする時間しきい値を設定できるため、高度に設定可能です。

Android 4 でのピンチズーム

以前の Leaflet バージョンでは、ピンチズームは iOS デバイスでのみ機能しましたが、ついに Android で利用できるようになりました。Android 4 以降の標準ブラウザーだけでなく、Android 版 Chrome および Firefox でも動作します。

スケールコントロール

現在のマップビューの縮尺をメートル法および/またはヤードポンド法で示す、シンプルで軽量なコントロールです。通常どおり、CSS で外観をカスタマイズできます。上のマップの左下隅をご覧ください！

L.control.scale().addTo(map);

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

シンプルで直感的なインターフェイスで、ポリラインとポリゴンを編集できます。この機能は最終的に、Jacob Toyeによる図形描画用の素晴らしいプラグインであるLeaflet.drawにマージされる予定です。

polygon.editing.enable();

Div ベースのアイコン

画像ベースの Icon クラスに加えて、Leaflet 0.4 には、軽量な div ベースのマーカー（カスタム HTML を含めることができ、CSS でスタイルを設定できる）を作成するための DivIcon クラスが追加されました。たとえば、ポリラインを編集するとき（正方形のハンドル）や、後で説明する Leaflet.markercluster プラグイン（色付きのクラスター）で使用されているのを見ることができます。

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 が改善され、よりシンプルかつ柔軟になりました。Jason Sanford は、新しい API を紹介する素晴らしいチュートリアルを作成しました。ただし、変更には後方互換性がないため、古いコードを必ず更新してください。

Icon API

Icon API が改善され、よりシンプルかつ柔軟になりました。変更には後方互換性もありません（ただし、古いコードはすぐに更新できます）。更新されたカスタムアイコンチュートリアルを確認するか、直接 API ドキュメントに進んでください。

Control API

カスタムコントロールがはるかに簡単に作成できるようになりました。簡単な例も含まれている API ドキュメントを確認してください。

より良いイベント API

Aaron King が、イベントメソッドにいくつかの改善をもたらしました。on メソッドと off メソッドで、複数のイベントタイプをスペースで区切られたタイプ文字列として一度に受け入れることができるようになりました。

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

また、以下のように、タイプとリスナー関数をキー/値ペアとするオブジェクトを受け入れることもできます。

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

さらに、off メソッドにイベントタイプのみを指定した場合、そのイベントに関連付けられたすべてのリスナーが削除されるようになりました。

map.off('click');

その他の API の改善

Leaflet 0.4 には、API をより完全で強力にする、さまざまな Leaflet クラスにわたる30以上の新しいメソッド、オプション、およびイベントが追加されました。完全なリストについては、完全な変更ログを確認してください。

パフォーマンスとユーザビリティの向上

Leaflet はすでに非常に高速だと思いますが、このバージョンでは、さらに高速にするためのいくつかのパフォーマンス改善が加えられています。

パン、マップのサイズ変更、ピンチズームのパフォーマンスが向上しました（この背後にあるいくつかのトリックは、今後のブログ記事で説明します）。
キャンバスバックエンド（Android 2 など）でのベクターレイヤーの更新と削除が何倍も高速になりました。
パフォーマンスを向上させるために、モバイルデバイスのコントロールのボックスシャドウが単純な境界線に置き換えられました。
iOS でパンするたびにベクターレイヤーがちらつくことはなくなりました。

さらに、前述されていないユーザビリティの改善点がいくつかあります。

カーソルの下にマーカーがある場合でも、パンが機能するようになりました（混雑したマップで役立ちます）。
ポップアップの外観がわずかに改善されました。
タイルレイヤーには、有効にすると Retina ディスプレイのタイル解像度が2倍になる detectRetina オプションが追加されました（Mithgol が貢献）。

バグ修正

Leaflet 0.4 には、すべてのブラウザとプラットフォームでより安定し信頼性が高くなる約45件のバグ修正が含まれています。注目すべきバグ修正には、まれにピンチズーム後にマップが完全に消えてしまうという恐ろしい iOS バグ、IE10 ベータ版でのズームの破損、XHTML コンテンツタイプで提供されるページでの Leaflet マップの破損、固定位置要素内のマップでの誤ったズームなどが含まれます。

変更ログのバグ修正の完全なリストはこちらです。

古いバージョンからのアップグレード

上記の GeoJSON と Icon の変更に加えて、潜在的に破壊的な変更のリストを以下に示します。コードを更新する際は注意深くお読みください（ただし、それほど時間はかからないはずです）。

Leaflet 0.4 のダウンロードオプション（実際のダウンロード、CDN ホストバージョン、手動でビルドするための説明を含む）は、ダウンロードページに記載されています。

コードの統計

私は Leaflet を可能な限り小さく軽量に保つことに引き続き尽力しています。以下は、現在のライブラリのサイズの内訳です。

JavaScript：27 KB 最小化および gzip 圧縮（102 KB 最小化、176 KB ソース、7578 行のコード）
CSS：1.8 KB gzip 圧縮（8 KB、377 行のコード）
画像：10 KB（5 つの PNG 画像）

ドキュメントの更新

これまで、Leaflet API リファレンスは不完全でした。しかし、今回のリリースでは、それを100%完全で最新の状態にし、一般的に今までで最高の API リファレンスページにするために多大な努力が払われました。残りのすべてのクラス、メソッド、オプション、イベント、およびプロパティが慎重にドキュメント化され、コード例が追加され、ドキュメントは今後常に最新の状態に保たれます。

また、ページのデザインも大幅に改善されました。より良い色、フォント、間隔、ハイフネーション、手動で調整された列幅など、美しく読みやすくするための詳細が多数あります。

プラグインページ

Leaflet Web サイトには、素晴らしい Leaflet コミュニティによって作成された多くの Leaflet プラグインをリストし、多くの優れた機能を追加し、サービス統合を支援する公式のプラグインページがあります。

言及したいプラグインの1つは、Dave Leaver による Leaflet.markercluster です。これは、現在、あらゆるマッピングライブラリの中で今まで見た中で最高のマーカークラスタリングプラグインです。高速で美しく、クラスターのスムーズなアニメーションを提供し、最後のズームレベルで混雑したマーカーに対するスマートな Google Earth スタイルのソリューション（George MacKerron による）が含まれており、ホバー時にクラスターで覆われた領域を強調表示でき、モバイルデバイスで適切に動作し、簡単にカスタマイズできます。このプラグインについては、次の投稿のいずれかで詳しく取り上げる予定です。

もう1つ注目すべきプラグインは、Bruno B による同様のプラグインに触発された、Jacob Toye による Leaflet.draw です。これにより、アイコンとヒントを備えた非常に優れたユーザーフレンドリーなインターフェイスを通じて、ポリライン、ポリゴン、長方形、円、マーカーなどのフィーチャーを描画できます。その他の編集関連コードは、おそらく将来このプラグインに移行するでしょう。

また、Kartena による Proj4Leaflet プラグインのおかげで、GIS 愛好家は、少し変わった珍しい投影図を持つマップで Leaflet を楽しむことができるようになりました。

誰もがチェックする必要があるもう1つの Leaflet ベースの作品は、Jan Marsch による OSM Buildings です。これは、Leaflet マップの上に 3D OSM ビルディングデータを視覚化するための驚くべき JS ライブラリです。非常にクールなものです。

開発者ブログ

これは、すべての重要な Leaflet 関連のニュース、チュートリアル、ヒント、および開発メモの主要な場所となる、公式 Leaflet 開発者ブログの最初の投稿です。

Leaflet を利用する大手企業

前回のリリース以降、Leaflet は Flickr、foursquare、そしてウィキメディア財団 (トップページで紹介されました) を含む多くの素晴らしい企業に採用されました。これは Leaflet とオープンソースマップにとって本当にエキサイティングな時期であり、今後も多くの企業がこの素晴らしいトレンドに続くことを楽しみにしています。

感謝

Leaflet が今の姿になるのを助けてくれたすべての人々に感謝します。コードの貢献、バグの報告、ウェブサイトでの Leaflet の利用、同僚への紹介、会議での発表など、素晴らしい仕事を続けてください！

特に、ズームアニメーションの改善や最先端のクラスタリングプラグインなど、インスピレーションを与える貢献をしてくれた Dave Leaver と、親切なサポート (とりわけ Leaflet CDN の設定) をしてくれた Jason Sanford に感謝します。

そしてもちろん、オープンソースを受け入れ、この開発をサポートしてくれた素晴らしい会社、CloudMade に感謝します。

敬具
Vladimir Agafonkin, Leaflet メンテナー。