ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Leafletは軽量で地図操作に最適なJavaScriptライブラリ。

LeafletはJavaScript製のオープンソース・ソフトウェア。かつてWebベースの地図と言えば、画像の上下左右に矢印がついたものばかりだった。それを一変させたのがGoogleマップで、Ajaxによるスムーズな操作を可能にした。


ポップアップ

今やあのUIが当たり前になっている。そして地図以外でも使える場面も増えている。あのようなUIをオープンソースで手に入れたいならばLeafletを使ってみよう。

LeafletはCloudMadeが提供するライブラリで、地図操作に用いることを想定している。マーカー表示やマーカーからのポップアップ、イメージのオーバーレイにも対応する。拡大、縮小する時にはアニメーションしたり、ホイールやダブルクリックでズーム操作もできる。


クリックした場所で表示

マーカーの他にも円や三角形を描くこともできる。iOSやAndroidにも対応し、位置情報を取得したりマルチタッチ操作での拡大、縮小も可能だ。ポップアップはCSS3でカスタマイズできる。対応ブラウザはIE6以上(IE6は完璧ではないとのこと)、Safari 5以上、Chrome、Firefox3.6以上となっている。


MOONGIFTはこう見る

デスクトップ向けに地図を提供する場合はGoogleマップでも良いだろう。だがオフラインで使ったり、地図データを流用しようと思ったらGoogleマップは使えない(別途契約すれば可能だがオフラインはまず無理だろう)。OpenStreetMapなどを使う必要がある。

そのような時にGoogleマップと同等の機能を提供しようと思ったらLeafletを使えるのではないだろうか。オープンソースであればカスタマイズも容易だ。スマートフォン対応という利点もあるので、地図を使ったWebアプリケーション開発の際にはぜひチェックしてほしい。

Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade

デモ

CloudMade/Leaflet - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2