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

一般的なOSMタイルサーバは保守コストが高い
Protomapsとは
構築方法
- 1. タイルサーバの構築
- 2. MapLibre GLでタイルサーバのタイルデータを読み込む
おわりに

一般的な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は、クラウドストレージ上に単一の静的ファイルとして展開できる、無料でカスタマイズ可能な世界地図です。)

と、書いてあるように、従来のタイルサーバのような動的生成は不要で、単一の静的ファイルを設置するだけで世界地図を配信できる。

構築方法

1. タイルサーバの構築

1.1. 構築済みPMTilesのダウンロード

まず、タイルサーバで配信するタイルデータをダウンロードする必要がある。PMTilesという形式のファイルを使用する。

Protomapsの公式サイトにOpenStreetMapのデータを元に構築された世界地図を含むPMTilesファイルが落ちているので、今回はそれを使うことにする。

約120GB、不要なデータを省いて軽量化することもできるが、今回は割愛する。

Builds | Protomaps Basemaps

maps.protomaps.com

最新バージョン(一番上)の項目にある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を使用することとする。

Leaflet.jsで構築する場合: https://docs.protomaps.com/pmtiles/leaflet

今回はReactを使用して地図表示をしてみる。

import { 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<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: '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
          },
        },
        layers: layers("protomaps", namedFlavor(theme), { lang: "en" }),
      },
      zoom: 0,
    });

    return () => {
      map.remove();
      maplibregl.removeProtocol("pmtiles");
    };
  }, []);

  return (
    <div className="w-full h-full" ref={mapContainer} />
  );
}

import { 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<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: '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
          },
        },
        layers: layers("protomaps", namedFlavor(theme), { lang: "en" }),
      },
      zoom: 0,
    });

    return () => {
      map.remove();
      maplibregl.removeProtocol("pmtiles");
    };
  }, []);

  return (
    <div className="w-full h-full" ref={mapContainer} />
  );
}