Mapframe 使ってみよう！
•
1 gostou•484 visualizações
OpenStreetMap のデータ活用 Wikipedia での地図活用について mapframe, maplink タグの使用例 State of the Map Japan 2018 LT 発表 (2018/08/11)
Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a Mapframe 使ってみよう！
Semelhante a Mapframe 使ってみよう！ (13)
Mais de Noriko Takiguchi
Mais de Noriko Takiguchi (20)
Último
Último (12)
Mapframe 使ってみよう！
- 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 きっかけ 週刊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 Wikipedia Town の機会 http://www.wakayama-u.ac.jp/kishiwada/post_464.html 久米田への道、未来を探れ！ まちライブラリー ブックフェスタ2018 in関西 2018/05/06 に参加 久米田古墳群の古墳地図 複数地物の地図表現 １：１の相互リンクとは違った効果 地点（Point）マーカーをクリック → 情報閲覧 タイトル 画像 イベ ント 後早 速 試 して みる https://ja.wikipedia.org/wiki/久米田古墳群 <mapframe> <maplink> タグの使用
- 4. 4 久米田古墳群の古墳地図 https://ja.wikipedia.org/wiki/久米田古墳群 <maplink>タグの使用 ● タイトルリンク表示 ● → クリックでフルサイズ地図 <mapframe>タグの使用 ● タイトル・地図表示 ● 地図上や ボタン ● → クリックでフルサイズ地図 ★PCブラウザ★ ★スマホのブラウザ★ 背景画像が真っ白になる
- 5. 5 久米田古墳群の古墳地図 https://ja.wikipedia.org/wiki/久米田古墳群 クリックで元画面へ 地点マーカー → クリックで開くウィンドウ ● 貝吹山古墳ページへのリンク ● 画像（説明文も書ける） フルサイズ地図 地図タイトル
- 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 Mapframeでの表示比較 ★PCブラウザ★ 地点（Point） エリア（Polygon） 地点（Point） 右側：OSMの形状のままの GeoJSON 左側：エリアの場合は中心点を抽出した GeoJSON
- 8. 8 Mapframeでの表示比較 ★PCブラウザ★ 右側：マーカーの大きさ・色 デフォルト 左側：マーカーの大きさ・色 カスタマイズ カスタマイズ デフォルト ★プレビューで表示★
- 10. 10 データ抽出：対象エリア表示 Overpass API 使用：Overpass turbo (http://overpass-turbo.eu/) 対象エリアを検索 検索窓に対象エリアの地域名など入力して検索する 対象が表示されたら選択する →（次ページ）対象エリアの地図表示 選択する
- 11. 11 データ抽出：クエリ作成 Overpass API 使用：Overpass turbo (http://overpass-turbo.eu/) 対象エリアを拡大表示 → ウィザード ウィザード ボタンをクリック
- 12. 12 データ抽出：クエリ作成 Overpass API 使用：Overpass turbo (http://overpass-turbo.eu/) クエリウィザード → クエリ作成 クエリ作成 ボタンをクリック 対象地物のタグを入力 → （次ページ） 画面左側にクエリ表示 ※例（遺跡） historic=archaeological_site
- 13. 13 データ抽出：クエリ実行 Overpass API 使用：Overpass turbo (http://overpass-turbo.eu/) 作成済クエリ → 実行 → 抽出地図表示 実行 ボタンをクリック
- 14. 14 データ抽出：GeoJSON 取得 Overpass API 使用：Overpass turbo (http://overpass-turbo.eu/) エクスポート → 抽出データの取得 エクスポート ボタンをクリック データ：GeoJSON ● ダウンロード or コピー → Mapframe 設定で使用
- 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 Mapframe 設定：レイアウト ★PCブラウザ★ <mapframe ...> GeoJSON </mapframe> align=”center” align=”right”align=”left” width height × × 中心点の座標 [latitude, longitude] 地図タイトル text
- 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 >
- 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 GeoJSON：単一地物の例 <mapframe ... > {"type": "Feature", "geometry": { … 地物のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} } </mapframe> <mapframe ...> GeoJSON </mapframe>
- 22. 22 GeoJSON：複数地物の例 <mapframe ...> GeoJSON </mapframe> <mapframe ... > {"type": "FeatureCollection", "features": [ {"type": "Feature", "geometry": { … 地物1のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} }, {"type": "Feature", "geometry": { … 地物2のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} }, ... ]} </mapframe>
- 23. 23 GeoJSON："geometry" 例 {"type": "Feature", "geometry": { … 地物のタイプや緯度・経度情報 ...}, "properties": { … タイトル・説明・マーカー情報 ...} } "geometry": { "type": "Point", "coordinates": [135.4096578, 34.4597445] }, type 地物のタイプ Point（点） Polygon（エリア） LineString（ライン） coordinates 地物の地点 [経度, 緯度]
- 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 GeoJSON："properties" 例 "properties": { ... "marker-symbol": "-number" } marker-symbol マーカーの種類 ★地物を表すもの ● museum, star, … ★自動カウンター ● ‑number : 連番（1, 2, … の値） ● -letter : A … Z の値 ● グループ別カウンター -number-bar, -number-foo -letter-bar, -letter-foo
- 28. 28 近江八景地図 https://ja.wikipedia.org/wiki/近江八景 フルサイズ地図 マーカーのカスタマイズ ● -letter 設定 ● star 設定 浮御堂 比良山地
- 35. 35 Happy Mapping ! いろんな表現・活用 まち歩きでの発見 マッピングパーティ オープンデータソン ウィキペディアタウン ごく日常の生活の中でも！ Noriko Takiguchi noriko.taki3@gmail.com https://wiki.openstreetmap.org/wiki/User:Taki3hira ともに学びましょう OSMについてのご質問など いつでもお気軽に！ 継続は力なり Mapframe 使ってみよう