オープンストリートマップでオリジナル地図を作成しよう

Image from Gyazo

オープンストリートマップとは

オープンストリートマップ(OpenStreetMap: OSM)は, グーグルマップ(Google Maps)と同様のオンライン地図のサービスの一つです. グーグルマップは非営利であっても印刷物としての使用に制限がありますが, オープンストリートマップは適切にクレジットを表示すれば, 営利目的も含め,複製・再配布・改変が認められているという特徴があります(CC By-SA 2.0).

オープンストリートマップで表示される地図は, 地図タイル と呼ばれる格子状の画像を並べることで構成されます. 地図タイルは下記の REST API と呼ばれる方法を用いて取得することが可能です. 倍率Z,座標X,座標Yを指定することで,世界の地図タイルを自由に表示できます.

https://a.tile.openstreetmap.org/{倍率:z}/{座標:X}/{座標:Y}.png

例えば,下記のように倍率Z=0,座標X=0,座標Y=0を指定してみましょう. これを表示すると,世界が一枚の地図タイルで表示されることがわかります.

https://a.tile.openstreetmap.org/0/0/0.png

次に,倍率Z=1にして,地図タイルを取得します. 地図タイル数は $2^{2 \cdot z}$ で与えらるため, 倍率X=1のときは,4枚の地図タイルで世界を表現していることになります.

【左上】
https://a.tile.openstreetmap.org/1/0/0.png

【左下】
https://a.tile.openstreetmap.org/1/0/1.png

【右上】
https://a.tile.openstreetmap.org/1/1/0.png

【右下】
https://a.tile.openstreetmap.org/1/1/1.png

現状で,オープンストリートマップは,倍率Z=18まで利用可能となっています. このため,倍率Z=18の地図タイル数は,なんと,$2^{2 \cdot 18} = 68719476736$となっています. 今回は,このオープンストリートマップを利用して,オリジナルの地図を作成しましょう.

サンプルをダウンロードしよう

オープンストリートマップを利用して地図を作成するために, JavaScript というプログラミング言語のライブラリである Leafletを利用します. なんだかとても難しそうですが,今回はサンプル・ファイルをダウンロードして,一部を書き換えるだけなので,とっても簡単です. コンピュータが苦手な人も安心してください.

下記がサンプル・ファイル(Sample.html)です. ダウンロードしたら Chrome などのブラウザで開いてみてください.

Sample.html

ブラウザで開くと,椙山女学園大学を中心とした地図が表示されます. マウスを使って,地図を自由に操作してみてください. マーカーをクリックすると「椙山女学園大学」や「星ヶ丘駅」と表示されます. また,地図上をクリックすると,クリックした位置の 緯度・経度 が表示されます.

オリジナルの地図を作成しよう

それでは,ダウンロードしたファイル(sample.html)を編集してオリジナルの地図を作ってみましょう. ファイルを編集するには,エディタと呼ばれるソフトウェアを利用します. ここでは,Atom を利用しましょう(スタートボタンから起動しましょう).

最初に,表示する地図の緯度・経度・倍率を修正します. 下記のコードが緯度・経度,そして,倍率を指定している箇所です. この,35.159399136.987255 は椙山女学園大学の緯度・経度,そして 16 は地図の倍率です. この緯度・経度を自由に書き換えてください.

/* 緯度・経度と倍率の指定 */
var mymap = L.map("mymap").setView([35.159399, 136.987255], 16);

次に,表示するマーカーの位置を修正しましょう. 下記のコードがマーカーの緯度・経度,そして,名称を指定している箇所です. ここでは,椙山女学園大学と星ヶ丘駅を指定しています. このマーカーの緯度・経度と名称を自由に書き換えてください.

/* マーカー表示 */
data = {
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"geometry":
				{
					"type": "Point",
					"coordinates": [136.987255, 35.159399]
				},
			"properties":
				{
					"name": "椙山女学園大学",
				}
		},
		{
			"type": "Feature",
			"geometry":
				{
					"type": "Point",
					"coordinates": [136.985318, 35.162474]
				},
			"properties":
				{
					"name": "星ヶ丘駅",
				}
		}
	]
}

例えば,名古屋駅を中心に地図を表示し,名古屋駅とミッドランドスクエアにマーカーを設置すると下記のように表示されます. このように,オープンストリートマップを利用することで,自由にオリジナルの地図を作成し,ウェブで公開することが可能です.

最後に

近年,シビックテック と呼ばれるICTを活用した社会問題の解決に向けた取り組みが注目されています. 自分が住んでいる地域に解決したい問題はありませんか. オープンストリートマップなどの地図サービスは,問題を可視化して,解決策を探るための有効なツールの一つです. 車椅子で行ける場所を探すためのWheelmapや,奥三河の観光情報をまとめた キラッと奥三河観光ナビなど,様々に応用されています. 誰もがこのようなツールを活用して社会に貢献が可能な時代です. 力を合わせてより良い社会を創り上げましょう!

スポンサーリンク