第2回秋のもんご祭り #mongodb2014 でデモした内容の説明スライドです。自由な地図情報を扱うOpenStreetMapから取り出した情報をMongoDBに格納して、地理空間インデックスを使って検索するデモです。

1. 納涼もんご祭り2014
OpenStreetMap +MongoDB で
地図情報を検索してみたい！
2014.10.11
MongoDB 日本ユーザー会
MongoDB JP
小笠原徳彦 (OGASAWARA, Naruhiko)
Twitter ： @naru0ga / mail: naruoga@gmail.com

2. 今回のデモは何？
今年のOSC 京都のブースデモで急遽作成したデモ
Web プログラミング経験ほぼゼロな筆者が
Ruby + Sinatra + MongoDB + OpenStreetMap
(OpenLayers + Overpass API) で
一週間で作成しました
https://github.com/naruoga/findMatsuya

3. もちょっと詳しく！
OpenStreetMap （以下OSM ）のPOI （ Point Of
Interest: なんかの地点情報）を取り出して
MongoDB に取り込んで
任意の地点の緯度経度をOSM から得て
それをMongoDB で検索して
JavaScript でOSM の地図上に表示

4. MongoDB とは
この会場にいる以上説明は不要ですよね :)
ドキュメント指向なゆるふわDB
でもクエリーはけっこ強力
地理空間インデックス
なんてのもある！
今回はこれ使いました

5. OpenStreetMap とは
一言で言えば「地図のWikipedia 」
http://www.openstreetmap.org/ / http://osm.jp/
みんなで参照して、みんなで編集できる地図
地図情報そのものがオープン
単に地図として使うだけでなく色々と楽しげな応用が

6. OpenStreetMap のデータ活用(1)
OSM はPostGIS というPostgreSQL の地理情報拡
張を採用しており、このデータは誰でもダンプ可能
https://wiki.openstreetmap.org/wiki/Planet.osm
これを直接MongoDB に取り込むこともできる
https://github.com/ederoyd46/OSMImport
ただ、カジュアルに使うにはちょいとデカいし、リアルタイ
ムにシンクロとか考えると億劫

7. OpenStreetMap のデータ活用(2)
もっとカジュアルなAPI もあるよ！
Overpass API http://wiki.openstreetmap.org/wiki/Overpass_API
REST API で地図情報を引っ張り出せる便利API
出力はXML or JSON
地図描画はOpenLayers http://openlayers.org
Javascript でさくさく描画できるよ！

8. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;

9. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
出力は
JSON で！

10. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
まずは
点情報を

11. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
名前に
「松屋」を
含む

12. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
明らかに
違う種類の
POI を弾く

13. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
超よくある
ノイズ

14. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
日本列島を
囲む矩形(*)
(*) ホントはややはみ出るけど
そこに松屋はないので手抜き

15. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
今度は
ビルなどの
線で書かれた
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
POI

16. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
以下node と
おんなじ

17. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
way はnode の
集合体なので
再帰的に
情報を要求

18. まずデータのダンプ
特定のPOI をまるごと引き抜いてくるサンプル
[out:json];
(
node
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
way
["name"~" 松屋"]
["highway"!~"."]
["railway"!~"."]
["waterway"!~"."]
["power"!~"."]
["brand"!~" 西松屋"]
["name"!~"^ 西松屋"]
(29.32907,122.84827,
46.38259,147.20285);
);
(._;>;);
out;
出力！

19. まずデータのダンプ
このデータを以下のようにサーバーに送る
$ wget --post-file request.txt -O stores.json
http://overpass-api.de/api/interpreter
結果はstores.json に出力される
ここまでの情報は
http://jnug.net/osm/overpassapi.html
を参考にさせていただきました。ありがとう！

20. 取り出したデータを覗く(1)
{
"version": 0.6,
"generator": "Overpass API",
"osm3s": {
"timestamp_osm_base": "2014-10-01T07:53:02Z",
"copyright": "The data included in this document is from
www.openstreetmap.org.
The data is made available under ODbL."
},
"elements": [
{
"type": "node",
"id": 277208310,
"lat": 35.5577222,
"lon": 139.3553166,
"tags": {
"amenity": "fast_food",
"brand": " 松屋",
"name": " 松屋",
"name:en": "Matsuya",
"name:ja": " 松屋",
"name:ja_rm": "Matsuya",
"source": "survey"
}
}, …
ヘッダー
要素の中身
（配列）
$ wc stores.json
10464 19064 219640 stores.json

21. 取り出したデータを覗く(2)
ヘッダー
データの作成者（ Overpass API ）
バージョン
ライセンス……
実体（ elements ）
JSON の配列
POI 情報の実体

22. MongoDB に取り込む戦略
これぐらいのサイズならとりあえずDB に放り込んで
考えてもいい
MongoDB は1 ドキュメント16MB の制限があるので、大
きなJSON データを取り込むならちょっと考える必要が
放り込んでからmongo シェルでデータ眺めながら
Javascript 叩けばよさげ
ここらへんのお気軽さがMongoDB のいいとこ

23. まずはインポート
$ mongoimport --db fastfoods --collection foo --jsonArray stores.json
データベース
fastfoods の
コレクション
foo に
一ファイルを
JSON 配列
として
Overpass API で
得た
ファイルを
取り込み

24. 要素の展開
要素をばらして別のコレクションに放り込む
$ mongo fastfoods
MongoDB shell version: 2.6.4
connecting to: fastfoods
> db.foo.findOne().elements.forEach(function(doc) {
... db.elems.insert(doc)
... })
elems
コレクションに
突っ込む
foo に一個だけ入っている
ドキュメントの
elements という要素の配列を
順次取り出して

25. 展開した要素の確認
> db.elems.findOne({type:"node"})
{
"_id" : ObjectId("542bb40d..."),
"type" : "node",
"id" : 277208310,
"lat" : 35.5577222,
"lon" : 139.3553166,
"tags" : {
"amenity" : "fast_food",
"brand" : "松屋",
"name" : "松屋",
"name:en" : "Matsuya",
"name:ja" : "松屋",
"name:ja_rm" : "Matsuya",
"source" : "survey"
}
}
> db.elems.findOne({type:"way"})
{
"_id" : ObjectId("542bb40e..."),
"type" : "way",
"id" : 70555953,
"nodes" : [
842006146,
842006149,
842006150,
842006154,
842006146
],
"tags" : {
"building" : "yes",
"name" : "松屋食料品",
"source" : "estimated"
}
}

26. 地理空間情報の変換
MongoDB の地理空間インデックスを使うには、地
理空間情報をGeoJSON 形式で格納する必要が
http://geojson.org/
点（ node ）の情報
{ type: "Point", coordinates: [ lon, lat ] }
閉領域（ way ）の情報
{ type: "Polygon",
coordinates: [ [lon1, lat2], [lon2, lat2], ...] }

27. 点（ node ）の変換
シンプルな情報の読み替えでいいのでこんな感じ
db.elems.find({type:"node", tags: {"$exists":true}}).forEach(function(doc){
doc["loc"] = { "type" : "Point",
"coordinates" :
[ parseFloat(doc.lon]), parseFloat(doc.lat) ] };
delete doc["lon"];
delete doc["lat"];
db.stores.insert(doc);
})
タグが打ってあるノードに限定
元のデータだと
緯度経度情報は
文字列なので
数値に変換
GeoJSON に変換した情報を
お掃除

28. 閉空間（ way ）の変換
way を構成するnode の情報がいるので少し複雑
すべてのway に対して
db.elems.find({type:"way"}).forEach(function(doc){
var points = [];
doc.nodes.forEach(function(node){
way内の全node を
取り出して
var nodeDoc = db.elems.findOne({id: node});
points.push([parseFloat(nodeDoc.lon), parseFloat(nodeDoc.lat)])
});
doc["loc"] = { type: "Polygon", coordinates : [ points ] };
delete doc["nodes"];
db.stores.insert(doc);
})
座標を得て
配列に
push
GeoJSON としては
配列の配列

29. 地理空間インデックスを張る
コマンド一発！
> db.stores.ensureIndex({loc: "2dsphere"})
{
"createdCollectionAutomatically" : false,
"numIndexesBefore" : 1,
"numIndexesAfter" : 2,
"ok" : 1
}

30. 試しに検索
適当な店舗の座標を中心に半径5km で検索
> db.stores.find({loc: {$near: { $geometry: { type: "Point", coordinates :
[139.3553166, 35.557722]}, $maxDistance : 5000 }}})
{ "_id" : ObjectId("542bb40d7072491a6a49335d"), "type" : "node", "id" :
277208310, "tags" : { "amenity" : "fast_food", "brand" : " 松屋", "name" :
" 松屋", "name:en" : "Matsuya", "name:ja" : " 松屋", "name:ja_rm" :
"Matsuya", "source" : "survey" }, "loc" : { "type" : "Point", "coordinates"
: [ 139.3553166, 35.5577222 ] } }
{ "_id" : ObjectId("542bb40d7072491a6a4933c9"), "type" : "node", "id" :
1682557982, "tags" : { "amenity" : "fast_food", "branch" : " 相模原店",
"brand" : " 松屋", "cuisine" : "gyudon", "name" : " 松屋", "name:en" :
"Matsuya", "name:ja" : " 松屋", "name:ja_rm" : "Matsuya", "wheelchair" :
"no" }, "loc" : { "type" : "Point", "coordinates" : [ 139.3700845,
35.5805666 ] } }
...

31. アプリ側の話
Ruby + Sinatra + mongo(*) + bson_ext
ERB にJavascript 埋めてOpenLayers を利用
入力された地点情報でOverpass API 引いて緯度
経度情報を得て、MongoDB に問い合わせ
その結果をOpenLayers でプロット
(*) MongoDB のRuby 標準ドライバー

32. 画面例
ここに中心点を
入力して
検索
OpenLayers による
OSM 地図描画
MongoDB への
クエリー文字列

33. つまらない工夫など
OSM のPOI は「東京駅」の場合、name:" 東京" 、
railways:"station" とかになってる
「駅」で終わる文字列は加工して検索
Ruby の配列( ＝MongoDB のクエリ結果）をERB
上のJavascript に渡したい
ERB で変数展開してJS の配列に代入し直せばOK

34. 謎？？
Overpass API に手でクエリ投げると通るのに、Ruby
からだとダメな時があって???
すみません未解決です……。

35. 所感(1)
シェルでJS 叩いてゴニョゴニョできるMongoDB は
データをいじくりまわしながら考えるときにヨイ！
シャーディングもレプリカセットもなくても、MongoDB を
使うと嬉しい状況はいっぱいあるよ！
パイロットデータをいじりながら考えたいときとか
今回の応用だとOSM データのメタデータ参照エンジン
として使うのもいいのでは

36. 所感(2)
今回ぐらいの規模ならRuby + Sinatra Good!
Model の合計147 行、View 88 行
覚えることが少ないのはハッピー
OpenLayeres は割とわかりやすかったし楽しい
このサイト↓入門によかった
http://openstreetmap.piyolab.net/mapbyopenlayers.php

37. まとめ
MongoDB の地理空間検索機能とOpenStreetMap
の情報を作って、地図情報検索アプリを書いてみた
考えながら作るときにはMongoDB サイコー
地理空間検索楽しい
OSM は色々いじれそうでこの組み合わせは遊べる
地図ならGoogle Map という思い込みはやめよう！

38. Happy MongoDB & OpenStreetMap Life!