OpenStreetMap入門

ウェブ

GoogleMapのAPIでプライベートでマップアプリケーションの開発を行おうとした矢先、APIの利用が有料になっていた事を知りました。

OpenStreetMapは、GoogleMapの代替として十分紹介できる機能性をもったオープンデータの地理情報を作るプロジェクトです。

GoogleMapと比較した際、Googleプレイスをと同期した地理の情報やストリートビューの機能など不足する部分もありますが、これからマップアプリケーションの開発に携わる人向けに触っていただければと思います。

OpenStreetMap Japan | 自由な地図をみんなの手に/The Free Wiki World Map

OSMの利用について

OSM(OpenStreetMap)は、地理のデータベースになりますが、こののデータベースへは直接アクセスする事はできません。

OSMから地理データをダウンロードする事はできますが、地理データは数TB(テラバイト)以上もの容量があり、またマップAPIも自前で開発する必要があるので、手軽に利用する事を考えたら現実的ではありません。

OSMではそんなユーザーの為に、OSM地理データを所有しているベンダーがいくつも存在し、このベンダーが提供するサードパーティーのマップAPIを使う事で手軽にOSMを利用する事ができます。

今回はこのサードパーティのAPIを使ってOSMのマップを簡単に表示する方法を説明します。

leafletの導入

OSMのサードパーティAPIはleafletを使用します。

このAPIはドキュメントがとても整理されており、GoogleMapのAPIと類似しているので、GoogleMapのAPIをこれまで触られた方なら抵抗なく利用できるものとなっております。

Leaflet — an open-source JavaScript library for interactive maps
Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.

サンプル

準備

leafletを利用する為に必ず必要となる部分について説明します。

早速、index.htmlを作成してleafletの準備を進めましょう。

index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>leaflet | Sample</title>
</head>
<body>
</body>
</html>

外部リソースの読み込み

以下を追加してleafletのスタイルシートを読み込みます。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

以下を追加してleafletのJavascriptファイルを読み込みます。

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

マップ配置場所の設定

マップを配置する場所を指定する為、特定のIDを持つDIVタグを追加します。

<div id="mapid"></div>

マップの配置する要素にCSSで高さを設定します。

<style type="text/css">
#mapid { height: 480px; }
</style>

以上で、leafletを使う準備が整いました。

作成したindex.htmlの内容は以下のようになっております。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>leaflet | Sample</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<style type="text/css">
#mapid { height: 180px; }
</style>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
</head>
<body>

<div id="mapid"></div>

</body>
</html>

地理データアクセストークンの取得

地理データはmapboxというサービスを利用します。

このデータを使う為にはトークンコードが必要となりますので、アカウント登録を行いトークンコードを取得します。

Account | Mapbox

アカウント作成後、以下の画面へ遷移します。

Default public tokenの行にあるTokenをがトークンになりますので手元に控えを取りましょう。

以上で準備完了です。

地図を表示してみる

地図を表示する場所を指定しているdivタグの後に以下のコードを追記します。

<script type="text/javascript">
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<トークン>', {
	attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	maxZoom: 18,
	id: 'mapbox.streets',
	accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
</script>
注意

L.tileLayerの第一引数のURLの引数にあるaccess_tokenには、先程取得したmapboxのトークンを指定してください。

これで地図が表示されるようになりました。

マーカーを設置

マーカーの設置は以下のコードを追加します。

L.marker([51.5, -0.09]).addTo(mymap)

L.markerの引数は緯度、経度の配列になります。

マーカーにポップアップを追加

マーカーにポップアップ(吹き出し)を追加するには、先程のマーカーを変数に入れポップアップメソッドを追記します。

// marker1へマーカーのインスタンスを入れる
var marker1 = L.marker([51.5, -0.09]).addTo(mymap);
marker1.bindPopup('ポップアップ').openPopup();;

openPopupメソッドでデフォルトでポップアップを開いた状態を指定する事ができます。

スクリプトサイドの操作

ここまで直接地図の表示に関わる部分について説明してきました。

開発を進めるに従い、UIの状態の取得が必要になってくる事があります。

ここではその一部を紹介します。

zoomlevelschange Event レイヤーの追加または削除によりマップ上のズームレベルの数が変更されたときに発生します。
resize ResizeEvent マップのサイズが変更されたときに発生します。
unload Event removeメソッドでマップが破棄されると発生します。
viewreset Event マップがコンテンツを再描画する必要があるときに発生します(これは通常、マップのズームまたはロードで発生します)。 カスタムオーバーレイの作成に非常に便利です。
load Event マップが初期化されたときに(中心とズームが初めて設定されたときに)発生します。
zoomstart Event マップのズームが変更されようとしているときに発生します(ズームアニメーションの前など)。
zoom Event ズームやフライアニメーションなど、ズームレベルの変更中に繰り返し発生します。
move Event パンおよびフライアニメーションを含む、マップの移動中に繰り返し発生します。
zoomend Event アニメーションの後、マップが変更されたときに発生します。
moveend Event マップの中心の変化が停止したときに発生します(たとえば、ユーザーがマップのドラッグを停止した)。

例:ドラッグ後のマップの表示範囲(緯度・経度)を取得

ドラッグ後のイベントはmoveendを使います。

mymap.on('moveend', function(e){
  alert('NorthEast::lat' + mymap.getBounds().getNorthEast().lat);
  alert('NorthEast::lng' + mymap.getBounds().getNorthEast().lng);
  alert('SouthWest::lat' + mymap.getBounds().getSouthWest().lat);
  alert('SouthWest::lng' + mymap.getBounds().getSouthWest().lng);
}

例:クリックした場所の緯度経度を取得

クリックイベントはclickを使います。

mymap.on('click', function(e){
  alert('Lat->' + e.latlng.lat);
  alert('Lng->' + e.latlng.lng);
});

最後に

サンプルを試していただけましたか?

GoogleMap APIを同じ感覚で手軽に利用できる事を感じて頂けたと思います。

本記事で紹介しているサンプルはごく一部の情報になり、他に多くの便利な機能があります。

詳しくはleafletのドキュメントを参照してください。

Documentation - Leaflet - a JavaScript library for interactive maps

コメント

タイトルとURLをコピーしました