Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
©OpenStreetMap contributors 2025.2.14 State of The Map Japan 2024 Hajime Kato オリジナルの デザイン地図を 作ってみた！ OpenMapTilesとMaputnikを 活用した地図スタイル
Slide 2
Slide 2 text
⽕曜まで開催されていた さっぽろ雪まつりにて… 筆者撮影
Slide 3
Slide 3 text
｢ラバーダック･デバッグ｣ 雪像を社内有志で制作！ 筆者撮影
Slide 4
Slide 4 text
⽔曜の朝､こうなって いました｡諸行無常😭 立入可能エリアから撮影
Slide 5
Slide 5 text
筆者撮影 とはいえ、 ものづくりは 楽しいなと 改めて実感！ とはいえ、 ものづくりは 楽しいなと 改めて実感！
Slide 6
Slide 6 text
● 加藤 創 Ｈajime Kato 地図とかデザインとか @chizutodesign ■ 株式会社MIERUNEのグラフィック デザイナー ■ 北海道に移住して３年目！ ■ FOSS4G Hokkaido 2024 運営も少々
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
01 はじめに
Slide 12
Slide 12 text
Q みなさんは、 どのように 地図を作って ますか？ . 質問
Slide 13
Slide 13 text
Adobe Illustrator, Inkscape, LibreOffice Draw, 手描き… 色々なやり方があると思います
Slide 14
Slide 14 text
今回はOpenMapTilesと Maputnikを使って、 オリジナル地図を作ります！
Slide 15
Slide 15 text
0 2 ＯpenStreetMapと OpenMapTiles
Slide 16
Slide 16 text
■自由な地図をみんなで 作るプロジェクト ■釈迦に説法かと思うので 詳しい説明は省きます🙏 OpenStreetMap ©OpenStreetMap contributors
Slide 17
Slide 17 text
■OpenStreetMap(OSM)の データを基に､ベクトル タイルが提供 ■OSMFJのタイルサーバ から読み込み OpenMapTiles https://tile.openstreetmap.jp/
Slide 18
Slide 18 text
0 3 Ｍaputnik とは？
Slide 19
Slide 19 text
■オープンソースの 地図スタイルエディタ ■コーディング不要で 直感的にスタイルを 編集できる Maputnik https://maplibre.org/maputnik/
Slide 20
Slide 20 text
■オープンソースの 地図ライブラリ ■簡単に地図を表示する ことができる MapLibre https://maplibre.org/
Slide 21
Slide 21 text
0 4 オリジナル地図を 作る＆デモ
Slide 22
Slide 22 text
0 4 - 1 夜景風
Slide 23
Slide 23 text
■飛行機や宇宙ステーション からの夜景が好き ■実際の写真を見ると、建物 ではなく道路の街灯が光っ ていることがわかる 夜景風マップ 飛行機からの夜景：筆者撮影
Slide 24
Slide 24 text
筆者撮影
Slide 25
Slide 25 text
■道路による街灯の色の違い を再現する ❶高速道路：太く・オレンジ色 ❷主要道路：やや細く・白色 ❸住宅地の街路：点線・白色 ❹歩道等：点線・暗め 夜景風マップ ©OpenStreetMap contributors
Slide 26
Slide 26 text
DEMO https://chizutodesign.github.io/ map-styles/#night-view ©OpenStreetMap contributors
Slide 27
Slide 27 text
0 4 - 2 伊能図風
Slide 28
Slide 28 text
■あの有名な伊能忠敬の地図 ■｢れきちず｣は歴史地図を 現代風デザインにしたもの ■逆に､現代地図を伊能図風 のマップにしてみる 伊能図風マップ 〔大日本沿海輿地全図 〕 第９３図 武蔵・相模(相模・横須賀・馬入川・武蔵 ・神奈川) 国立国会図書館デジタルコレクション
Slide 29
Slide 29 text
■毛筆のような書体に ○Google Fontsの“Yuji Syuku” ■フォントをpbf形式に変換 ■Maptunik上で書体設定 ■文字を縦書き表示！ 伊能図風マップ https://fonts.google.com/specimen/Yuji+Syuku
Slide 30
Slide 30 text
DEMO https://chizutodesign.github.io/ map-styles/#inozu ©OpenStreetMap contributors
Slide 31
Slide 31 text
0 4 - 3 れきちず現代
Slide 32
Slide 32 text
■｢れきちず｣は､現代風の デザインで歴史的な地図を 閲覧できるWebサービス ■江戸時代後期を公開中 れきちずとは https://rekichizu.jp/map
Slide 33
Slide 33 text
■｢れきちず｣で現代地図も 閲覧したい！ ■｢れきちず｣のデザインで OSM(OMT)を読み込む れきちず現代スタイル https://rekichizu.jp/map
Slide 34
Slide 34 text
■｢れきちず｣のデザインを 踏襲しつつ、アイコン等を 新規で作成した れきちず現代スタイル https://rekichizu.jp/map
Slide 35
Slide 35 text
DEMO https://rekichizu.jp/map ※右下から｢現代地図｣を選択 ©OpenStreetMap contributors
Slide 36
Slide 36 text
0 5 まとめ
Slide 37
Slide 37 text
■一度スタイルを作れば、全世界 に同じデザインが適用される ■拡大縮小等の操作が自由自在 ■自動で最新の情報に更新される (1週間に1回ほど更新) 地図スタイルのメリット
Slide 38
Slide 38 text
地図スタイルのデメリット …
Slide 39
Slide 39 text
■時間が無限に溶ける 地図スタイルのデメリット
Slide 40
Slide 40 text
■OMT(OSM)+Maputnik+MapLibreを利用して全世界 にわたる独自デザインの地図を作ることができる ■新たな地図表現が生まれることに期待 ■オープンソースに携わっている方々へ、 ありがとうございます (自分ももっとOSMコントリビュートします…) まとめ