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

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

  • 地図を表示する

地図を表示するにあたり、どの地図を使うか？というのがあります。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ロガーで記録した緯度経度情報をプロットしていくことで、移動記録にしたるすることができるってわけですね。

適当に過ごす日常blog

50まじかになってフリーになったSEです。今までなんとか生きてこれたので、これからもなんとかなるかなーという適当な日々をつづります。

0コメント

  • 1000 / 1000