https://blog.ingenboy.com/tags/mapbox/ Recent content in Mapbox on Ingenboy.inc https://blog.ingenboy.com/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E https://blog.ingenboy.com/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E Hugo -- 0.152.2 en Sat, 23 Aug 2025 11:12:29 +0900 https://blog.ingenboy.com/post/mymap/ Sat, 23 Aug 2025 11:12:29 +0900 https://blog.ingenboy.com/post/mymap/ <h1 id="背景">背景</h1> <p>地理、楽しいっすよね。めっちゃ好きです。<br> でも <strong>Google Maps</strong> って使うと、結局は Google って会社にお世話になってるわけですよ。</p> <p>僕はこの「どっかの会社のお世話になっている状態」があまり好きではない。<br> だからサーバやデータセンターも自前運用するし、<br> Slack の代わりに <strong>Rocket.Chat</strong> を使うし、<br> JIRA ではなく <strong>Redmine</strong> を使うんです。</p> <p>じゃあ <strong>Google Maps を自前で運用するにはどうするか？</strong><br> これが今回のテーマです。</p> <hr> <h1 id="地図アプリがどうやって動いているか">地図アプリがどうやって動いているか</h1> <p>必要なものは大きく分けて二つ。</p> <ol> <li><strong>レンダリングエンジン</strong>（地図を描画するライブラリ）</li> <li><strong>マップデータ</strong>（地図そのもののソース）</li> </ol> <h2 id="ossのレンダリングエンジンライブラリ">OSSのレンダリングエンジン（ライブラリ）</h2> <ul> <li><a href="https://leafletjs.com/">Leaflet</a></li> <li><a href="https://openlayers.org/">OpenLayers</a></li> <li><a href="https://maplibre.org/">MapLibre GL JS</a></li> </ul> <p>それぞれでベースマップを比較できるデモも作りました。<br> 👉 <a href="https://maps.ingenboy.com/">比較サイト</a></p> <h2 id="ossのマップデータ">OSSのマップデータ</h2> <p>選択肢は色々あります。</p> <ul> <li> <p><strong>OpenStreetMap (OSM)</strong><br> 世界中のボランティアが作る地図データ。ラスタ（画像タイル）も配布されているが、見た目は少し古臭い。<br> 実際の中身はベクタだが、配信されている地図はあらかじめ描画されているラスタタイル。（元がベクタならそれを出せばいいじゃん、、とは思った）</p> </li> <li> <p><strong>OpenMapTiles</strong><br> OSMデータをベクトルタイル化するOSS。<br> これを使えば、<strong>Google Maps 並みにきれいなベクトル地図</strong>を完全自前で運用できる。</p> </li> </ul> <hr> <p>ラスタはやっぱり綺麗に映らないですね。なのでベクトルマップが欲しいのですが、 ベクトルマップは自分で作るしかないっぽいです。（Maptilerって会社がOSMを所有しようとしているので気をつけて）</p> <h1 id="実際に-osm--vector-map-を自前ホストする流れ">実際に OSM → Vector Map を自前ホストする流れ</h1> <h2 id="1-osmデータのダウンロード">1. OSMデータのダウンロード</h2> <p>Geofabrik から地域ごとの <code>.osm.pbf</code> を落とす。</p> <p>例: 日本全体<br> <a href="https://download.geofabrik.de/asia/japan.html">https://download.geofabrik.de/asia/japan.html</a></p> <h2 id="2-openmaptiles-でベクトルタイル生成">2. OpenMapTiles でベクトルタイル生成</h2> <p>まずは GitHub から OpenMapTiles を取得します。</p>