スイスに本社を置く地図プラットフォームMaptilerの日本向けサービスが2020年1月27日からはじまりました。（プレスリリースはこちら）
サインアップとQGISへの導入についてはこちらの記事 を参照
##地図のみのwebサイトへの埋め込み
GoogleMapの埋め込みと同じ感覚でのwebサイトへの埋め込みができるiframeというものが用意されているようです。
”Get Started” 画面の"Embed in website with simple iframe"のリンクから以下のアドレスを取得できるので該当するタグで囲まれたコードを.htmlファイルに入れてみます。
<iframe width="500" height="300" src="https://api.maptiler.com/maps/basic/?key=XXX"></iframe>
XXXの部分にはサインアップしたら自動的に生成される（または別途追加で購入する）keyを入れる必要があり、自分の持っているkeyはAccount-> Keysで確認ができます。
<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)
で地域とズーム倍率をインタラクティブに指定して埋込用URLの生成もできます。
##JavaScriptを使っての地図埋め込み
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があった、地図を選択した後のページで今度はJP MIERUNE Streets / Mapbox GL JSを使ってみましょう。プラグインを選択してコードを取得。
※JP MIERUNE Streets / Leaflet GLでは地図が表示されておらず(2020/1/28 12:00現在)、問い合わせ中。プラン制限か？
下部のstyle: 'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=XXX'のXXXの部分には同じように取得したkeyを入力。
<!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">© 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></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>
無事地図が表示されました。
Attributionは
© MIERUNE © MapTiler © OpenStreetMap contributors
となっています。