緯度経度からJavaScriptライブラリLeaflet.jsを使って地図上にポイントを記す枠組みを試した筆者(記事)であるが、よく見かける位置情報取得ボタンから現在位置を取得する方法を考えた。

Geolocation APIで現在位置を取得

W3Cが公式仕様として公開しているGeolocation APIを使えばブラウザを通じた位置情報を取得できる。スマホやPCなどOSが持つ位置情報を本人承諾のもとに取得できる。前回のHTMLファイルのマーカー部分を以下のように書き換える。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Leaflet Test</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <style>
    #map { height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>

<script>
  const map = L.map('map').setView([35.68, 139.76], 13);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  const locateControl = L.control({ position: 'topleft' });

  locateControl.onAdd = function () {
    const btn = L.DomUtil.create('button', '');
    btn.innerHTML = '🚩 現在地';
    btn.onclick = function () {
      navigator.geolocation.getCurrentPosition((pos) => {
        const lat = pos.coords.latitude;
        const lng = pos.coords.longitude;

        L.marker([lat, lng]).addTo(map)
          .bindPopup('あなたの現在地')
          .openPopup();

        map.setView([lat, lng], 15);
      });
    };

    return btn;
  };

  locateControl.addTo(map);
</script>

</body>
</html>

Leaflet.jsのL.markerでの位置挿入の代わりに L.control(公式API)とL.DomUtil(公式API)でボタンを作成し、 Geolocation APIのGet current position(公式API)で現在位置を取得。前回も使ったL.marker(公式API)でマーカーを立てる。

htmlファイル(geo.html)で保存し、保存フォルダ/ディレクトリ(デスクトップ/20261027)からpython標準サーバを以下のコマンドで立ち上げる。

python -m http.server 8000
  • python搭載のローカルサーバを起動

    python搭載のローカルサーバを起動

ブラウザでローカルホストのhttp://localhost:8000/geo.htmlにアクセスすると

  • 向かって左上に現在地🚩ボタンが表示される

    向かって左上に現在地🚩ボタンが表示される

現在地🚩ボタンを押すとズームアップで現在地に移動する。

  • 向かって左上に現在地🚩ボタンが表示される

    向かって左上に現在地🚩ボタンが表示される

ちなみにPCで取得するGeolocation APIの位置情報は、おおよそのものとなる。今回の表示位置は㎞近く大きくずれているのであしからず

スマホ用にアップロードして確認する

やはり、散歩やトレッキングなどで実践するには外部からスマホのブラウザでアクセスできてこそだろう。1枚のHTMLだけなので、アップロードして外部からモバイルでアクセスできればいい。

筆者はGitHubのリポジトリを活用してみることにした。アカウントがあれば、geo.htmlをindex.htmlに変えて自身のリポジトリのAddfileからアップロードし、Settingsのpagesメニューからデプロイすることでユーザー名.github.ioページで確認できる。もちろんレンタルサーバを借りていれば、そちらでも可能だ。

  • アップロードしたindex.htmlにアクセス

    アップロードしたindex.htmlにアクセス

  • 現在地ボタンを押すとGeolocationの位置情報ボタンが表示

    現在地ボタンを押すとGeolocationの位置情報ボタンが表示

  • map.setView([lat, lng], 15);でのズームで現在位置にピンがたつ

    map.setView([lat, lng], 15);でのズームで現在位置にピンがたつ

さすがにスマートフォンでの位置情報は精度が高いので、PCとは異なる。自分で作るファイルで自身の位置情報をとれると、不思議なもので何やら地図の活用方法がいろいろ浮かんでくる。スマホブラウザのブックマークにいれておくだけでカスタマイズ可能なトレイルマップになる。継続的に使用・改善を施しながら運動の秋を楽しもう。そう思う。