Mapboxで位置情報をリアルタイムにウェブ上に表示する方法 #JavaScript

この記事では、ユーザーの位置情報をリアルタイムで取得し、その情報に基づいて地図上にマーカーを動的に更新することで、ユーザーの現在地を視覚的に追跡する機能を提供します。これにより、ウェブベースの地図アプリケーションでリアルタイムの位置追跡機能を実現できます。

自己紹介

みなさんこんにちは！

世界を体験できるメディアをミラーワールドを通じて作っているかっつーです。それを作るための背景や思いなどについてはこちらの記事を参考にしてください！

作るまでの具体的なステップについてはこちらの記事をご参考にしてください。

僕は世界のあらゆる境界線に関心があります。細胞や自己と他者、障害、国境、社会的対立など世界は境界線の積分でできていると考えています。

これらの境界線をテクノロジーによって、なめらかにし、自由自在にすることができれば、人々が生きやすいなめらかな社会が実現できると考えています。

この記事の読者ターゲット

ウェブ開発者やプログラマーで、リアルタイムの位置追跡機能を実装したい方。
Mapboxや地図アプリケーションの開発に興味がある方。
ユーザーの位置情報を活用したウェブベースのサービスを提供したい企業や開発者。

この記事を読むのにかかる時間は「6分」です。

この記事で行うこと

この記事ではMapboxを使用してユーザーのデバイスの位置情報を取得しその位置情報をウェブ上にマーカーとして表示する方法をご紹介します。

そのための方法をステップバイステップでお伝えしたいと思います。

1－1 Mapboxに登録する

まずはMapboxを利用するに当たりアカウントを作成する必要があります。

下記のリンク先からアカウントを作成してください。

1-2 アクセストークンを取得する

Mapboxを使用するためにはアクセストークンが必要になります。

アカウントを作成したら、アカウトページにアクセスしアクセストークンを取得してください。

その際には、pkと始まるものを作成し使用してください。skで始まっているアクセストークンはシークレットであるため、使用することができません。

1-3 Mapboxのアクセストークンを設定する

Mapboxを使用してWebサイトを表示する方法

先にこのコードをエディタに貼り付けてみる

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>リアルタイム位置情報トラッキング</title>
    <script src='<https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js>'></script>
    <link href='<https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css>' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    // Mapbox アクセストークンを設定
    mapboxgl.accessToken = 'ここにアクセストークンを設定してください！';
    // 地図を初期化
    var map = new mapboxgl.Map({
        container: 'map', // 地図を表示する要素のID
        style: 'mapbox://styles/mapbox/streets-v11', // 地図のスタイルURL
        center: [139.7900, 35.6550], // 初期中心座標（東京）
        zoom: 15 // 初期ズームレベル
    });

    // ユーザーの位置情報をリアルタイムで取得
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(showPosition, showError, {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 0
            });
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    }

  // マーカー変数の初期化（マーカーがまだ存在しないことを示す）
var userMarker = null;

// 位置情報が取得できた場合の処理
function showPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    // 地図の中心をユーザーの現在位置に更新
    map.flyTo({
        center: [longitude, latitude],
        essential: true // このアニメーションはユーザーの操作に基づくものとして扱う
    });

    // 以前に追加したマーカーがあれば、削除する
    if (userMarker) {
        userMarker.remove();
    }

    // 新しい位置にマーカーを追加
    userMarker = new mapboxgl.Marker({
        color: "#FF00FF" // ピンク色
    })
    .setLngLat([longitude, latitude])
    .addTo(map);
}

    // 位置情報の取得に失敗した場合の処理
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                alert("User denied the request for Geolocation.");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("Location information is unavailable.");
                break;
            case error.TIMEOUT:
                alert("The request to get user location timed out.");
                break;
            case error.UNKNOWN_ERROR:
                alert("An unknown error occurred.");
                break;
        }
    }if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        // 成功時の処理
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        console.log("緯度: " + latitude + ", 経度: " + longitude);
        // ここで地図上にマーカーを表示するなどの処理を行う
    }, function(error) {
        // エラー時の処理
        console.error("エラーコード: " + error.code + " - " + error.message);
    }, {
        enableHighAccuracy: true, // 高精度な位置情報を求める
        timeout: 10000, // 最大待ち時間 (ミリ秒)
        maximumAge: 0 // キャッシュされた位置情報の最大年齢
    });
} else {
    console.error("このブラウザではGeolocationがサポートされていません。");
}

    // 位置情報取得の開始
    getLocation();
</script>
</body>
</html>

HTML部分

<script src='<https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js>'></script>: Mapbox GL JSライブラリをページに読み込みます。これにより、Mapboxの地図機能を使うためのJavaScriptの関数やオブジェクトにアクセスできるようになります。
<link href='<https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css>' rel='stylesheet' />: Mapbox GL JSライブラリのスタイルシートをページに読み込みます。これにより、地図が正しくスタイリングされます。
<div id="map"></div>: 地図を表示するためのコンテナ要素です。JavaScriptコードがこの要素を使用して、ウェブページ上に地図を描画します。

JavaScript部分

地図の初期化

mapboxgl.accessToken: Mapbox APIを使用するためのアクセストークンを設定します。このトークンは、Mapboxアカウントから取得したもので、APIの使用量を追跡し、認証するために必要です。
new mapboxgl.Map({...}): 新しい地図オブジェクトを作成し、指定したオプションで初期化します。ここでは、地図を表示する要素(container), 地図のスタイル(style), 初期中心座標(center), ズームレベル(zoom)を指定しています。

ユーザーの位置情報のリアルタイムトラッキング

function getLocation(): ユーザーの位置情報をリアルタイムで取得する関数です。
navigator.geolocation.watchPosition(showPosition, showError, {...}): ブラウザのGeolocation APIを使用して、ユーザーの位置情報の変更を監視します。位置情報が更新されるたびに**showPosition関数が呼び出され、エラーが発生した場合はshowError**関数が呼び出されます。

位置情報の取得とマーカーの更新

var userMarker = null;: ユーザーの位置を示すマーカーを保持する変数を初期化します。最初はマーカーが存在しないため、**null**に設定します。
function showPosition(position): ユーザーの位置情報が更新されたときに呼び出される関数です。この関数内で、地図の中心をユーザーの現在位置に移動し、新しい位置にマーカーを配置します。
map.flyTo({...}): 地図の中心をアニメーション付きで新しい位置に移動します。
new mapboxgl.Marker({...}).setLngLat([...]).addTo(map);: 新しいマーカーを作成し、地図上の指定された位置に追加します。

エラー処理

function showError(error): 位置情報の取得に失敗した場合に呼び出される関数です。エラーの種類に応じて異なるアラートメッセージを表示します。

位置情報取得の開始

getLocation();: ページの読み込みが完了したときに、ユーザーの位置情報取得を開始するために**getLocation**関数を呼び出します。

1－4　コードペンに登録して表示してみる

コードペンは自分の作成したコードを実際にウェブ上に表示することができる無料のサービスです。

CodePen

実際にやってみる

実際にやってみると自分のデバイスの位置情報が移動するに連れて、ウェブ上のマップに表示されたマーカーの位置も変わっていると思います。

まとめ

記事では、Mapboxに登録し、アクセストークンを取得することから始め、HTMLとJavaScriptを使ってウェブページに地図を表示し、ユーザーのリアルタイムの位置情報をマーカーとして地図上に表示する方法を詳細に説明しています。このプロセスには、ユーザーの位置情報の取得、地図の中心の更新、新しい位置にマーカーを追加することが含まれます。

Mapboxに登録し、アクセストークンを取得する。
HTMLとJavaScriptを使用してリアルタイム位置情報トラッキングを実装する。
ユーザーの位置情報をリアルタイムで取得し、地図上にマーカーを動的に表示する。
位置情報取得の成功時と失敗時の処理を実装する。

Mapboxで位置情報をリアルタイムにウェブ上に表示する方法