ホーム / 登山地図 /

ブログに埋め込む登山地図はLeaflet+地理院タイルで決まり！

2021年11月21日日曜日

CSS HTML JavaScript Leaflet マップ埋め込み 国土地理院 地理院タイル 地理院地図 登山地図

t f B! P L

ブログで山行記を書く際に、登山ルートのGPSログやピンなどを配置して地図をブログ内に埋め込むと便利です。登山用地図は、等高線や登山用のルートまで表示された国土地理院の発行する2万5千分1地形図（通称2.5万図）や5万分1地形図（通称5万図）が定番ですが、オンラインでは地理院地図（電子国土Web）で閲覧することができます。

この地理院地図の地図画像は、地理院タイルとして各種ライブラリから利用することができます。そこで、Lefletというインタラクティブな地図を埋め込むことができるライブラリから地理院タイルを読み込んで登山記録を地図に表示する方法をご紹介します。

Lefletとは

Leafletとは、Googleマップのようなインタラクティブな地図を作成するためのJavaScriptライブラリです。Google Maps PlatformのJavaScript APIを使うのとほとんど同じことができますが、Leafletオープンソースであり、無料で利用できます。

地理院地図、地理院タイルとは

地理院地図は、国土地理院が提供する地図閲覧サービスです。Googleマップに似ていますが、国土地理院の地図は、等高線などの地形に関する情報が詳しく描かれており、登山用には国土地理院の地形図が便利です。

地理院タイルとは、先述の地理院地図で使われている地図画像データをタイル状に区分けして外部ライブラリから利用できるようにしたものです。この地理院タイルをLeafletから利用することでGoogleマップのようにインタラクティブな地図を作ることができます。

地図を作って見ましょう

それでは早速、Lefletと地理院タイルを使って地図を表示させてみましょう。ほとんど国土地理院の地理院タイルを用いたサイト構築サンプル集通りですが、登山記録として、GPSログやピンを追加で表示させます。

HTMLとCSSの準備

GitHubのサンプルコードを元に少し変更を加えます。

まずはhead部のlinkタグでLeafletのCSSとJavaScriptライブラリを読み込みます。最後の行は、GPSのログであるGPXファイルをLeafletで読み込むためのプラグインです。

ここで、head部に記述ができる環境の場合はこの通りでよいのですが、筆者の場合はGoogleのブログサービス、Bloggerを使っているので記事ごとにhead内を変更することができません。その場合は、記事の本文先頭にlinkタグを書いてしまいましょう。気持ち悪いですがこれでも問題なく動作します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GSI Tiles on Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>

地図はbody内のid="map"属性で指定された要素に表示しますが、幅、高さをスタイルシートで指定します。

<style>
  #map {height: 300px; width: 100%;}
</style>
</head>

body内にid="map"属性を持ったdiv要素を配置します。

<div id="map"></div>

JavaScriptで地図を表示する

上記のdiv要素より下にscriptタグで地図を表示させるためのJavaScriptコードを記述します。

まずはMapオブジェクトを作ります。

<script>
var map = L.map('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>"
}).addTo(map);

次にGPXファイルのデータを変数に代入します。GPXファイルはYamapやSTRAVAを始めとしたアプリやGPSロガーから取ってきます。今回はYamapで記録したログをダウンロードしました。

GPXファイルは、どこかにアップロードしてURLを指定してもよいのですが、Bloggerの場合はGPXファイルがアップロードできないのと、外部URLからの読み込みが許可されてないため、文字列としてそのままコードに貼付ける必要があります。複数行の文字列なのでバッククオート（`）で囲みテンプレートリテラルとして記述します。下記は途中を省略した一部です。

var gpx = `<gpx ...
           <trkseg><trkpt lat="34.3642013" lon="135.8624252">
           <ele>359.27</ele><time>2021-11-14T02:36:40Z</time></trkpt>
           ... `;

GPXファイルをmapオブジェクトに追加します。オプションとしてスタート・ゴールのアイコン画像や線の外観を指定しています。

new L.GPX(gpx, {async: true,
  marker_options: {
      startIconUrl: 'images/pin-icon-start.png',
      endIconUrl: 'images/pin-icon-end.png',
      shadowUrl: 'images/pin-shadow.png'
  },
  polyline_options: {
      color: 'blue',
      opacity: 0.75,
      weight: 5,
      lineCap: 'round'
  }}).addTo(map);

いくつかマーカー（ピン）も追加します。

L.marker([34.36719144491052, 135.8619855041734],
	   { title: '吉水神社' }).addTo(map);
L.marker([34.36841738029576, 135.85885910043802],
	   { title: '金峯山寺蔵王堂' }).addTo(map);
L.marker([34.36794213347387, 135.85514232831662],
	   { title: '脳天大神' }).addTo(map);
L.marker([34.36340231341314, 135.86120328236964],
	   { title: '駐車場' }).addTo(map);

最後にmap.setViewで中心座標と縮尺を指定して地図を表示します。scriptタグを閉じて完成です。


  map.setView([34.3685, 135.86], 15);
</script>

下記が作成したマップです。等高線が入った国土地理院の地図にGPS軌跡とマーカーを配置できました。この地図はGoogleマップみたいにドラッグして中心を移動したり縮尺を変えたりすることができます。

まとめ

JavaScriptを使うのが少し複雑ですが、コード自体はシンプルなのでそれほど大変では無かったです。登山記録を地図に表示する目的だとこれ一択ではないでしょうか！

PVアクセスランキング にほんブログ村 にほんブログ村 自転車ブログへ

関連記事

QooQ