GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

leaflet.js

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

投稿日:2015年3月16日

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記事

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。