WordPressの地図にKML/GPXのGPSルートファイルを表示する

ブログ

WordPressで地図にKML/GPXファイルを表示する

WordPressで、KMLやGPXファイルを地図上に表示する方法を紹介します。ここでは、Leafletを使用して地図を表示し、ファイルアップロードと地図の範囲調整を行うページテンプレートを作成します。

ページテンプレートコード

以下のコードを使用して、WordPressテーマにカスタムテンプレートを追加します。このテンプレートは、地図を表示し、KMLまたはGPXファイルをアップロードして表示しています。

<?php
/**
 * Template Name: KML/GPX Map with Upload Button and View Set
 * Description: Displays a Leaflet map with file upload and load button functionality. Adjusts map view based on uploaded file.
 */
get_header(); ?>

<div id="map" style="height: 500px;"></div>

<!-- ファイルアップロードフォーム -->
<div style="margin: 20px 0;">
    <input type="file" id="fileUpload" accept=".kml,.gpx" />
    <button id="loadFileButton" style="margin-left: 10px;">読み込み</button>
    <span>※対応ファイル: KML, GPX</span>
</div>

<script>
// DOMがロードされたら実行
document.addEventListener('DOMContentLoaded', function () {
    // 地図を初期化
    var map = L.map('map').setView([35.681236, 139.767125], 10); // 初期位置を東京駅付近に設定

    // 背景タイルを追加
    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
        maxZoom: 18,
        minZoom: 5
    }).addTo(map);

    // グローバル変数でファイルを保持
    var selectedFile = null;

    // ファイル選択イベント
    document.getElementById('fileUpload').addEventListener('change', function (event) {
        selectedFile = event.target.files[0]; // アップロードされたファイルを保持
    });

    // 読み込みボタンのクリックイベント
    document.getElementById('loadFileButton').addEventListener('click', function () {
        if (!selectedFile) {
            alert('ファイルを選択してください。');
            return;
        }

        var reader = new FileReader();

        // ファイルが読み込まれたら実行
        reader.onload = function (e) {
            var fileContent = e.target.result; // ファイルの内容を取得

            // KMLまたはGPXのファイル内容を読み込む
            var layer;
            if (selectedFile.name.endsWith('.kml')) {
                layer = omnivore.kml.parse(fileContent);
            } else if (selectedFile.name.endsWith('.gpx')) {
                layer = omnivore.gpx.parse(fileContent);
            } else {
                alert('対応していないファイル形式です。');
                return;
            }

            // レイヤーを地図に追加してズームを調整
            layer.addTo(map);

            var bounds = layer.getBounds(); // ファイルの地理的範囲を取得
            map.fitBounds(bounds); // 地図のビューを範囲に合わせる

        };

        // ファイルの内容を読み取る
        reader.readAsText(selectedFile);
    });
});
</script>

<!-- LeafletとOmnivoreのスクリプトとCSSを読み込む -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js"></script>

<?php get_footer(); ?>

実装手順

1. ページテンプレートの追加

上記のコードをコピーし、kml-gpx-map.php というファイル名でテーマフォルダ内に保存します。

2. テンプレートの選択

WordPressの管理画面で新しい固定ページを作成し、「テンプレート」オプションから「KML/GPX Map with Upload Button and View Set」を選択します。

3. ファイルアップロードと地図表示

ページを公開すると、地図とファイルアップロードフォームが表示されます。以下の操作が可能です：
– ファイルを選択: KMLまたはGPXファイルを選択します。
– 読み込み: ボタンを押すと、選択したファイルが地図に表示され、地図がファイルの範囲に合わせて調整されます。

実際に動くページはこちら

注意点

  • 対応するファイル形式は .kml と .gpx のみです。
  • 国土地理院の地図タイルを使用しています。
  • ファイルが大きい場合や複雑な構造の場合、読み込みに時間がかかることがあります。

コード解説

以下に、主要なコード部分をセクションごとに解説します。

1. テンプレート情報の設定

/**
 * Template Name: KML/GPX Map with Upload Button and View Set
 * Description: Displays a Leaflet map with file upload and load button functionality. Adjusts map view based on uploaded file.
 */
  • Template Name はWordPressの管理画面で選択可能なテンプレート名を指定します。

2. 地図表示エリアの設定

<div id="map" style="height: 500px;"></div>
  • 地図を表示するためのコンテナ要素です。id="map" により、この要素がLeafletで地図を描画するターゲットとして指定されます。
  • style="height: 500px;" で地図の高さを指定しています。

3. ファイルアップロードフォーム

<div style="margin: 20px 0;">
    <input type="file" id="fileUpload" accept=".kml,.gpx" />
    <button id="loadFileButton" style="margin-left: 10px;">読み込み</button>
    <span>※対応ファイル: KML, GPX</span>
</div>
  • ファイル選択用の <input> 要素 (id="fileUpload") を設置し、accept=".kml,.gpx" によってKMLとGPXファイルのみ選択可能に制限しています。
  • 「読み込み」ボタン (id="loadFileButton") をクリックすると、選択されたファイルが地図に表示されます。

4. 地図の初期化

var map = L.map('map').setView([35.681236, 139.767125], 10);
  • L.map('map') はLeafletの機能で、id="map" の要素に地図を描画します。
  • .setView([35.681236, 139.767125], 10) で地図の中心を東京駅付近に設定し、ズームレベルを10に指定しています。

5. 地図タイルの設定

L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
    maxZoom: 18,
    minZoom: 5
}).addTo(map);
  • 国土地理院の地図タイルを背景として追加します。
  • maxZoom と minZoom でズームレベルの制限を設定します。
  • attribution によって地図の出典を明記しています。

6. ファイル選択と読み込み処理

ファイル選択イベント

document.getElementById('fileUpload').addEventListener('change', function (event) {
    selectedFile = event.target.files[0];
});
  • <input type="file"> の change イベントを監視し、ユーザーが選択したファイルを selectedFile に格納します。

読み込みボタンのイベント

document.getElementById('loadFileButton').addEventListener('click', function () {
    if (!selectedFile) {
        alert('ファイルを選択してください。');
        return;
    }

    var reader = new FileReader();

    reader.onload = function (e) {
        var fileContent = e.target.result;

        var layer;
        if (selectedFile.name.endsWith('.kml')) {
            layer = omnivore.kml.parse(fileContent);
        } else if (selectedFile.name.endsWith('.gpx')) {
            layer = omnivore.gpx.parse(fileContent);
        } else {
            alert('対応していないファイル形式です。');
            return;
        }

        layer.addTo(map);
        map.fitBounds(layer.getBounds());
    };

    reader.readAsText(selectedFile);
});
  • ファイルが未選択の場合: アラートでユーザーに通知します。
  • FileReader API:
  • readAsText() でファイル内容を文字列として読み取ります。
  • onload イベントでファイル内容が読み込まれた後の処理を定義します。
  • Omnivoreプラグイン:
  • omnivore.kml.parse(fileContent) または omnivore.gpx.parse(fileContent) でファイル内容をLeafletレイヤーとして解析します。
  • ファイル形式が適切でない場合、アラートを表示します。
  • 地図ビューの調整:
  • map.fitBounds(layer.getBounds()) により、ファイル内の地理的範囲に基づいて地図をズーム・パンします。

7. 外部ライブラリの読み込み

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js"></script>
  • Leaflet: 地図描画ライブラリで、地図の基本機能を提供します。
  • Omnivore: Leafletプラグインで、KMLやGPXなどの地図データ形式を解析するために使用します。
タイトルとURLをコピーしました