Mapbox Style Specificationとは
[Mapbox Style Specification] (https://docs.mapbox.com/mapbox-gl-js/style-spec/)を 簡単に言うと、Mapboxを用いてマップのスタイリングをする際のJSON オブジェクトやそのプロパティ等の書き方について記載したルールブックのことです。
Mapbox Studioを用いてGUIでマップデザインをすることも可能ですが、Mapbox Style Specificationは以下の人を対象に作られています。
- Mapbox Studio を使用せず、マップスタイルを行いたい上級デザイナーやカートグラファーの方
- Mapbox GL JS または Mapbox Maps SDK for Android のスタイル関連機能を使用するエンジニア
- Mapbox スタイルを生成または処理するソフトウェアエンジニア
Mapbox Style Specificationには様々なオブジェクトが用意されており、その中でもSourcesと Layersの概念の理解は大変重要になってきます。
今回は、 数あるオブジェクトの中でもsources と layers に絞って説明をしていきます。
Sourcesとは
Sourcesでは、**"マップに描画したい素材を指定する"**という作業を行います。
基本的な記述方法は以下の通りです。
sources: {
"任意のソース名": {
"type": "タイプ名", // 使用する素材の種別をここに記載
"tiles": [
"http://a.example.com/tiles/{z}/{x}/{y}.pbf",
"http://b.example.com/tiles/{z}/{x}/{y}.pbf"
]
"url": "http://api.example.com/tilejson.json"
// "tiles"もしくは"url"どちらかを用いて記述すること。
// "tiles"と"url"両方記載してはダメ🙅
},
},
type で指定できるもの
"type" では指定する素材の種別を記述する必要があります。
"type"で指定できる種別はvector, raster, raster-dem, geojson, image, video です。
つまり、Mapboxを用いて地図コンテンツを作る場合は、使用する素材を上記のフォーマットに修正してあげる必要があります。シェープファイル等は使えないので注意しましょう。
複数の素材を重ねてレイヤー式に地図を描画する場合はSourcesで、すべての素材を指定してあげる必要があります。
ここで、指定を行わない素材は地図に描画することができないので注意しましょう。
上記のコード例は最低限の記載となっています。
より細かいオブジェクトや記載方法等はこちらを参考にしてみてください。
Layersとは
Sourcesでマップに描画したい素材の指定をおこないました。Layersではその素材を**どのような順番で並べるか（レイヤーにするか）**を決めていきます。
基本的な記述方法は以下の通りです。
"layers": [
{
"id": "レイヤー1", //任意のID名をつける
"source": "任意のソース名", //使用する素材のSourcesで決めたソース名を記述
"source-layer": "water", //使用する素材がベクトルタイルなら記述が必須。それ以外なら記述する必要はなし。
"type": "fill", //
},
{
"id": "レイヤー2", //任意のID名をつける
"source": "任意のソース名2",
"type": "fill", //
},
]
"layers"では後に記述するものほど、高レイヤーとして表示されます。
つまり、上記の例だと "レイヤー1" が下になり "レイヤー2" が上に表示されるマップとなります。
"source-layer"は使用する素材がベクトルタイルで合った時のみ記述します。raster, raster-dem, geojson, image, video の場合は記述する必要はありません。
Layersの"type"では "fill", "line", "symbol", "circle", "heatmap", "fill-extrusion", "raster", "hillshade", "background", "sky"を指定することができます。
"source"で記述した素材が"fill", "line", "symbol", "circle", "heatmap", "fill-extrusion", "raster", "hillshade", "background"のどれに当たるのかをここで指定してあげましょう。
各typeの詳細は以下の通りです。
まとめ
描画に必要な素材をSources で記述し、素材の並べ順をLayersで記述する。
文頭で書いたとおり、Style Specificationには様々なオブジェクトが用意されています。SourcesとLayersの理解ができた方は、これ以外の様々なオブジェクトに挑戦してみましょう！