以下の記事では、GPSルートファイルをアップロードする形式で、表示する方法を紹介しました。
今回は、Wordpressのサーバー上にアップロード済みのファイルを表示するショートコードを作成したいと思います。
事前準備
表示したいファイルを事前にwp-content/uploads/gps/route.gpx
などにアップロードしてください。
ショートコードの作成
以下のショートコード用のコードをfunctions.phpに追加します。
function display_kml_gpx_map($atts) {
// ショートコードの属性をデフォルト値で設定
$atts = shortcode_atts(
array(
'file' => '', // ファイルのパス（必須）
),
$atts
);
// ファイルが指定されていない場合はエラーメッセージを表示
if (empty($atts['file'])) {
return '<p>ファイルパスを指定してください。</p>';
}
// ファイルURLを生成
$file_url = esc_url($atts['file']);
// 地図とスクリプトを出力
ob_start(); ?>
<div id="map" style="height: 500px;"></div>
<div style="margin: 20px 0;">
<a href="<?php echo $file_url; ?>" download class="button">ファイルをダウンロード</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var map = L.map('map'); // 地図を初期化
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
maxZoom: 18,
minZoom: 5
}).addTo(map);
// PHPで渡されたファイルURLをJavaScriptで使用
var fileUrl = "<?php echo $file_url; ?>"; // PHPの変数$file_urlをJavaScript変数fileUrlに渡す
// KMLまたはGPXのファイル内容を読み込む
var layer;
if (fileUrl.endsWith('.kml')) {
var kmlLayer = omnivore.kml(fileUrl)
.on('ready', function () {
// KMLデータの範囲に合わせて地図の位置とズームを調整
map.fitBounds(kmlLayer.getBounds());
})
.on('error', function (e) {
console.error('KML読み込みエラー:', e);
})
.addTo(map);
} else if (fileUrl.endsWith('.gpx')) {
var kmlLayer = omnivore.gpx(fileUrl)
.on('ready', function () {
map.fitBounds(kmlLayer.getBounds());
})
.on('error', function (e) {
console.error('GPX読み込みエラー:', e);
})
.addTo(map);
} else {
alert('対応していないファイル形式です。');
return;
}
});
</script>
<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
return ob_get_clean();
}
add_shortcode('kml_gpx_map', 'display_kml_gpx_map');
ショートコードの使い方
以下のようなショートコードでマップに表示できます。
※地図の読み込みに時間がかかる場合があります。
