ゲームぽく移動記録をつける
2019.06.20 00:40
スタンプラリータイプの位置情報ゲームがなかなか定着しないので、自分ルールで移動記録をつける仕組みでも勉強がてら作ってみるか、と思い立ちました。その第一弾です。
- 地図を表示する
地図を表示するにあたり、どの地図を使うか？というのがあります。OSSの技術者ならOpen Street Map使えや！ってところですが、有志のサーバを使うのは気が引けるし、自分でサーバを立てるのも面倒なので、国土地理院のものを使ってやってみます。
JavascriptのライブラリにLeafletを使い、地図タイルの表示などを行います。setViewに緯度、経度、マップレベルを指定して、tileLayerを指定すれば、ブラウザ上に地図が表示されるはずです。
- <head>
- <meta charset="UTF-8">
- <title>leafletで地図表示</title>
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
- <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
- <script>
- function init() {
- var map = L.map('mapview');
- //地図表示する座標(緯度経度)
- map.setView([43.41030385, 142.42685039], 14);
- 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);
- }
- </script>
- </head>
- <body onload="init()">
- <div id="mapview" style="width:800px;height:600px"></div>
- </body>
すると、こんな地図が出ます。
このマップ表示に対して、GPSロガーで記録した緯度経度情報をプロットしていくことで、移動記録にしたるすることができるってわけですね。