「uMap」を用いたマップ作成について OpenStreetMap からのデータ抽出：Overpass API について、overpass turbo のウィザードでの使用方法 関西オープンフォーラム 2018 発表資料 ※補足：ポップアップ内への画像表示 「概要」項目に、画像への外部リンクを記載しています。 Wikimedia Commons にアップした画像のサムネイルを使用しています。 ＜「概要」項目への記載例＞ 前方後円墳 古墳時代前期（４世紀前半） {{https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/TeradoOtsukaKofun_nt_1.JPG/320px-TeradoOtsukaKofun_nt_1.JPG}}

1. 関西オープンフォーラム 2018 2018/11/10
Noriko Takiguchi
OSM Mapper : taki3hira
Programmer
Noriko Takiguchi
OSM Mapper : taki3hira
Programmer
Noriko Takiguchi
OSM Mapper : taki3hira
Programmer
あなたのお勧めマップ
作ってみよう！
～ OpenStreetMap活用編 uMap ～

2. 2
uMap とは
Open Sourceです！ (WTFPL ラインセンス)
Django (Python) and Leaflet (JavaScript)
サイト埋め込み用地図が即座に作成できます！
背景地図・複数のレイヤ
マーカー（ポイント）・ライン・ポリゴン
アイコン・色・透明度・形状の設定
ポップアップオプション設定
データのインポート
サイトへのマップ埋め込みと共有
ヘルプ機能あり
https://wiki.openstreetmap.org/wiki/JA:UMap
サンプル
見てみよう

3. 3
uMap サンプル（案内図） 製品版インスタンス
KOFイベント会場への案内図
http://u.osmfr.org/m/263380/
経路
地物
建物
データ内容表示
レイヤ別

4. 4
uMap サンプル（案内図） 製品版インスタンス
KOFイベント会場への案内図
http://u.osmfr.org/m/263380/
経路
地物
建物
データ内容表示
レイヤ別
非表示：経路レイヤ

5. 5
uMap サンプル（案内図） 製品版インスタンス
KOFイベント会場への案内図
http://u.osmfr.org/m/263380/
経路
地物
建物
データ内容表示
レイヤ別
非表示：経路レイヤ
非表示：地物レイヤ

6. 6
uMap サンプル（案内図） 製品版インスタンス
KOFイベント会場への案内図
http://u.osmfr.org/m/263380/
経路
建物
データ内容表示
レイヤ別
非表示：経路レイヤ
非表示：建物レイヤ
非表示：地物レイヤ
地物

7. 7
uMap サンプル（思い出） 製品版インスタンス
史跡めぐり（京都府向日市）
http://u.osmfr.org/m/71197/
概要表示
マップ名称表示

8. 8
uMap サンプル（思い出） 製品版インスタンス
史跡めぐり（京都府向日市）
ポップアップ表示

9. 9
uMap サンプル（思い出） 製品版インスタンス
北木島観光地図：マッピングパーティ
http://u.osmfr.org/m/25736/
ポップアップ時
サイドパネル表示

10. 【マップ作成】
uMap トップページ
見てみよう
https://umap.openstreetmap.fr/ja/

11. 11
uMap トップページ
https://umap.openstreetmap.fr/ja/
製品版インスタンス
ログインして
マップ登録
●
GitHub
●
Bitbucket
●
Twitter
●
OpenStreetMap
連携アカウント

12. 12
uMap トップページ
https://umap.openstreetmap.fr/ja/
製品版インスタンス
マップを作成
ボタンをクリック

13. 13
uMap ヨーロッパ初期表示 製品版インスタンス
描きたい場所まで
ドラッグ移動

14. 14
uMap 場所の名前を検索 製品版インスタンス
検索用アイコン
クリック
地名で検索
入力：osaka
選択する
osaka
Osaka
City, Japan

15. 15
uMap 大阪市に移動 製品版インスタンス
検索での
移動結果

16. 16
uMap 広域表示 製品版インスタンス
その後
描きたい場所まで
ドラッグ移動
ズームアウト
マウスホイール
操作でも可能

17. 17
uMap 拡大表示＆固定 製品版インスタンス
マップ初期表示
位置を固定可能
ズームイン
マウスホイール
操作でも可能
設定変更したら「保存」
不要なら「キャンセル」

18. 18
uMap Help 機能 製品版インスタンス
各所に
Help 機能あり

19. 19
各地物等の登録時
個別の値を設定
uMap マップ設定を編集 製品版インスタンス
マップ全体の
デフォルト値を設定
 マーカー
 ライン
 ポリゴン
レイヤの登録時
レイヤ別の
デフォルト値を設定

20. 20
uMap マップ設定を編集 製品版インスタンス
マップ全体
プロパティ設定
概要
マップの名称
マップの名称

21. 21
uMap レイヤを追加 製品版インスタンス
レイヤを追加

22. 22
uMap レイヤを追加 製品版インスタンス
概要
レイヤの名称

23. 23
uMap マーカーを配置 製品版インスタンス
配置したいレイヤを
選択して
名称・概要を設定
概要
マーカーの名称
レイヤ選択
１
配置したい位置を
クリック ２
３

24. 24
uMap マーカーの色変更 製品版インスタンス
変更後の色
Red を選択
シェイプ表示プロパティ
５
「色」横の「指定」をクリック
４

25. 25
uMap マーカーの色変更後 製品版インスタンス
マーカーの色が
赤になる
シェイプ表示プロパティ
６
アイコン形状
デフォルト

26. 26
● 円形
● まち針
uMap アイコン形状変更 製品版インスタンス
アイコン形状
しずく型選択
シェイプ表示プロパティ
７

27. 27
uMap アイコンシンボル変更 製品版インスタンス
アイコンシンボル
hospital 選択
シェイプ表示プロパティ
８
「シンボル変更」ボタン
クリックで反映 ９
１０「保存」ボタン クリック

28. 28
uMap マーカーポップアップ 製品版インスタンス
ラベルの位置：左寄せ
ポップアップオプション
ラベルを表示：常時
ポップアップ時
表示内容：名称＋概要

29. 29
uMap ラインを描画 製品版インスタンス
１
２
３
順次クリック
ライン描く
レイヤを選択して
名称・概要を設定
概要
レイヤ選択
ラインの名称

30. 30
uMap ラインを描画 製品版インスタンス
破線表示：5,15
● 線の色
● 線の太さ
● 線の透明度
シェイプ表示プロパティ

31. 31
uMap ポリゴンを描画 製品版インスタンス
概要
レイヤ選択
ポリゴンの名称
レイヤを選択して
名称・概要を設定
順次クリック
エリア描く
１
２
３

32. 32
uMap ポリゴンを描画 製品版インスタンス
シェイプ表示プロパティ
線と塗りつぶし
色・透明度
線の太さ
線の表示/非表示

33. 33
uMap 編集を終了 製品版インスタンス
編集終了するには
「編集を終了」

34. 34
uMap 再編集を開始 製品版インスタンス
編集を再開するには

35. 35
データのインポート（静的）
Overpass API 使用：Overpass turbo
http://overpass-turbo.eu/
1. OpenStreetMap からデータ抽出
データ検索用クエリ作成
クエリ実行 → 地図上の抽出表示確認
GeoJSON 形式でエクスポート
2. uMap へのインポート
取得した GeoJSON をインポート
カスタマイズ情報を追加
タイトル・説明・画像・リンク
マーカーの種類・色
ウィザード
使ってみよう

36. 36
uMap データインポート 製品版インスタンス
sport.geojson
「インポート」ボタン
クリックで実行
GeoJSON ファイルを
選択する
● インポートデータ形式
●
geojson
● インポート対象レイヤ
● スポーツセンター

37. 37
uMap データインポート結果 製品版インスタンス

38. 38
uMap 追加インポート 製品版インスタンス
アイコン形状
シンボルを変更
マーカー ホバー時に
名称表示
図書館情報も同様に geojson インポート

39. 39
uMap 埋め込みと共有 製品版インスタンス
http://u.osmfr.org/m/264086/
短縮URL
マップ埋め込み
データのダウンロード

40. 【参考資料】
OpenStreetMap から
データ抽出

41. 41
Overpass API 使用：Overpass turbo
http://overpass-turbo.eu/

42. 42
データ抽出：対象エリア表示
対象エリアを検索
検索窓に対象エリアの地域名など入力して検索する
対象が表示されたら選択する
→（次ページ）対象エリアの地図表示
選択する
※例（OSAKA）
Overpass turbo

43. 43
データ抽出：クエリ作成
対象エリアを拡大表示 → ウィザード
ウィザード
ボタンをクリック
Overpass turbo

44. 44
データ抽出：クエリ作成
クエリウィザード → クエリ作成
クエリ作成
ボタンをクリック
対象地物のタグを入力
→ （次ページ）
画面左側にクエリ表示
※例（スポーツセンター）
leisure=sports_centre
Overpass turbo

45. 45
データ抽出：自動作成クエリ表示
作成済クエリ
Overpass turbo

46. 46
データ抽出：自動作成クエリ内容

47. 47
データ抽出：クエリ実行
作成済クエリ → 実行 → 抽出地図表示
実行
ボタンをクリック
Overpass API 使用：Overpass turbo

48. 48
データ抽出：GeoJSON 取得
エクスポート → 抽出データの取得
エクスポート
ボタンをクリック
データ：GeoJSON
● ダウンロード or コピー
→ uMap インポートで使用
Overpass API 使用：Overpass turbo

49. 49
Happy Mapping !
OpenStreetMap
まち歩きでの発見
マップに反映
マッピングパーティ
オープンデータソン
ウィキペディアタウン
ごく日常の生活の中でも！
Noriko Takiguchi
noriko.taki3@gmail.com
https://wiki.openstreetmap.org/wiki/User:Taki3hira
ともに学びましょう
OSMについてのご質問など
いつでもお気軽に！
継続は力なり
uMap
使ってみよう