WordPressで日本地図（PMTiles）を表示してみた

はじめに

WordPressサイト上に日本全国の詳細なベクター地図を表示したい場合、Google Maps APIなどを利用するとアクセス数に応じた従量課金やAPIキーの管理が必要になります。

そこで今回は、Japan PMTiles で無料配布されている日本のベクタータイルデータ（PMTiles）と MapLibre GL JS を使い、WordPress上に高速かつインタラクティブな日本地図を表示する仕組みを設定してみました。

テーマのアップデートに影響されないよう、WordPressの作法に則った自作ミニプラグインとして実装しています。

全体構成と必要なもの

今回の構成は以下の通りです：

OS / サーバー環境: Rocky Linux / Nginx / PHP
CMS: WordPress 7系
地図データ:
- japan-20260806.pmtiles （全国ベクタータイルデータ）
- japan-20260806.json （スタイル定義JSONファイル）
フロントエンドライブラリ: MapLibre GL JS + pmtiles.js (CDN経由)

手順1. PMTilesデータとスタイルJSONのダウンロード・配置

まず、サーバー上で大容量のPMTilesファイルとスタイルJSONをダウンロードします。

1. データの取得

japan.pmtiles はデータサイズが大きいため（約1.5GB）、curl や wget 等で直接サーバーへ取得するか、SCP/SFTP経由で転送します。

$ curl -LO https://armd-01.sakura.ne.jp/tiles/japan-20260806.pmtiles

今回設定するにあたり、実際に使用したJSONファイルはここに置いてあります。

2. サーバー上へのディレクトリ作成とファイル配置

WordPressのアップロードディレクトリ配下に pmtiles ディレクトリを作成し、配置します。
（※作業時はWordPressのルートパスを環境変数 $WP_HOME 等として定義しておくとスムーズです）

必要なファイル（PHPプラグインコードおよびスタイル定義JSON）は GitHub に公開しているリポジトリ wordpressjapanmappmtiles から取得して配置することも可能です。

# 環境変数のセット例
$ export WP_HOME=/path/to/your/wordpress

# pmtiles 用ディレクトリの作成と権限設定
$ sudo -E mkdir -p $WP_HOME/wp-content/uploads/pmtiles
$ sudo -E chown -R nginx:nginx $WP_HOME/wp-content/uploads/pmtiles

# ファイルを移動/配置
$ sudo -E mv japan-20260806.pmtiles $WP_HOME/wp-content/uploads/pmtiles/japan.pmtiles
$ sudo -E chown -R nginx:nginx $WP_HOME/wp-content/uploads/pmtiles/japan.pmtiles

# スタイルJSONファイルの配置(wordpress_japanmap_pmtilesリポジトリから設定する場合)
$ sudo -E cp wordpress_japanmap_pmtiles/japan.json $WP_HOME/wp-content/uploads/pmtiles/style.json
$ sudo chown -R nginx:nginx $WP_HOME/wp-content/uploads/pmtiles/style.json

3. `style.json` 内の参照URL修正

style.json をテキストエディタで開き、sources 内の PMTiles 参照URLを実際の公開URL（WebからアクセスできるURL）に変更します。

{
  "version": 8,
  "sources": {
    "japan": {
      "type": "vector",
      "url": "pmtiles://https://your-domain.com/wp-content/uploads/pmtiles/japan.pmtiles"
    }
  },
  ...
}

手順2. WordPress自作ミニプラグインの設定

運用の簡便性を考えて、独立したミニプラグインとして作成します。

GitHubリポジトリから取ってくる手順

すでに作成済みのコードを GitHub からクローンまたはダウンロードして配置します。

# リポジトリの取得
$ git clone https://github.com/KenichiTanino/wordpress_japanmap_pmtiles.git

# プラグインファイルの配置
$ sudo -E mkdir -p $WP_HOME/wp-content/plugins/japan-pmtiles-map
$ sudo -E cp wordpress_japanmap_pmtiles/japan-pmtiles-map.php $WP_HOME/wp-content/plugins/japan-pmtiles-map/
$ sudo chown -R nginx:nginx $WP_HOME/wp-content/plugins/japan-pmtiles-map

ファイルを手動で作成する場合

手動で作成する場合は、以下の手順でファイルを準備します。

1. プラグイン用ファイルの作成

$ sudo mkdir -p $WP_HOME/wp-content/plugins/japan-pmtiles-map
$ sudo touch $WP_HOME/wp-content/plugins/japan-pmtiles-map/japan-pmtiles-map.php
$ sudo chown -R nginx:nginx $WP_HOME/wp-content/plugins/japan-pmtiles-map

2. プラグインコードの記述 (japan-pmtiles-map.php)

$WP_HOME/wp-content/plugins/japan-pmtiles-map/japan-pmtiles-map.php に以下のコードを記述します

<?php
/*
Plugin Name: Japan PMTiles Map
Plugin URI:  https://github.com/KenichiTanino/wordpress_japanmap_pmtiles
Description: PMTilesを使用した日本地図を表示するショートコード     
    
    
Version:     1.0.0
Author:      Kenichi Tanino
*/

if (!defined('ABSPATH')) exit;

function render_japan_pmtiles_map($atts) {
    // ショートコード属性のデフォルト値
    $atts = shortcode_atts(array(
        'width'  => '100%',
        'height' => '500px',
        'lat'    => '35.681236', // デフォルト位置: 東京駅
        'lng'    => '139.767125',
        'zoom'   => '10',
    ), $atts, 'japan_map');

    // ライブラリの読み込み (MapLibre GL JS & pmtiles.js)
    wp_enqueue_style('maplibre-css', 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css');
    wp_enqueue_script('maplibre-js', 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js', array(), null, true);
    wp_enqueue_script('pmtiles-js', 'https://unpkg.com/pmtiles@3.0.7/dist/pmtiles.js', array(), null, true);

    // WordPress標準の作法: wp_upload_dir() で公開URLを自動算出
    $upload_dir = wp_upload_dir();
    $style_url  = $upload_dir['baseurl'] . '/pmtiles/style.json';

    ob_start();
    ?>
    <div id="japan-pmtiles-map" style="width: <?php echo esc_attr($atts['width']); ?>; height: <?php echo esc_attr($atts['height']); ?>;"></div>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        if (typeof maplibregl !== 'undefined' && typeof pmtiles !== 'undefined') {
            const protocol = new pmtiles.Protocol();
            maplibregl.addProtocol("pmtiles", protocol.tile);

            const map = new maplibregl.Map({
                container: 'japan-pmtiles-map',
                style: '<?php echo esc_url($style_url); ?>',
                center: [<?php echo esc_js($atts['lng']); ?>, <?php echo esc_js($atts['lat']); ?>],
                zoom: <?php echo esc_js($atts['zoom']); ?>
            });

            map.addControl(new maplibregl.NavigationControl());
        }
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('japan_map', 'render_japan_pmtiles_map');

3. プラグインの有効化

WordPress管理画面の 「プラグイン」>「インストール済みプラグイン」 に移動し、「Japan PMTiles Map」 を有効化します。

と生成AIは言ってましたが、これではできなかったのでwpコマンドで有効化します。

$ wp plugin list --path=$WP_HOME
+--------------------------+----------+--------+---------+----------------+-------------+
| name                     | status   | update | version | update_version | auto_update |
+--------------------------+----------+--------+---------+----------------+-------------+
...
| japan-pmtiles-map        | inactive | none   | 1.0.0   |                | 
...
+--------------------------+----------+--------+---------+----------------+-------------+
$ wp plugin activate japan-pmtiles-map --path=$WP_HOME
Plugin 'japan-pmtiles-map' activated.
Success: Activated 1 of 1 plugins.

手順3. ブログ記事・固定ページへの埋め込み

記事編集画面（ブロックエディター）で以下を「ショートコード」ブロックを追加します。
実はいまいちショートコードブロックがよく分かりませんが、直接コピーすれば動作します。

[japan_map height="600px" lat="35.6812" lng="139.7671" zoom="12"]

上記のパラメータで高さ（height）、初期表示の緯度・経度（lat/lng）、ズームレベル（zoom）を柔軟に変更可能です。

実例

以下に追加してみました。普通なら東京駅ですが、なんとなく横浜駅にしてあります。

運用上のポイント・注意点

大容量ファイルのアップロード

japan.pmtiles はサイズが非常に大きいため、WordPress標準の「メディアを追加」機能からはアップロード上限エラーになります。必ずSSH/FTPコマンド（scp / rsync / sftp）でサーバー上のディレクトリへ直接配置してください。
CORSおよびHTTP Rangeリクエスト

PMTilesは必要なタイル部分のみをHTTP Rangeヘッダーで部分読み込み（Range Request）します。もしドメインが異なる場所から配信する場合は、Webサーバー（Nginx等）で Access-Control-Allow-Origin や Range ヘッダーを正しく許可しておく必要があります。

まとめ

PMTilesとMapLibre GL JSを組み合わせることで、有料の外部地図サービスに依存することなく、自前サーバーでスムーズで美しいベクトル日本地図をWordPress上に表示できるようになりました。

自作ミニプラグイン化しておけばテーマ変更・更新時にも安全なので、ぜひ試してみてください。

本来、これだけではなくいろいろできるようなので、ちゃんとしたwordpressのプラグインを作る際は、いろいろできるようにした方がいいと思います。暇があれば。。