色々なマップライブラリでMapTilerを表示してみた

![try-042_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/bc56310a-38f2-ae53-fa43-965b0125f88a.gif)

<br>

![maptiler.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/246d521e-86ea-f06f-e8c6-a58ffaac945f.png)

![mapboxgljs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/a7816901-d8ba-a41c-844b-ae9d9cbda795.png)

![leaflet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/209a8188-1818-ab1b-65da-2e31b737b772.png)

![openlayers 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/3646af64-5be2-80e7-2b45-6c4b595df55d.png)

<br>

### 色々なマップライブラリでMapTilerを表示してみました :tada:  

Mapbox GL JS・Leaflet・OpenLayers等でMapTilerを利用してみたいかたの参考になればと思います！

<br>

## 1. MapTilerのタイルURL取得

はじめに、[MapTiler](https://maptiler.jp)のタイルURLを取得します。毎月無料枠もあるのでゼヒお試しください！

スタイル選択は、日本用に最適化されたMIERUNEMAPスタイルをおすすめします:map: 今回は「JP MIERUNE Streets」を利用してみます :bulb:

<br>

#### MIERUNEMAPスタイル一覧
![try-042_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/d5d25e46-9af7-7a0f-784d-59eeebf96398.png)


<br>

#### タイルURL取得方法
![try-042_02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/315d97d1-4236-351f-c38f-0c0913834a36.gif)

<br>

## 2. ビルド環境の準備
Mapbox GL JS・Leaflet・OpenLayersを手軽に始めるビルド環境を公開しています。今回はそのスターターを利用し、さくっと表示してみます :bulb:

マップライブラリはお好きなものを選んでみてください！

Mapbox GL JS v1
[mapboxgljs-starter](https://github.com/dayjournal/mapboxgljs-starter)  

Leaflet
[leaflet-starter](https://github.com/dayjournal/leaflet-starter)  

OpenLayers
[openlayers-starter](https://github.com/dayjournal/openlayers-starter)

<br>

## 3. ラスタタイルの表示
[MapTiler](https://maptiler.jp)を各マップライブラリで読み込むには、色々な方法が存在しますが今回は代表的な例で読み込んでみたいと思います。

ラスタタイルの表示方法を紹介します。基本は各スターターの「script.js」を修正するのみで表示可能です！

<br>

MapTilerのラスタタイルは、このタイルURLを利用します。
![try-042_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/8f09843a-badf-62ce-771e-c7af271edacd.png)

<br>

### Mapbox GL JS v1
![try-042_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/0e8a167d-3a63-43bc-088f-6f9244d60d72.png)

#### script.js

```javascript

// MIERUNE Streets読み込み
const map = new mapboxgl.Map({
    container: 'map',
    style: {
        'version': 8,
        'sources': {
            'm_streets': {
                'type': 'raster',
                'tiles': ['https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]'],
                'tileSize': 256,
                'attribution': '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
            }
        },
        'layers': [{
            'id': 'mierunemap',
            'type': 'raster',
            'source': 'm_streets',
            'minzoom': 0,
            'maxzoom': 18
        }]
    },
    center: [139.767, 35.681],
    zoom: 13
});

// コントロール関係表示
map.addControl(new mapboxgl.NavigationControl({
    visualizePitch: true
}));
```

<br>

### Leaflet
![try-042_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/b8f8c755-13b4-5209-08c4-1fbe38f61d38.png)

#### script.js

```javascript

// デフォルトアイコンパス
L.Icon.Default.imagePath = './img/icon/';

// MIERUNE Streets読み込み
const m_streets = new L.tileLayer('https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]', {
    attribution: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
});

// MAP読み込み
const map = L.map('map', {
    center: [35.681, 139.767],
    zoom: 14,
    zoomControl: true,
    layers: [m_streets]
});
```

<br>

### OpenLayers
![try-042_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/c5e8bc85-3ddb-5c23-e33a-8585b65d85e6.png)


#### script.js

```javascript

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';

// MIERUNE Streets読み込み
const map = new Map ({
    target: 'map',
    layers: [
        new TileLayer({
            source: new XYZ({
                url: 'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]',
                attributions: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
                attributionsCollapsible: false,
                tileSize: [256, 256],
                minZoom: 0,
                maxZoom: 18
            })
        })
    ],
    view: new View ({
        center: fromLonLat([139.767, 35.681]),
        zoom: 14
    })
});
```

<br>

## 3. ベクトルタイルの表示

最後に、ベクトルタイルの表示方法を紹介します。Mapbox GL JS v1については、script.jsの修正のみで表示可能ですが、LeafletとOpenLayersについては別途プラグインのインストールが必要です。

<br>

MapTilerのベクトルタイルは、このタイルURLを利用します。
![try-042_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/1c4a1b4d-453a-3ec1-b457-df31d325c9d9.png)

<br>

### Mapbox GL JS v1
![try-042_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/47c89ecf-14ea-5f91-4549-5b7c8c5aa5ae.png)

#### script.js

```javascript

// MIERUNE Streets読み込み
const map = new mapboxgl.Map({
    container: 'map',
    style: 'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]',
    center: [139.767, 35.681],
    zoom: 13
});

// コントロール関係表示
map.addControl(new mapboxgl.NavigationControl({
    visualizePitch: true
}));
```

<br>

### Leaflet
![try-042_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/be74a696-82cf-2197-a596-b7ab125e0bb4.png)

#### パッケージインストール

```bash

npm install mapbox-gl-leaflet
npm install mapbox-gl
```

#### script.js

```javascript

// デフォルトアイコンパス
L.Icon.Default.imagePath = 'img/icon/';

// MIERUNE Streets読み込み
const m_streets = L.mapboxGL({
  attribution: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
  style: 'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]'
});

// MAP読み込み
const map = L.map('map', {
    center: [35.681, 139.767],
    zoom: 14,
    zoomControl: true,
    layers: [m_streets]
});
```

#### main.js

```javascript

// CSS一式を読み込んでパッケージ
import "leaflet/dist/leaflet.css";
import "mapbox-gl/dist/mapbox-gl.css";
import "./css/style.css";

// JS一式を読み込んでパッケージ
import 'mapbox-gl-leaflet';
import './js/script.js';
```

#### webpack.config.js

```javascript

const webpack = require("webpack");

module.exports = {
    mode: 'production',
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: './dist/img/icon/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            L: 'leaflet',
            mapboxgl: 'mapbox-gl'
        })
    ],
    devServer: {
        contentBase: __dirname + '/dist',
        publicPath: '/',
        watchContentBase: true,
        open: true
    }
};
```

<br>

### OpenLayers
![try-042_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/f1ba82c1-ce5b-bd57-e21e-287bdfacb270.png)

#### パッケージインストール

```bash

npm install ol-mapbox-style
```

#### script.js

```javascript

import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import olms from 'ol-mapbox-style';

// MIERUNE Streets読み込み
const styleJson = 'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]';
const map = new Map ({
    target: 'map',
    view: new View ({
        center: fromLonLat([139.767, 35.681]),
        zoom: 14
    })
});
olms(map, styleJson);
```

<br>

#### MapTilerのラスタタイルとベクトルタイルを表示することができました :thumbsup: 
ラスタタイルを利用する場合は、Mapbox GL JS・Leaflet・OpenLayersのすべてで表示可能です。ベクトルタイルを利用する場合は、基本的にはMapbox GL JSを利用することをおすすめします :bulb:

#### お好きなマップライブラリでゼヒ試してみてください！

<br>

Mapbox GL JS・Leaflet・OpenLayersについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://memo.dayjournal.dev/tags/mapboxgljs" target="_blank">tags - Mapbox GL JS</a>
<a href="https://memo.dayjournal.dev/tags/leaflet" target="_blank">tags - Leaflet</a>
<a href="https://memo.dayjournal.dev/tags/openlayers" target="_blank">tags - OpenLayers</a>

<br>
<br>

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