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 プロジェクト の作成 それでは最初に 今回使用する Vue3 + TypeScript の プロジェクト を以下の要領で作成します。 create-vue で プロジェクト 作成 TypeScript のみ追加 なお プロジェクト 作成の詳細は以下の記事を参考にしてください。 Mapbox GL JS の インストール mapbox-gl の インストール 次に 作成した プロジェクト に Mapbox GL JS を 公式 サイト の手順 に従って インストール していきます。 以下の ように npm install コマンド を実行します。 無事 インストール が完了したら、 package.json に 以下のように mapbox-gl が追加されていることを確認することができます。 Type/mapbox-gl の インストール 次に … Read more