Mapframe 使ってみよう！

State of the Map Japan 2018 2018/08/11
Noriko Takiguchi
OSM Mapper : taki3hira
Programmer
Noriko Takiguchi
Programmer
Noriko Takiguchi
Programmer
Mapframe
使ってみよう！
～ Wikipedia での地図活用～

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
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
<maplink>タグの使用
● タイトルリンク表示
● → クリックでフルサイズ地図
<mapframe>タグの使用
● タイトル・地図表示
● 地図上や　　　ボタン
● → クリックでフルサイズ地図
★PCブラウザ★
★スマホのブラウザ★
　背景画像が真っ白になる

5
　クリックで元画面へ
　地点マーカー
→ クリックで開くウィンドウ
● 貝吹山古墳ページへのリンク
● 画像（説明文も書ける）
フルサイズ地図
地図タイトル

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
Mapframeでの表示比較 ★PCブラウザ★
地点（Point）
　エリア（Polygon）　地点（Point）
右側：OSMの形状のままの GeoJSON
左側：エリアの場合は中心点を抽出した GeoJSON

8
Mapframeでの表示比較 ★PCブラウザ★
右側：マーカーの大きさ・色デフォルト
左側：マーカーの大きさ・色カスタマイズ
カスタマイズデフォルト
★プレビューで表示★

（１）
OpenStreetMap から
データ抽出

10
データ抽出：対象エリア表示
対象エリアを検索
検索窓に対象エリアの地域名など入力して検索する
対象が表示されたら選択する
→（次ページ）対象エリアの地図表示
選択する

11
データ抽出：クエリ作成
対象エリアを拡大表示 → ウィザード
ウィザード
ボタンをクリック

12
データ抽出：クエリ作成
クエリウィザード → クエリ作成
クエリ作成
対象地物のタグを入力
→ （次ページ）
　　画面左側にクエリ表示
※例（遺跡）
historic=archaeological_site

13
データ抽出：クエリ実行
作成済クエリ → 実行 → 抽出地図表示
実行

14
データ抽出：GeoJSON 取得
エクスポート → 抽出データの取得
エクスポート
データ：GeoJSON
● ダウンロード or コピー
→ Mapframe 設定で使用

（２）
Wikipedia ソース編集
Mapframe 設定

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
Mapframe 設定：レイアウト ★PCブラウザ★
<mapframe ...> GeoJSON </mapframe>
align=”center” align=”right”align=”left”
width
height
× × 中心点の座標
[latitude, longitude]
地図タイトル
text

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
Mapframe 設定：ラベル表記 ★PCブラウザ★
lang=”ja”
lang=”en”lang=”local”
英語表記
日本語表記
地域別表記

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
GeoJSON：単一地物の例
<mapframe　... >
{"type": "Feature",
"geometry": { … 地物のタイプや緯度・経度情報 ...},
"properties": { … タイトル・説明・マーカー情報 ...}
}
</mapframe>

22
GeoJSON：複数地物の例
<mapframe　... >
{"type": "FeatureCollection",
"features": [
{"type": "Feature",
"geometry": { … 地物1のタイプや緯度・経度情報 ...},
},
{"type": "Feature",
"geometry": { … 地物2のタイプや緯度・経度情報 ...},
},
...
]}
</mapframe>

23
GeoJSON："geometry" 例
{"type": "Feature",
"geometry": { … 地物のタイプや緯度・経度情報 ...},
}
"geometry": {
"type": "Point",
"coordinates": [135.4096578, 34.4597445]
},
type
地物のタイプ
Point（点）
Polygon（エリア）
LineString（ライン）
coordinates 地物の地点 [経度, 緯度]

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
GeoJSON："properties" 例
"properties": {
...
"marker-symbol": "-number"
}
marker-symbol
マーカーの種類
　
★地物を表すもの
●
museum, star, …
★自動カウンター
● ‑number : 連番（1, 2, … の値）
● -letter : A … Z の値
● グループ別カウンター
-number-bar, -number-foo
-letter-bar, -letter-foo

その後の
Mapframe 設定例
　
～最近のまち歩きから～

27
近江八景地図
https://ja.wikipedia.org/wiki/近江八景
Mapframe 表示

28
近江八景地図
マーカーのカスタマイズ
●
-letter 設定
●
star 設定
　
浮御堂
比良山地

29
近江八景地図
エリアの中心点を抽出
★小さなエリア★
見えないので
Relation の
中心点を抽出
三井晩鐘
瀬田唐橋

30
近江八景地図
マーカーのカスタマイズ
●
-number 設定

31
近江八景地図
撮影した写真も適用

32
近江八景地図
撮影した写真も適用

33
中江藤樹先生の案内板地図
https://ja.wikipedia.org/wiki/中江藤樹
Mapframe 表示

34
中江藤樹先生の案内板地図
https://ja.wikipedia.org/wiki/中江藤樹

35
Happy Mapping !
　
いろんな表現・活用
まち歩きでの発見
マッピングパーティ
オープンデータソン
ウィキペディアタウン
ごく日常の生活の中でも！
Noriko Takiguchi
noriko.taki3@gmail.com
https://wiki.openstreetmap.org/wiki/User:Taki3hira
ともに学びましょう
OSMについてのご質問など
いつでもお気軽に！
継続は力なり
Mapframe
使ってみよう

Mapframe 使ってみよう！

Mapframe 使ってみよう！

Recommended

More Related Content

What's hot

What's hot(9)

Similar to Mapframe 使ってみよう！

Similar to Mapframe 使ってみよう！(13)

More from Noriko Takiguchi

More from Noriko Takiguchi(20)

Recently uploaded

Recently uploaded(10)

Mapframe 使ってみよう！