Mapframe 使ってみよう！
•
1 like•484 views
OpenStreetMap のデータ活用 Wikipedia での地図活用について mapframe, maplink タグの使用例 State of the Map Japan 2018 LT 発表 (2018/08/11)
Recommended
More Related Content
What's hot
Similar to Mapframe 使ってみよう！
Similar to Mapframe 使ってみよう！ (13)
More from Noriko Takiguchi
More from Noriko Takiguchi (20)
Recently uploaded
Recently uploaded (16)
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 使ってみよう