leaflet quickstart

ぬるぬる動く!Web地図クライアント「Leaflet」を使おう!

D3.jsと組み合わせても使いやすい、Web地図クライアントライブラリの大本命……だと、個人的には思ってる……たぶん。

leaflet quickstart

leaflet

leaflet.jsとは何か

leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。
軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。
ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね?」という方も、一度触ってみてください。

そんな訳で、簡単な「Leaflet クイックスタート」的なものを書いてみました。

ベースマップの作成

cdnからcssファイルとjsファイルを読み込みます。

bodyタグ内に地図を表示するdiv要素を設置します。

これで準備完了。まずはオープンストリートマップの地図タイルを表示します。

example

とても簡単。

地理院地図を使う

次に別のタイルサーバーから地図タイルを読み込む例として、地理院地図を使ってみます。

example

マーカーの追加

地図の基本マーカーを追加します。

example

ポップアップの追加

最後にマーカーをクリックした際にポップアップを表示するようにします。

example

とりあえずここまで。

備考

今までちょくちょく使っていたのですが、あんまりちゃんと紹介したことがなかったなーと思って紹介記事を書いてみました。
個人的には使いこなしたいWeb地図ライブラリNo.1なので、今後もいろいろと試したことなんかをブログに記録していこうと思います。
今までのleaflet記事については以下からどうぞ。

leaflet.js記事

“ぬるぬる動く!Web地図クライアント「Leaflet」を使おう!” への1件の返信

現在コメントは受け付けていません。