Contenu connexe Similaire à Mapframe 使ってみよう! (13) Plus de Noriko Takiguchi (20) 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)
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
14. 14
データ抽出:GeoJSON 取得
Overpass API 使用:Overpass turbo (http://overpass-turbo.eu/)
エクスポート → 抽出データの取得
エクスポート
ボタンをクリック
データ:GeoJSON
● ダウンロード or コピー
→ Mapframe 設定で使用
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 >
単純な地図へのリンクも可能
フルサイズ地図へのリンク
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で指定