5分くらいでMaptilerを.htmlとJavaScriptで導入してみる

スイスに本社を置く地図プラットフォームMaptilerの日本向けサービスが2020年1月27日からはじまりました。（[プレスリリース](https://www.value-press.com/pressrelease/235157
 "オープンデータを活用したデジタル地図サービスをリリース　－ MIERUNEとMapTilerが提携、日本のロケーションサービス市場を拡大 －")はこちら）

サインアップとQGISへの導入については[こちらの記事](https://qiita.com/Yfuruchin/items/77ed96094f6c8645ad8d "5分くらいでMapTilerをQGISに導入してみる") を参照

##地図のみのwebサイトへの埋め込み
GoogleMapの埋め込みと同じ感覚でのwebサイトへの埋め込みができるiframeというものが用意されているようです。
”Get Started” 画面の["Embed in website with simple iframe"](https://support.maptiler.com/i24-insert-maps-in-websites-with-a-simple-iframe)のリンクから以下のアドレスを取得できるので該当する<iframe></iframe>タグで囲まれたコードを.htmlファイルに入れてみます。

`<iframe width="500" height="300" src="https://api.maptiler.com/maps/basic/?key=XXX"></iframe>`
XXXの部分にはサインアップしたら自動的に生成される（または別途追加で購入する）keyを入れる必要があり、自分の持っているkeyはAccount-> Keysで確認ができます。

![Screen Shot 2020-01-27 at 9.22.29 pm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304391/87440488-0290-d6f7-b9b8-a6e67c41bc39.png)

`<iframe width="500" height="300" src="https://api.maptiler.com/maps/basic/?key=XX#14.0/35.7304726/139.7169904"></iframe>`
keyに続いて `#ズームレベル/緯度/経度` を入力することで地図のセンターを指定できます。
ズームレベルは0−22の23段階ありそう。

直接入力で地図の画角・センターを指定することもできますが、
Products-> cloud -> Map選択の[Enbeddable Viewer(basic)](https://cloud.maptiler.com/maps/basic/)
で地域とズーム倍率をインタラクティブに指定して埋込用URLの生成もできます。

<img width="853" alt="Screen Shot 2020-01-28 at 11.46.32 am.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304391/5d1574df-d7d8-2b75-32aa-ea865eaa4940.png">

##JavaScriptを使っての地図埋め込み
[Use maps interactively with JavaScript](https://support.maptiler.com/i25-use-maps-interactively-with-javascript)のページで、各種ライブラリを使った埋め込みについての説明がされています。概要は以下のような感じ。

> For raster tiles, you can also switch on HiDPI tiles for use on retina displays.

ラスタータイル向けにマックのretina display 対応のHiDPI tilesもある


>In the Free and Vector plan, only vector tiles are available, the raster tiles are in the higher paid plans.

フリー・ベクタープランではベクタータイルのみ利用可能、ラスタータイルは有料プランでのみ利用可能

>Therefore we recommend using Mapbox GL JS, which has in-built support for vector tiles. It is also possible to use OpenLayers or Leaflet with a plugin for vector tiles.

ウェブへの埋め込みについてはMapboxGLが推奨されており、built-inではMapboxGLが使われているが、OpenL ayersもLeafletも対応している。LeafletでもMapboxGL pluginnが使われているとのこと。

>For raster tiles, you can use OpenLayers or Leaflet JavaScript libraries. The choice depends on your requirements.”

ラスタータイル向けにはOpenLayersかLeafletのJSライブラリーが使用可能であるよう。出力形式選択ではCesiumもある。

##　コードの取得
[Embeddable Viewがあった、地図を選択した後のページ](https://cloud.maptiler.com/maps/jp-mierune-streets/mapbox-gl-js)で今度はJP MIERUNE Streets / Mapbox GL JSを使ってみましょう。プラグインを選択してコードを取得。
※[JP MIERUNE Streets / Leaflet GL](https://cloud.maptiler.com/maps/jp-mierune-streets/leaflet-gl)では地図が表示されておらず(2020/1/28 12:00現在)、問い合わせ中。プラン制限か？

![Screen Shot 2020-01-28 at 11.58.58 am.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304391/9a9d855a-9c14-88bb-3dc5-a1075ce226d6.png)

下部の`style: 'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=XXX'`のXXXの部分には同じように取得したkeyを入力。

```html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
  <link href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
  </style>
</head>
<body>
  <div id="map"></div>
  <p><a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a></p>
  <script>
    // You can remove the following line if you don't need support for RTL (right-to-left) labels:
    mapboxgl.setRTLTextPlugin('https://cdn.maptiler.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.2/mapbox-gl-rtl-text.js');
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=XXX',
      center: [139.76650, 35.68049],
      zoom: 13
    });
  </script>
</body>
</html>
```

無事地図が表示されました。

![Screen Shot 2020-01-28 at 12.17.48 pm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304391/977d11d8-cb81-7cf1-ef05-7d15d9b79942.png)

Attributionは
© MIERUNE © MapTiler © OpenStreetMap contributors
となっています。