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

色々なマップライブラリでMapTilerを表示してみました
Mapbox GL JS・Leaflet・OpenLayers等でMapTilerを利用してみたいかたの参考になればと思います！
1. MapTilerのタイルURL取得
はじめに、MapTilerのタイルURLを取得します。毎月無料枠もあるのでゼヒお試しください！
スタイル選択は、日本用に最適化されたMIERUNEMAPスタイルをおすすめします 今回は「JP MIERUNE Streets」を利用してみます
MIERUNEMAPスタイル一覧
タイルURL取得方法
2. ビルド環境の準備
Mapbox GL JS・Leaflet・OpenLayersを手軽に始めるビルド環境を公開しています。今回はそのスターターを利用し、さくっと表示してみます
マップライブラリはお好きなものを選んでみてください！
Mapbox GL JS
mapboxgljs-starter
Leaflet
leaflet-starter
OpenLayers
openlayers-starter
3. ラスタタイルの表示
MapTilerを各マップライブラリで読み込むには、色々な方法が存在しますが今回は代表的な例で読み込んでみたいと思います。
ラスタタイルの表示方法を紹介します。基本は各スターターの「script.js」を修正するのみで表示可能です！
MapTilerのラスタタイルは、このタイルURLを利用します。
Mapbox GL JS
script.js
// 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’: ‘ MIERUNE MapTiler OpenStreetMap contributors’
}
},
‘layers’
情報元サイト：「Qiita」
[ オリジナルサイトで見る ]