Vue3 + TypeScript で Mapbox GL JS を使ってマップを表示するサンプル

Vue3 + TypeScript で Mapbox のマップを表示するサンプルを紹介します。 create-vue で作成したプロジェクトに Mapbox の公式 JavaScript クライアントライブラリである Mapbox GL JS を組み入れることで簡単にマップを実装することができます。一方で Vue3 + TypeScript 環境向けのサンプルはあまり見受けられません。多少コツのようなものも必要でしたので、本記事で合わせて紹介していきます。

macOS: 12.3
vue: 3.2.31
typescript: 4.5.5
mapbox-gl: 2.7.1
@type/mapbox-gl: 2.6.3

Vue3 + TypeScript で Mapbox GL JS を使ってマップをレスポンシブに画面全体に表示

Vue3, TypeScript 環境で Mapbox地図をレスポンシブ表示する方法を紹介しています。主にCSSの設定が参考になれば幸いです。

Vue3 + TypeScript プロジェクトの作成

[ads]

それでは最初に今回使用する Vue3 + TypeScript のプロジェクトを以下の要領で作成します。

init vue@3 コマンドでプロジェクト作成
TypeScript のみ追加

なおプロジェクト作成の詳細は以下の記事を参考にしてください。

Mapbox GL JS のインストール

[ads]

mapbox-gl のインストール

次に作成したプロジェクトに Mapbox GL JS を公式サイトの手順に従ってインストールしていきます。以下のように npm install コマンドを実行します。

npm install --save mapbox-gl

% npm install --save mapbox-gl

added 29 packages, and audited 143 packages in 7s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

無事インストールが完了したら、 package.json に以下のように mapbox-gl が追加されていることを確認することができます。

Type/mapbox-gl のインストール

次に今回は TypeScript 環境で進めていきますので、 Type/mapbox-gl についても合わせてインストールしていきます。こちらをインストールしないと以下のようなワーニングが表示されてしまいます。

パッケージの公式サイトの手順に従ってインストールしていきます。

npm install --save @types/mapbox-gl

% npm install --save @types/mapbox-gl

added 2 packages, and audited 145 packages in 3s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

無事インストールが完了したら、 package.json に以下のように @types/mapbox-gl が追加されていることを確認することができます。

マップ表示用のコンポーネントの準備

[ads]

最後にマップ表示用のコンポーネントを準備しておきます。今回は新規に作成する MyMap.vue にマップ表示部分を実装し App.vue から MyMap.vue を呼び出すシンプルな構成にしたいと思います。

src / App.vue

<script setup lang="ts">
import MyMap from './components/MyMap.vue'
</script>
 
<template>
 <MyMap />
</template>

src / components / MyMap.vue

<script setup lang="ts">
</script>

<template></template>

tsconfig.json

環境によっては、コンパイラが以下のエラーを出力する場合があります。ここでは、以下のように tsconfig.json に Deprecations を無視する設定 (2行目) を追加して対処することにします。

Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.
  Use 'verbatimModuleSyntax' instead.

  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },

ここまででマップを表示させるためのプロジェクトの準備は完了となります。次に実際にマップの表示部分を実装していきましょう。

マップ表示の実装

[ads]

Mapbox Access Token の準備

Mapbox のマップ表示を実装するためには Mapbox アカウントとそのアカウントに紐づく Access Token が必要になります。こちらについては公式サイトの手順に従っていただければ問題なく作成取得ができると思います。今回はアカウント作成と同時に生成される Default Public Token を用いて進めていきます。

なお、以下は iOS 向けの記事ですが Access Token については Mapbox GL JS と考え方は同じですので詳細について参考にしてみてください。

[SwiftUI] Mapbox の地図を Maps SDK for iOS を用いて実装する - 環境準備編

SwiftUI において外部の地図サービスである MapBox の Maps SDK for iOS を用い SwiftUI で地図を実装する方法について「環境準備編」「実装編」の 2 回に分けて説明していきたいと思います。

マップ表示コンポーネントの実装

それでは本記事の本題であるマップ表示コンポーネントの実装を進めていきます。MyMap.vue の script タグに以下の内容を記載していきます。今回は国立競技場を中心としたマップを表示していきます。

実装のポイントは以下の通りです。

4 行目: 公式サイトの手順に従って mapbox-gl で使用する CSS をインポートします。
6 行目: ‘<your access token here>’ の部分には上述した Default Public Token の値を指定してください。

環境変数を用いて、安全に Token を設定する方法についてはこちらの記事を参考にしてください。

8 行目: Vue3 のライフサイクルフックの onMounted のタイミングで Map オブジェクトを生成する必要があります。

Attention Required! | Cloudflare

11 行目: container: 生成するマップのオブジェクトを識別する文字列
13 行目: 生成するマップの中心地点の緯度経度を指定

<script setup lang="ts">
import { onMounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

mapboxgl.accessToken = '<your access token here>'
 
onMounted(() => {
    const mapObj = new mapboxgl.Map({
        // 国立競技場
        container: 'japan-national-stadium', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [139.714590, 35.678184], // starting position [lng, lat]
        zoom: 14 // starting zoom
    })
})
</script>

template 部分には上記 container で指定した名称を id にもつ div コンテンツを配置していきます。

<template>
   <div id="japan-national-stadium"></div>
</template>

ここまでで公式サイトに記載されている手順は完了となりますが、実際にこの状態で npm run dev を用いてアプリケーションを起動してもマップが表示されていないと思います。次にこの問題に対処していきます。

mapbox-gl.css インポート問題への対処

色々試したところ 4 行目に記載した import 文をコメントアウトするとマップが表示されるようになることが分かりました。ただしこれでは根本的な解決にはなっていません。コメントアウトした状態でブラウザのコンソールを開くと以下のワーニングが表示されていることを見つけることができます。

ワーニングの詳細確認

1 つ目の警告は必要な css である mapbox-gl.css がロードできていないという内容です。

2 つ目の警告は環境固有のため無視できます。 3 つ目の警告はズームレベルが大きい時に一部の画像がロードできなかったというものでこれも無視できます。

つまりやはり対処すべきは 1 つ目の mapbox-gs.css に関する問題です。mapbox-gl.css をインポートした状態でマップが表示できる必要がありそうです。

div の高さ指定を追加

更に色々と調査したところ、以下の情報の通り、「div の高さを指定する」ことでマップが表示されるようになります。ちなみに高さの指定はパーセントではうまくいかず、 px や em といった実値を指定する必要があるようでした。

<template>
   <div id="japan-national-stadium" :style="{ height: '20em' }"></div>
</template>

上記の template に修正した後に npm run dev で起動してみると、無事以下のようにマップを表示することができました。この部分は今後改善される可能性もありますが 少なくとも mapbox-gl v2.7.1 では必須になってきますので注意してください。

参考:

Attention Required! | Cloudflare

まとめ

[ads]

init vue@3 で TypeScript を追加してプロジェクト作成

mapbox-gl, @type/mapbox-gl の 2 つを npm install

onMounted フックで mapbox.Map オブジェクトを生成

Default Public Token を用いる
container にオブジェクトの名称を指定

div タグに Map 表示部を記載

id に container で指定した名称を指定
height を px か em で指定

[ads]

今回使用したコード

src / App.vue

<script setup lang="ts">
import MyMap from './components/MyMap.vue'
</script>

<template>
  <MyMap />
</template>

[ads]

src / components / MyMap.vue

<script setup lang="ts">
import { onMounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

mapboxgl.accessToken = '<your access token here>'

onMounted(() => {
    const mapObj = new mapboxgl.Map({
        // 国立競技場
        container: 'japan-national-stadium', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [139.714590, 35.678184], // starting position [lng, lat]
        zoom: 14 // starting zoom
    })
})
</script>

<template>
    <div id="japan-national-stadium" :style="{ height: '20em' }"></div>
</template>

`tsconfig.json`

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue"
  ],
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

[ads]