Mapboxで地図を表示してみた


# 1. はじめに

**Mapbox**では、地図情報サービスの開発プラットフォームが提供されています。

今回は JavaScriptライブラリ **Mapbox GL JS** を使用して、
マップをブラウザ画面に表示してみます。

# 2. 準備

## 2-1. アカウント 作成

**Mapbox**を利用するにあたって、
まず 以下リンク先にて アカウントを作成します。

https://account.mapbox.com/auth/signup/


## 2-2. アクセストークン 取得

Mapbox を使用するには、**アクセストークン**が必要になります。
以下リンク先の アカウントページにアクセスし、アクセストークンを取得します。

https://account.mapbox.com/


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/6b384335-f377-5015-25ef-ea9f21326257.png)


# 3. コーディング

簡単なマップ表示のためのコーディングを行っていきます。

## 3-1. サンプル

東京駅周辺（緯度35.6809591、経度:139.7673068）のマップを表示するHTMLファイル(*map.html*)を作成します。

```map.html
<!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
    });
</script>
 
</body>
</html>

```

*map.html*をブラウザで表示すると、以下のようになります。

![スクリーンショット 2021-02-16 21.03.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/03d19030-b2da-cdc4-93a5-99237740ad4b.png)


## 3-2. 解説

サンプルコード（*map.html*）の中身を解説します。

### ・ JavaScript・CSSファイル 設定

**head** 要素に、
以下のように Mapboxを使用するための jsファイル・cssファイルを設定します。


```html
    <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属性 指定

**style** 要素にて、HTMLのスタイルを指定します。

ここでは、ウィンドウの高さ**height**を*100%*に設定しています。 
また、マップ(id:map)のスタイルを、高さ**height**を*100%*、幅 **width**を*100%* に設定します。

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

### ・ マップ表示

**div**要素にて、マップ(id:*map*)をブラウザ画面上に配置します。

```html
<div id="map"></div>
```


### ・スクリプト記述

**script** 要素にて、マップ(id:*map*)を表示するためのスクリプトを記述します。

```html
<script>
    mapboxgl.accessToken = '<アクセストークン>';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [139.7670516, 35.6811673],
        zoom: 15
    });
</script>
```

以下に、スクリプトの中身を解説します。


- **アクセストークン設定**

第２項 で取得した アクセストークンを、
変数*mapboxgl.accessToken* にセット設定します。

```js
mapboxgl.accessToken = '<アクセストークン>';
```

- **マップ設定**

**Map** オブジェクトを作成し、ページにマップを表示します。

```js
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [139.7670516, 35.6811673],
    zoom: 15
});
```

オプションで、マップの細かな設定をすることができます。
ここでは **container**、**style**、**center**、**zoom** の４項目のオプションを設定しています。

|オプション|説明|
|:---:|:---|
|**container**|Mapbox GL JSがマップをレンダリングするHTML要素、または要素の文字列ID。|
|**style**|マップのスタイル。|
|**center**|最初にマップ表示する地理的中心点。|
|**zoom**|マップの初期ズームレベル。|

**container** 項目には、*’map’*を設定します。

**style** 項目には、マップのスタイルとして *mapbox://styles/mapbox/streets-v11* を指定します。

mapbox Docs - Mapbox styles
https://docs.mapbox.com/api/maps/styles/#mapbox-styles

スタイルはMapbox Studioで作成することもできます。

Mapbox Studio
https://studio.mapbox.com/


**center** 項目には、東京駅周辺（緯度35.6809591、経度:139.7673068）のマップを表示するために、
[*139.7670516*, *35.6811673*] を設定します。

**zoom** 項目には、マップの初期ズームレベルとして *15* を設定します。

# 4. おわりに

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

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

Mapbox 料金
https://www.mapbox.jp/pricing


# 参考情報

Mapbox GL _ JS API REFERENCE
https://docs.mapbox.com/mapbox-gl-js/api/