Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Mapframe 使ってみよう!

497 vues

Publié le

OpenStreetMap のデータ活用
Wikipedia での地図活用について
mapframe, maplink タグの使用例
State of the Map Japan 2018 LT 発表 (2018/08/11)

Publié dans : Technologie
  • Login to see the comments

Mapframe 使ってみよう!

  1. 1. State of the Map Japan 2018 2018/08/11 Noriko Takiguchi OSM Mapper : taki3hira Programmer Noriko Takiguchi OSM Mapper : taki3hira Programmer Noriko Takiguchi OSM Mapper : taki3hira Programmer Mapframe 使ってみよう! ~ Wikipedia での地図活用 ~
  2. 2. 2 きっかけ 週刊OSM 407 の記事 Mapframe が Wikipedia で使用可能になりました Mapframe ってなんだろう?   オープンデータソン まち歩き OpenStreetMap への登録 Wikipedia も編集 OpenStreetMap と Wikipedia の相互リンク 他にも活用方法は?  http://www.weeklyosm.eu/ja/archives/10326 Mapping Party Wikipedia Town (2018/05/01 – 05/07)
  3. 3. 3 Wikipedia Town の機会 http://www.wakayama-u.ac.jp/kishiwada/post_464.html 久米田への道、未来を探れ! まちライブラリー ブックフェスタ2018 in関西 2018/05/06 に参加 久米田古墳群の古墳地図 複数地物の地図表現 1:1の相互リンクとは違った効果 地点(Point)マーカーをクリック → 情報閲覧 タイトル 画像 イベ ント 後早 速 試 して みる https://ja.wikipedia.org/wiki/久米田古墳群 <mapframe> <maplink> タグの使用
  4. 4. 4 久米田古墳群の古墳地図 https://ja.wikipedia.org/wiki/久米田古墳群 <maplink>タグの使用 ● タイトルリンク表示 ● → クリックでフルサイズ地図 <mapframe>タグの使用 ● タイトル・地図表示 ● 地図上や   ボタン ● → クリックでフルサイズ地図 ★PCブラウザ★ ★スマホのブラウザ★  背景画像が真っ白になる
  5. 5. 5 久米田古墳群の古墳地図 https://ja.wikipedia.org/wiki/久米田古墳群  クリックで元画面へ   地点マーカー → クリックで開くウィンドウ ● 貝吹山古墳ページへのリンク ● 画像(説明文も書ける) フルサイズ地図 地図タイトル
  6. 6. 6 Mapframe による地図表現手順 Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/) 1. OpenStreetMap からデータ抽出 データ検索用クエリ作成 ← ウィザード使用 クエリ実行 → 地図上の抽出表示確認 抽出データ取得 ← GeoJSON 形式でエクスポート 2. Wikipedia ソース編集:Mapframe 設定 取得した GeoJSON をそのまま貼り付け 不要な情報(無関係なOSMのタグ)を削除 カスタマイズ情報を追加 タイトル・説明・画像 マーカーの種類(大きさ・色) Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/)Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/) https://www.mediawiki.org/wiki/Help:Extension:Kartographer
  7. 7. 7 Mapframeでの表示比較 ★PCブラウザ★ 地点(Point)  エリア(Polygon) 地点(Point) 右側:OSMの形状のままの GeoJSON 左側:エリアの場合は中心点を抽出した GeoJSON
  8. 8. 8 Mapframeでの表示比較 ★PCブラウザ★ 右側:マーカーの大きさ・色 デフォルト 左側:マーカーの大きさ・色 カスタマイズ カスタマイズ デフォルト ★プレビューで表示★
  9. 9. (1) OpenStreetMap から データ抽出
  10. 10. 10 データ抽出:対象エリア表示 Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/) 対象エリアを検索 検索窓に対象エリアの地域名など入力して検索する 対象が表示されたら選択する →(次ページ)対象エリアの地図表示 選択する
  11. 11. 11 データ抽出:クエリ作成 Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/) 対象エリアを拡大表示 → ウィザード ウィザード ボタンをクリック
  12. 12. 12 データ抽出:クエリ作成 Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/) クエリウィザード → クエリ作成 クエリ作成 ボタンをクリック 対象地物のタグを入力 → (次ページ)   画面左側にクエリ表示 ※例(遺跡) historic=archaeological_site
  13. 13. 13 データ抽出:クエリ実行 Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/) 作成済クエリ → 実行 → 抽出地図表示 実行 ボタンをクリック
  14. 14. 14 データ抽出:GeoJSON 取得 Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/) エクスポート → 抽出データの取得 エクスポート ボタンをクリック データ:GeoJSON ● ダウンロード or コピー → Mapframe 設定で使用  
  15. 15. (2) Wikipedia ソース編集 Mapframe 設定
  16. 16. 16 Mapframe 設定 地図フレームの設定<mapframe ...> GeoJSON </mapframe> <mapframe text="久米田古墳群の古墳地図" latitude=34.45929 longitude=135.40988 width="350" height="350" zoom=17 align="left" lang="ja"> {… GeoJSON ...} </mapframe > text 地図のタイトル latitude 地図中心の緯度 longitude 地図中心の経度 width 地図の幅  px height 地図の高さ px zoom 地図ズームレベル align 地図のページ内位置 left, center, right lang 地図ラベル表記言語 local, ja, en, ... 地図フレーム表示&リンク
  17. 17. 17 Mapframe 設定:レイアウト ★PCブラウザ★ <mapframe ...> GeoJSON </mapframe> align=”center” align=”right”align=”left” width height × × 中心点の座標 [latitude, longitude] 地図タイトル text
  18. 18. 18 Mapframe 設定:フレーム枠無 ★PCブラウザ★ frameless 指定:フレーム枠が非表示になる 地図のタイトル(text)は指定しない <mapframe frameless ...> GeoJSON </mapframe> <mapframe frameless latitude=34.45929 longitude=135.40988 width="350" height="350" zoom=17 align="left" lang="ja"> {… GeoJSON ...} </mapframe >
  19. 19. 19 Mapframe 設定:ラベル表記 ★PCブラウザ★ lang=”ja” lang=”en”lang=”local” 英語表記 日本語表記 地域別表記
  20. 20. 20 Maplink 設定 <mapframe> を <maplink> に変更 貼り付ける GeoJSON の共用はできない <maplink ...> GeoJSON </maplink> text リンク文言=地図タイトル latitude 地図中心の緯度 longitude 地図中心の経度 zoom 地図ズームレベル lang 地図表示言語 <maplink text="地図はこちら" zoom=17 latitude=34.45929 longitude=135.40988 /> <maplink text="久米田古墳群の古墳地図" latitude=34.45929 longitude=135.40988 zoom=17 lang="ja"> {… GeoJSON ...} </maplink > 単純な地図へのリンクも可能 フルサイズ地図へのリンク
  21. 21. 21 GeoJSON:単一地物の例 <mapframe ... > {"type": "Feature", "geometry": { … 地物のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} } </mapframe> <mapframe ...> GeoJSON </mapframe>
  22. 22. 22 GeoJSON:複数地物の例 <mapframe ...> GeoJSON </mapframe> <mapframe ... > {"type": "FeatureCollection", "features": [ {"type": "Feature", "geometry": { … 地物1のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} }, {"type": "Feature", "geometry": { … 地物2のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} }, ... ]} </mapframe>
  23. 23. 23 GeoJSON:"geometry" 例 {"type": "Feature", "geometry": { … 地物のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} } "geometry": { "type": "Point", "coordinates": [135.4096578, 34.4597445] }, type 地物のタイプ Point(点) Polygon(エリア) LineString(ライン) coordinates 地物の地点 [経度, 緯度]
  24. 24. 24 GeoJSON:"properties" 例 "properties": { "title": "[[貝吹山古墳]]", "description": "[[File:Kaibukiyama Kofun.jpg|200px]]", "marker-size": "small", "marker-color": "d08000" } title タイトル文言 [[ wikipedia内リンク ]] 設定も可能 description 説明文言 画像ファイルの設定も可能 Wikimedia Commons のファイル指定 [[ File:ファイル名|サイズ指定|説明]] marker-size マーカーのサイズ small, medium, large marker-color マーカーの色 RGBで指定
  25. 25. 25 GeoJSON:"properties" 例 "properties": { ... "marker-symbol": "-number" } marker-symbol マーカーの種類   ★地物を表すもの ● museum, star, … ★自動カウンター ● ‑number : 連番(1, 2, … の値) ● -letter : A … Z の値 ● グループ別カウンター -number-bar, -number-foo -letter-bar, -letter-foo
  26. 26. その後の Mapframe 設定例   ~ 最近のまち歩きから ~
  27. 27. 27 近江八景地図 https://ja.wikipedia.org/wiki/近江八景 Mapframe 表示
  28. 28. 28 近江八景地図 https://ja.wikipedia.org/wiki/近江八景 フルサイズ地図 マーカーのカスタマイズ ● -letter 設定 ● star 設定   浮御堂 比良山地
  29. 29. 29 近江八景地図 https://ja.wikipedia.org/wiki/近江八景 フルサイズ地図 エリアの中心点を抽出 ★小さなエリア★ 見えないので Relation の 中心点を抽出 三井晩鐘 瀬田唐橋
  30. 30. 30 近江八景地図 https://ja.wikipedia.org/wiki/近江八景 フルサイズ地図 マーカーのカスタマイズ ● -number 設定
  31. 31. 31 近江八景地図 https://ja.wikipedia.org/wiki/近江八景 フルサイズ地図 撮影した写真も適用
  32. 32. 32 近江八景地図 https://ja.wikipedia.org/wiki/近江八景 フルサイズ地図 撮影した写真も適用
  33. 33. 33 中江藤樹先生の案内板地図 https://ja.wikipedia.org/wiki/中江藤樹 Mapframe 表示
  34. 34. 34 中江藤樹先生の案内板地図 https://ja.wikipedia.org/wiki/中江藤樹 フルサイズ地図
  35. 35. 35 Happy Mapping !   いろんな表現・活用 まち歩きでの発見 マッピングパーティ オープンデータソン ウィキペディアタウン ごく日常の生活の中でも! Noriko Takiguchi noriko.taki3@gmail.com https://wiki.openstreetmap.org/wiki/User:Taki3hira ともに学びましょう OSMについてのご質問など いつでもお気軽に! 継続は力なり Mapframe 使ってみよう

×