Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

あなたのお勧めマップ作ってみよう! OpenStreetMap活用編 uMap

119 views

Published on

「uMap」を用いたマップ作成について
OpenStreetMap からのデータ抽出:Overpass API について、overpass turbo のウィザードでの使用方法
関西オープンフォーラム 2018 発表資料

※補足:ポップアップ内への画像表示
「概要」項目に、画像への外部リンクを記載しています。
Wikimedia Commons にアップした画像のサムネイルを使用しています。
<「概要」項目への記載例>
前方後円墳
古墳時代前期(4世紀前半)
{{https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/TeradoOtsukaKofun_nt_1.JPG/320px-TeradoOtsukaKofun_nt_1.JPG}}

Published in: Technology
  • Be the first to comment

  • Be the first to like this

あなたのお勧めマップ作ってみよう! OpenStreetMap活用編 uMap

  1. 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. 2 uMap とは Open Sourceです! (WTFPL ラインセンス) Django (Python) and Leaflet (JavaScript)   サイト埋め込み用地図が即座に作成できます! 背景地図・複数のレイヤ マーカー(ポイント)・ライン・ポリゴン アイコン・色・透明度・形状の設定 ポップアップオプション設定 データのインポート サイトへのマップ埋め込みと共有 ヘルプ機能あり https://wiki.openstreetmap.org/wiki/JA:UMap サンプル 見てみよう
  3. 3. 3 uMap サンプル(案内図) 製品版インスタンス KOFイベント会場への案内図 http://u.osmfr.org/m/263380/ 経路 地物 建物 データ内容表示 レイヤ別
  4. 4. 4 uMap サンプル(案内図) 製品版インスタンス KOFイベント会場への案内図 http://u.osmfr.org/m/263380/ 経路 地物 建物 データ内容表示 レイヤ別 非表示:経路レイヤ
  5. 5. 5 uMap サンプル(案内図) 製品版インスタンス KOFイベント会場への案内図 http://u.osmfr.org/m/263380/ 経路 地物 建物 データ内容表示 レイヤ別 非表示:経路レイヤ 非表示:地物レイヤ
  6. 6. 6 uMap サンプル(案内図) 製品版インスタンス KOFイベント会場への案内図 http://u.osmfr.org/m/263380/ 経路 建物 データ内容表示 レイヤ別 非表示:経路レイヤ 非表示:建物レイヤ 非表示:地物レイヤ 地物
  7. 7. 7 uMap サンプル(思い出) 製品版インスタンス 史跡めぐり(京都府向日市) http://u.osmfr.org/m/71197/ 概要表示 マップ名称表示
  8. 8. 8 uMap サンプル(思い出) 製品版インスタンス 史跡めぐり(京都府向日市) ポップアップ表示
  9. 9. 9 uMap サンプル(思い出) 製品版インスタンス 北木島観光地図:マッピングパーティ http://u.osmfr.org/m/25736/ ポップアップ時 サイドパネル表示
  10. 10. 【マップ作成】 uMap トップページ 見てみよう https://umap.openstreetmap.fr/ja/
  11. 11. 11 uMap トップページ https://umap.openstreetmap.fr/ja/ 製品版インスタンス ログインして マップ登録 ● GitHub ● Bitbucket ● Twitter ● OpenStreetMap 連携アカウント
  12. 12. 12 uMap トップページ https://umap.openstreetmap.fr/ja/ 製品版インスタンス マップを作成 ボタンをクリック
  13. 13. 13 uMap ヨーロッパ初期表示 製品版インスタンス 描きたい場所まで ドラッグ移動
  14. 14. 14 uMap 場所の名前を検索 製品版インスタンス 検索用アイコン クリック 地名で検索 入力:osaka 選択する osaka Osaka City, Japan
  15. 15. 15 uMap 大阪市に移動 製品版インスタンス 検索での 移動結果
  16. 16. 16 uMap 広域表示 製品版インスタンス その後 描きたい場所まで ドラッグ移動 ズームアウト マウスホイール 操作でも可能
  17. 17. 17 uMap 拡大表示&固定 製品版インスタンス マップ初期表示 位置を固定可能 ズームイン マウスホイール 操作でも可能 設定変更したら「保存」 不要なら「キャンセル」
  18. 18. 18 uMap Help 機能 製品版インスタンス 各所に Help 機能あり
  19. 19. 19 各地物等の登録時 個別の値を設定 uMap マップ設定を編集 製品版インスタンス マップ全体の デフォルト値を設定  マーカー  ライン  ポリゴン レイヤの登録時 レイヤ別の デフォルト値を設定
  20. 20. 20 uMap マップ設定を編集 製品版インスタンス マップ全体 プロパティ設定 概要 マップの名称 マップの名称
  21. 21. 21 uMap レイヤを追加 製品版インスタンス レイヤを追加
  22. 22. 22 uMap レイヤを追加 製品版インスタンス 概要 レイヤの名称
  23. 23. 23 uMap マーカーを配置 製品版インスタンス 配置したいレイヤを 選択して 名称・概要を設定 概要 マーカーの名称 レイヤ選択 1 配置したい位置を クリック 2 3
  24. 24. 24 uMap マーカーの色変更 製品版インスタンス 変更後の色 Red を選択 シェイプ表示プロパティ 5 「色」横の「指定」をクリック 4
  25. 25. 25 uMap マーカーの色変更後 製品版インスタンス マーカーの色が 赤になる シェイプ表示プロパティ 6 アイコン形状 デフォルト
  26. 26. 26 ● 円形 ● まち針 uMap アイコン形状変更 製品版インスタンス アイコン形状 しずく型選択 シェイプ表示プロパティ 7
  27. 27. 27 uMap アイコンシンボル変更 製品版インスタンス アイコンシンボル hospital 選択 シェイプ表示プロパティ 8 「シンボル変更」ボタン クリックで反映 9 10「保存」ボタン クリック
  28. 28. 28 uMap マーカーポップアップ 製品版インスタンス ラベルの位置:左寄せ ポップアップオプション ラベルを表示:常時 ポップアップ時 表示内容:名称+概要
  29. 29. 29 uMap ラインを描画 製品版インスタンス 1 2 3 順次クリック ライン描く レイヤを選択して 名称・概要を設定 概要 レイヤ選択 ラインの名称
  30. 30. 30 uMap ラインを描画 製品版インスタンス 破線表示:5,15 ● 線の色 ● 線の太さ ● 線の透明度 シェイプ表示プロパティ
  31. 31. 31 uMap ポリゴンを描画 製品版インスタンス 概要 レイヤ選択 ポリゴンの名称 レイヤを選択して 名称・概要を設定 順次クリック エリア描く 1 2 3
  32. 32. 32 uMap ポリゴンを描画 製品版インスタンス シェイプ表示プロパティ 線と塗りつぶし 色・透明度 線の太さ 線の表示/非表示
  33. 33. 33 uMap 編集を終了 製品版インスタンス 編集終了するには 「編集を終了」
  34. 34. 34 uMap 再編集を開始 製品版インスタンス 編集を再開するには
  35. 35. 35 データのインポート(静的) Overpass API 使用:Overpass turbo http://overpass-turbo.eu/ 1. OpenStreetMap からデータ抽出 データ検索用クエリ作成 クエリ実行 → 地図上の抽出表示確認 GeoJSON 形式でエクスポート 2. uMap へのインポート 取得した GeoJSON をインポート カスタマイズ情報を追加 タイトル・説明・画像・リンク マーカーの種類・色 ウィザード 使ってみよう
  36. 36. 36 uMap データインポート 製品版インスタンス sport.geojson 「インポート」ボタン クリックで実行 GeoJSON ファイルを 選択する ● インポートデータ形式 ● geojson ● インポート対象レイヤ ● スポーツセンター
  37. 37. 37 uMap データインポート結果 製品版インスタンス
  38. 38. 38 uMap 追加インポート 製品版インスタンス アイコン形状 シンボルを変更 マーカー ホバー時に 名称表示 図書館情報も同様に geojson インポート
  39. 39. 39 uMap 埋め込みと共有 製品版インスタンス http://u.osmfr.org/m/264086/ 短縮URL マップ埋め込み データのダウンロード
  40. 40. 【参考資料】 OpenStreetMap から データ抽出
  41. 41. 41 Overpass API 使用:Overpass turbo http://overpass-turbo.eu/
  42. 42. 42 データ抽出:対象エリア表示 対象エリアを検索 検索窓に対象エリアの地域名など入力して検索する 対象が表示されたら選択する →(次ページ)対象エリアの地図表示 選択する ※例(OSAKA) Overpass turbo
  43. 43. 43 データ抽出:クエリ作成 対象エリアを拡大表示 → ウィザード ウィザード ボタンをクリック Overpass turbo
  44. 44. 44 データ抽出:クエリ作成 クエリウィザード → クエリ作成 クエリ作成 ボタンをクリック 対象地物のタグを入力 → (次ページ)   画面左側にクエリ表示 ※例(スポーツセンター) leisure=sports_centre Overpass turbo
  45. 45. 45 データ抽出:自動作成クエリ表示   作成済クエリ Overpass turbo
  46. 46. 46 データ抽出:自動作成クエリ内容
  47. 47. 47 データ抽出:クエリ実行 作成済クエリ → 実行 → 抽出地図表示 実行 ボタンをクリック Overpass API 使用:Overpass turbo
  48. 48. 48 データ抽出:GeoJSON 取得 エクスポート → 抽出データの取得 エクスポート ボタンをクリック データ:GeoJSON ● ダウンロード or コピー → uMap インポートで使用   Overpass API 使用:Overpass turbo
  49. 49. 49 Happy Mapping !   OpenStreetMap まち歩きでの発見 マップに反映 マッピングパーティ オープンデータソン ウィキペディアタウン ごく日常の生活の中でも! Noriko Takiguchi noriko.taki3@gmail.com https://wiki.openstreetmap.org/wiki/User:Taki3hira ともに学びましょう OSMについてのご質問など いつでもお気軽に! 継続は力なり uMap 使ってみよう

×