Protomaps

一般的なOSMタイルサーバは保守コストが高い OpenStreetMapのタイルサーバを構築する場合、通常はtileserver-glなどのサーバ実装を使う方法が一般的だが、VPS等を用意しその上で構築する必要があり、保守コストが高い。 そこでおすすめしたいのが、Protomapsというもの。Protomapsは特別なサーバ実装が不要で、単一の静的ファイルをホストするだけでタイルデータを配信することができる。オブジェクトストレージや共有ホスティングの余ったスペース等に設置するだけでタイルサーバを構築できる。 Protomapsとは Protomaps is a free, customizable map of the world, deployable as a single static file on cloud storage.(Protomapsは、クラウドストレージ上に単一の静的ファイルとして展開できる、無料でカスタマイズ可能な世界地図です。) https://protomaps.com/ と、書いてあるように、従来のタイルサーバのような動的生成は不要で、単一の静的ファイルを設置するだけで世界地図を配信できる。 構築方法 1. タイルサーバの構築 1.1. 構築済みPMTilesのダウンロード まず、タイルサーバで配信するタイルデータをダウンロードする必要がある。PMTilesという形式のファイルを使用する。 Protomapsの公式サイトにOpenStreetMapのデータを元に構築された世界地図を含むPMTilesファイルが落ちているので、今回はそれを使うことにする。 約120GB、不要なデータを省いて軽量化することもできるが、今回は割愛する。 https://maps.protomaps.com/builds/ 最新バージョン(一番上)の項目にあるdownloadというリンクからPMTilesをダウンロードする。 1.2. タイルデータの配信 ダウンロードしたPMTilesファイル(.pmtiles)を設置していく。 とはいっても、PMTilesファイルを公開アクセスが可能な場所に設置すれば終わり。オブジェクトストレージでもいいし、XServerやCoreServerなどの共有ホスティングの空きスペースでもいい。 おすすめはCloudflare R2、データ転送量(エグレス)に対して費用が発生しないため。 以降の手順は、PMTilesファイルをhttps://s3.example.org/protomaps/20260206.pmtilesに設置したものとして進めていく。適宜、自分の環境に合わせて置き換えてほしい。 これにて、タイルサーバの構築は完了 2. MapLibre GLでタイルサーバのタイルデータを読み込む Webで動作する地図レンダラーは、主にLeaflet.jsやMapLibre GLが存在する。Protomaps公式では、MapLibre GLの使用が推奨されているため、今回はMapLibre GLを使用することとする。 https://docs.protomaps.com/pmtiles/maplibre Leaflet.jsで構築する場合: https://docs.protomaps.com/pmtiles/leaflet 今回はReactを使用して地図表示をしてみる。 JSXimport { useRef, useEffect } from "react"; import { layers, namedFlavor } from "@protomaps/basemaps"; import maplibregl from "maplibre-gl"; import { Protocol } from "pmtiles"; import "maplibre-gl/dist/maplibre-gl.css"; export default function App() { const theme = "light"; const mapContainer = useRef&lt;HTMLDivElement | null>(null); useEffect(() => { const protocol = new Protocol(); maplibregl.addProtocol("pmtiles", protocol.tile); const map = new maplibregl.Map({ container: mapContainer.current!, style: { version: 8, glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf", sprite: "https://protomaps.github.io/basemaps-assets/sprites/v3/" + theme, sources: { protomaps: { type: "vector", url: "pmtiles://https://s3.example.org/protomaps/20260206.pmtiles", attribution: '&lt;a href="https://protomaps.com">Protomaps&lt;/a> © &lt;a href="https://openstreetmap.org">OpenStreetMap&lt;/a>', }, }, layers: layers("protomaps", namedFlavor(theme), { lang: "en" }), }, zoom: 0, }); return () => { map.remove(); maplibregl.removeProtocol("pmtiles"); }; }, []); return ( &lt;div className="w-full h-full" ref={mapContainer} /> ); }import { useRef, useEffect } from &quot;react&quot;; import { layers, namedFlavor } from &quot;@protomaps/basemaps&quot;; import maplibregl from &quot;maplibre-gl&quot;; import { Protocol } from &quot;pmtiles&quot;; import &quot;maplibre-gl/dist/maplibre-gl.css&quot;; export default function App() { const theme = &quot;light&quot;; const mapContainer = useRef&lt;HTMLDivElement | null&gt;(null); useEffect(() =&gt; { const protocol = new Protocol(); maplibregl.addProtocol(&quot;pmtiles&quot;, protocol.tile); const map = new maplibregl.Map({ container: mapContainer.current!, style: { version: 8, glyphs: &quot;https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf&quot;, sprite: &quot;https://protomaps.github.io/basemaps-assets/sprites/v3/&quot; + theme, sources: { protomaps: { type: &quot;vector&quot;, url: &quot;pmtiles://https://s3.example.org/protomaps/20260206.pmtiles&quot;, attribution: &#39;&lt;a href=&quot;https://protomaps.com&quot;&gt;Protomaps&lt;/a&gt; © &lt;a href=&quot;https://openstreetmap.org&quot;&gt;OpenStreetMap&lt;/a&gt;&#39;, }, }, layers: layers(&quot;protomaps&quot;, namedFlavor(theme), { lang: &quot;en&quot; }), }, zoom: 0, }); return () =&gt; { map.remove(); maplibregl.removeProtocol(&quot;pmtiles&quot;); }; }, []); return ( &lt;div className=&quot;w-full h-full&quot; ref={mapContainer} /&gt; ); } 以上で、タイルサーバの構築〜ブラウザー上での表示までが完了した。 おわりに 一般的なOSMタイルサーバの構築は保守コストが高いが、Protomapsは単一の静的ファイルを設置するだけでよいため、保守コストが低く、とても簡単に構築できる。まだまだ知名度の低いProtomapsだが、今後の成長に期待している。

【Protomaps】簡単にWebサイト上に地図表示！単一の静的ファイルだけでOSMタイルサーバの構築