Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FOSS4G 2015 Tokyo Vector Tiles Pt. 2
Search
Hidenori FUJIMURA
October 09, 2015
2
150
FOSS4G 2015 Tokyo Vector Tiles Pt. 2
Hidenori FUJIMURA
October 09, 2015
Tweet
Share
More Decks by Hidenori FUJIMURA
See All by Hidenori FUJIMURA
Smart Maps and Bazaar
hfu
0
32
Sensemaking with Smart Maps
hfu
0
19
Smart Mapsfor the United Nations,with the United Nations
hfu
0
82
UN Smart Maps
hfu
0
70
スマート地図バザールによる地図XMLのタイル配信
hfu
0
50
国土地理院におけるベース・レジストリの整備とDX推進への取り組み
hfu
0
110
Smart Maps for the UN and for All
hfu
1
73
DWG 7 Update 2023-02
hfu
1
36
UN Open GIS Initiative
hfu
0
36
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Faster Mobile Websites
deanohume
297
30k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Designing Experiences People Love
moore
136
23k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
The Language of Interfaces
destraynor
151
23k
Transcript
Ministry of Land, Infrastructure, Transport and Tourism Geospatial Information Authority
of Japan ベクトルタイル利用サイトを作ろう Hidenori FUJIMURA Geospatial Information Authority of Japan 1 FOSS4G 2015 Tokyo ハンズオンデイ 2015-10-09T14:00/17:00 @駒場RC An棟2F
本日の流れ ① 導入:ベクトルタイルの概要と未来 ② GitHubから地理院地図をフォークして、マ イ地理院地図を作る ③ マイ地理院地図にインターネット上のタイ ルレイヤを加える ④ マイ地理院地図に簡単なベクトルデータを 加える(ただしベクトルタイルとして) ⑤ 地理院ベクトルタイルを素のLeafletサイト に表示してみる。
⑥ 地理院ベクトルタイルの表示内容を調整す る 2
GitHub https://github.com/ ・ Sign in してください。 ・ 登録がまだの方は Sing up
3
地理院地図@GitHub https://github.com/gsi-cyberjapan/gsimaps 4 国土地理院 情報普及課 地理院地図 ここまで一旦確認 ※手が空いたらRepository 内容を眺めてみてください。
地理院地図をフォーク フォーク:元のレポジトリの支流を作ること。 ※本流に戻したいものができたら、提案できる(Pull Request) 5 をクリック! ※すでに自分のアカウントにフォークをお持ちの場合、そのフォークを使うか、 例えば organization アカウントを作成してそこにフォークしてください。
フォークができます レポジトリのURLをフォークのURLに変更 6 の Edit をクリックして、「gsi-cyberjapan」の部分を あなたのアカウント(下記例では foss4g-tokyo-vt)に書き換えて http://foss4g-tokyo-vt.github.io/gsimaps/ として
Save する ※GitHubの実装都合 で、まだリンクは つながりません。 次のステップが必要。
タイトルを入れる index.html の 68 行め を書き換えに行く 7 クリック をクリック ※実は、タイトルの有無がGitHub版地理院地図と
運用版地理院地図の唯一の違いです。
実際の書き換え 68行め「<!-- replace with your logo … -->」のあたりを書き換え 8
同様に css/gsimaps.css に加筆 http://maps.gsi.go.jp/css/gsimaps.css の最後の部分をコピペ 9
サイト確認 レポジトリのトップに戻ってサイトを確認 10 左のようになればOK! 左のようにならなければ、 GitHub 側のファイル更新に 時間がかかっているかも。 リロードを試みる。 次は、字がはみ出ているのを
なおす。
【トピック】(ブラウザ)キャッシュ問題 必要に応じてブラウザキャッシュ をクリアする必要あり。 ↓ 開発段階では「キャッシュを無効 にする」のも手。 11
タイトルがはみ出ないようにする css/gsimaps.css を適宜調整 12 例:font-familyをコメントアウトしてデフォルトに Font-height, font-size をすべて 12px に
It works! 余力のある方は、「検索ボックスの例示文字列変更」や「メニューの英語化」、 「情報→地理院地図についての変更」などを試してみてください。 13
【お時間ある方は】 Further reading • GitHub に置いているデータをそのまま HTTP 提供する GitHub Pages について
14