オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜

2025.2.15に開催されたState of the Map Japan 2024にて発表した資料です。

Transcript

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