ゲームぽく移動記録をつける

スタンプラリータイプの位置情報ゲームがなかなか定着しないので、自分ルールで移動記録をつける仕組みでも勉強がてら作ってみるか、と思い立ちました。その第一弾です。

• 地図を表示する

地図を表示するにあたり、どの地図を使うか？というのがあります。OSSの技術者ならOpen Street Map使えや！ってところですが、有志のサーバを使うのは気が引けるし、自分でサーバを立てるのも面倒なので、国土地理院のものを使ってやってみます。

JavascriptのライブラリにLeafletを使い、地図タイルの表示などを行います。setViewに緯度、経度、マップレベルを指定して、tileLayerを指定すれば、ブラウザ上に地図が表示されるはずです。

1. <head>
2.   <meta charset="UTF-8">
3.   <title>leafletで地図表示</title>
4.   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
5.   <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
6.   <script>
7.     function init() {
8.       var map = L.map('mapview');
9.       //地図表示する座標(緯度経度)
10.       map.setView([43.41030385, 142.42685039], 14);
11.       L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
12.         attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院タイル</a>"
13.       }).addTo(map);
14.     }
15.   </script>
16. </head>
17. <body onload="init()">
18.   <div id="mapview" style="width:800px;height:600px"></div>
19. </body>

すると、こんな地図が出ます。

このマップ表示に対して、GPSロガーで記録した緯度経度情報をプロットしていくことで、移動記録にしたるすることができるってわけですね。