この記事の内容

この記事では地図サービスであるMapboxを使用して自分の位置情報をウェブのマップにマーカーとして表示する方法とそのコードを紹介したいと思います。

やり方やそのコードの意味についてなども具体的に解説していきたいと思います。

ご挨拶

みなさんこんにちは！

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

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

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

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

Mapboxとは？

Mapboxとは様々な情報を集約し自由自在な地図描画を行うことでロケーションデータの活用を推進する地図開発プラットフォームです。

Mapbox - デジタル地図の開発プラットフォーム

ポケモンGOやingressなどはこのMapboxのプラットフォームを使用して作られていました。

地図業界はGoogleがその市場のほとんど占めてしまっており、より幅広い活用が難しかったところを自由なカスタマイズができる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.1.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />

<style>
    html { height: 100% }
    body { height: 100% }
    #map { height: 100%; width: 100%}
</style>
</head>

<body>
<div id='map'></div>

<script>
    mapboxgl.accessToken = 'ここにアクセストークンを入れてください';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [139.7670516, 35.6811673],
        zoom: 15
    });
    // 位置情報の取得に成功した時の処理
    function success(position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;

        // マーカーを作成し、地図に追加
        new mapboxgl.Marker({color:'pink'})
            .setLngLat([longitude, latitude])
            .addTo(map);

        // 地図の中心をユーザーの現在位置に移動
        map.flyTo({
            center: [longitude, latitude],
            zoom: 15
        });
    }

    // 位置情報の取得に失敗した時の処理
    function error() {
        alert('位置情報の取得に失敗しました。');
    }

    // ユーザーの位置情報を取得
    if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        alert('お使いのブラウザでは、位置情報の取得がサポートされていません。');
    }
</script>

</body>
</html>

上記のコードの構造の説明をすると

HTML構造

<!DOCTYPE html>: HTML5文書を宣言します。

**<html>**タグ: HTML文書のルート要素です。

**<head>**セクション: 文書のメタデータ（文字セット、タイトル、外部リンクなど）を含みます。

<meta charset="utf-8" />: 文書の文字エンコーディングがUTF-8であることを指定します。

<title>: ウェブページのタイトルを指定します。

<script>と<link>: Mapbox GL JSのJavaScriptライブラリとCSSスタイルシートを外部から読み込みます。

<style>: 文書内に直接CSSスタイルを記述します。ここでは、html、body、**#map**要素を画面いっぱいに広げるスタイルを定義しています。

**<body>**セクション: ウェブページのコンテンツを含みます。

<div id='map'>: 地図を表示するためのコンテナ要素です。

JavaScript

mapboxgl.accessToken: MapboxのAPIを使用するために必要なアクセストークンを設定します。これは、Mapboxのサービスにアクセスするためのキーです。

new mapboxgl.Map({...}): Mapbox GL JSを使用して新しい地図のインスタンスを作成し、設定オプションを指定します。

container: 地図を表示するHTML要素のIDを指定します（この場合は**'map'**）。

style: 地図のスタイルURLを指定します。

center: 地図の初期中心点を経度と緯度で指定します。

zoom: 地図の初期ズームレベルを指定します。

navigator.geolocation.getCurrentPosition(success, error): ユーザーの現在位置を取得するためにGeolocation APIを使用します。位置情報が取得できた場合は**successコールバック関数を、取得に失敗した場合はerror**コールバック関数を実行します。

**success**関数: 位置情報の取得に成功したときに実行される関数です。取得した緯度と経度を使用して、ピンク色のマーカーを地図上に配置し、地図の中心をユーザーの現在位置に移動させます。

**error**関数: 位置情報の取得に失敗したときに実行される関数です。エラーメッセージをアラートで表示します。

実際にやってみる

上記のHTMLのコードをウェブブラウザで表示してみると位置情報のオンオフが確認され、音にすると位置情報を取得しMapboxの地図上に位置情報がマーカーとして表示されます。

https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_174250_03d19030-b2da-cdc4-93a5-99237740ad4b.avif

実際にはこの地図に自分の位置情報がマーカーとして表示されます。

色はピンク色に指定しています。

最後に

今回はMapboxを利用してブラウザ画面に地図を表示してみました。

利用料金は月間リクエスト数が50,000までであれば無料であり、個人で使用する分にはほぼ無料で使用することができます。

そこまでたくさんリクエストすることは殆どないかと思います。

こちらにMapboxの利用料金について書かれたURLを貼っておきます。

利用料金｜Mapbox Japan

まとめ

今回はMapboxを使用してウェブ上に地図を表示し、自分の位置情報を表示する方法を説明しました。位置情報が取得できるようになると色々サービス開発やアプリ開発などの幅が広がると思いますので、ぜひご参考にしてください。