[JS]スマホ・デスクトップに対応したインタラクティブなマップが作成できるスクリプト -Leaflet

jQueryなど他のスクリプトに依存せずに、インタラクティブなマップを作成できる軽量のスクリプトを紹介します。

Leaflet - a modern, lightweight JavaScript library for interactive maps
デモページ

[ad#ad-2]

Leafletは、ユーザビリティ、パフォーマンス、サイズ、フレキシビリティを重視して開発されており、デスクトップとモバイルの主要なブラウザでインタラクティブなマップを作成できるBSDライセンスのスクリプトです。

Leafletの主な特徴

• タイルレイヤー
• マーカー、ポリゴン、ポリライン、サークルの設置
• ポップアップ
• イメージのオーバーレイ
• ドラッグ操作でパン
• ホイール・ダブルクリックでズーム
• Shift+ドラッグでバウンディングボックス
• タッチドラッグでパン（スマホ）
• マルチタッチでズーム（iOS）
• ダブルタップでズーム
• パン時のアニメーション
• ズーム時のアニメーション（IE以外）
• タイルとポップアップのフェードアニメーション
• 容易なカスタマイズ

Leafletの対応ブラウザ

デスクトップ

• Firefox 3.6+
• Chrome
• Safari 5+
• IE 7–9
• IE 6（全機能ではありませんが、アクセシブルです）

スマートフォン

• Safari for iOS 3/4+
• WebKit for Android 2.2+

Leafletのデモ

サイトではデスクトップ用のデモ、スマホ用のデモが掲載されています。
※現在は2つですが、今後増える予定です。
Leaflet examples

Leaflet Quick Start Guide
デモページ

Leaflet on Mobile
デモページ

[ad#ad-2]