Mapbox 入門日記（２）使い方

Mapboxは基本Style, Source, Layerを設定しながら使います。

Mapboxを使うにはまずmapboxgl.Mapのインスタンスを作成します。
この時、いろいろと設定出来ます。

その中styleの設定がとりわけ重要になります。

下記の図のように、styleにはsourceとlayersの設定が含まれます。

sourceは地図で使うリソースを記入します。geojson, 画像tile, vector tileなどなど。
layersにはsourceを使った描画方法を記入します。backgroundなど、sourceを使わないレイヤも
ありますが、基本sourceに登録された、データを
circle,
heatmap,
hillshade,
fill,
fill-extrusion,
line,
symbol,
background,
raster,
custom
のいずれかの方法で描画することを設定します。

具体的には下記のサンプルを参照してください。

トークン無しで使えるMapboxデモ。

当サイトでは以前Mapboxを利用にはTokenが必須と書きましたが
厳密にはmapbox APIを利用するならTokenが必須であり、mapbox-gl-jsを使うだけであれば、
Token無しでできます。

そのため、今回はトークン無しmapbox-gl-jsを使えるデモを作成します。

var map = new mapboxgl.Map({
	container: 'map',
	zoom: 10,
	center: [139.767125, 35.681236],
	style: {
		"version": 8,
		"sources": {
			"tilemap": {
				"type": "raster",
				"tiles": ["https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"],
				"tileSize": 256,
			}
		},
		"layers": [{
			"id": "background",
			"type": "background",
			"paint": {
				"background-color": "rgb(125,125,125)"
			}
		}, {
			"id": "tilemap",
			"type": "raster",
			"source": "tilemap",
			"minzoom": 0,
			"maxzoom": 18
		}]
	},
});

デモサイトはこちらです。

トークン無しで使えるMapboxデモ

もちろんmapbox-gl-jsでは、map.addLayerとmap.addSourceの動的に追加する方法も用意されています。

必要に応じて使えます。