Vue.jsでMapLibre GL JSの開発環境を構築してみた

![img](https://day-journal.com/memo/images/try-074_00.gif)

<br>

![img](https://day-journal.com/memo/images/try-074_01.png)

<br>

この記事は、「[Vue Advent Calendar 2021](https://qiita.com/advent-calendar/2021/vue)」の13日目の記事です。

### Vue.jsでMapLibre GL JSの開発環境を構築してみました :tada:  

Vue.jsでMapLibre GL JSを利用する時に、ライブラリを直接読み込んでいるかたもいると思いますが、今回はVue.js向けのラッパーライブラリを利用して開発環境を構築してみました！

<br>

事前準備

- Vue.jsの環境準備  
    - [Vue.js #005 – Vue CLI 4でVue 3環境構築](https://day-journal.com/memo/vue-js-005)
    - node v16.10.0
    - npm v7.24.0
    - Vue.js v3.0.0

<br>

### Vue.js x MapLibre GL JS

Vue.jsとMapLibre GL JSの組み合わせの場合は、「[vue-maplibre-gl](https://github.com/razorness/vue-maplibre-gl)」を利用します。

<br>

はじめに、各ライブラリをインストールします。今回は「Vue CLI UI」を利用し「maplibre-gl」と「vue-maplibre-gl」を検索しインストールします。

![img](https://day-journal.com/memo/images/try-074_02.png)

<br>

次に、ひな形に地図を表示させるためのコードを追記していきます。  

全体構成

![img](https://day-journal.com/memo/images/try-074_03.png)

<br>

#### package.json

```json
{
  "name": "vue-maplibre",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "maplibre-gl": "^1.15.2",
    "node-sass": "^6.0.1",
    "sass": "^1.42.0",
    "sass-loader": "^10.2.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-maplibre-gl": "^1.0.0-beta.26",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "typescript": "~4.1.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
```

<br>

/src

#### main.ts

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'vue-maplibre-gl/src/css/maplibre.scss'

createApp(App).use(store).use(router).mount('#app')
```

main.tsでmaplibre.scssを読み込みます。

```typescript
import 'vue-maplibre-gl/src/css/maplibre.scss'
```

<br>

/src/views

#### Home.vue

```vue
<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
        <MapPane></MapPane>
    </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import MapPane from '@/components/MapPane.vue';

@Options({
    components: {
        HelloWorld,
        MapPane,
    },
})
export default class Home extends Vue {}
</script>
```

Home.vueでMapPaneコンポーネントを読み込みます。

```html
<MapPane></MapPane>
```

```javascript
import MapPane from '@/components/MapPane.vue'

components: {
    MapPane
}
```

<br>

/src/components

#### MapPane.vue

```vue
<template>
    <div class="mapPane">
        <MglMap
            :mapStyle="mapStyle"
            :center="center"
            :zoom="zoom"
            :bearing="bearing"
            :pitch="pitch"
            :hash="hash"
        >
        </MglMap>
    </div>
</template>

<script>
import { MglMap } from 'vue-maplibre-gl';

export default {
    name: 'MapPane',
    components: {
        MglMap,
    },
    data() {
        return {
            mapStyle:
                'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]',
            center: [139.7648, 35.6794],
            zoom: 11,
            bearing: 64.8,
            pitch: 60,
            hash: true,
        };
    },
};
</script>

<style scoped>
.mapPane {
    height: 800px;
    margin: 0;
    text-align: left;
}
</style>
```

マップのタグを指定します。

```vue
<template>
    <div class="mapPane">
        <MglMap
            :mapStyle="mapStyle"
            :center="center"
            :zoom="zoom"
            :bearing="bearing"
            :pitch="pitch"
            :hash="hash"
        >
        </MglMap>
    </div>
</template>
```

マップのサイズを指定します。

```css
.mapPane {
    height: 800px;
    margin: 0;
    text-align: left;
}
```

マップの設定をします。背景レイヤは、今回[Maptiler](https://maptiler.jp)を指定します。

```javascript
import { MglMap } from 'vue-maplibre-gl';

export default {
    name: 'MapPane',
    components: {
        MglMap,
    },
    data() {
        return {
            mapStyle:
                'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]',
            center: [139.7648, 35.6794],
            zoom: 11,
            bearing: 64.8,
            pitch: 60,
            hash: true,
        };
    },
};
```

<br>

ローカルサーバーで確認

```shell
npm run serve
```

<br>
       
ローカルサーバーを立ち上げると、マップが表示されます。

![img](https://day-journal.com/memo/images/try-074_00.gif)

<br>

#### Vue.jsとvue-maplibre-glでMapLibre GL JSの開発環境の構築ができました :thumbsup: 

MapLibre GL JSのライブラリを、直接読み込んで利用することもできますが、ラッパーライブラリを利用することである程度は手軽に操作ができると思います:bulb: ただ、用途により直接読み込むかラッパーライブラリを利用するかの選択は必要となりそうです。

<br>

Vue.js・MapLibre GL JSについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://day-journal.com/memo/tags/Vue-js" target="_blank">tags - Vue.js</a>
<a href="https://day-journal.com/memo/tags/MapLibreGLJS" target="_blank">tags - MapLibre GL JS</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>