画像




スケールを表示するメモ。


オプションとして指定。

Option Description
maxWidth スケール幅
unit 距離単位(‘imperial’, ‘metric’, ‘nautical’)




画像




script.js


// MIERUNE MONO読み込み
var map = new mapboxgl.Map({
container: "map",
style: {
"version": 8,
"sources": {
"MIERUNEMAP": {
"type": "raster",
"tiles": ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
"tileSize": 256
}
},
"layers": [{
"id": "MIERUNEMAP",
"type": "raster",
"source": "MIERUNEMAP",
"minzoom": 0,
"maxzoom": 18
}]
},
center: [139.767, 35.681],
zoom: 11
});

map.on('load', function () {

});

// コントロール関係表示
map.addControl(new mapboxgl.NavigationControl());

// スケール表示
map.addControl(new mapboxgl.ScaleControl({
maxWidth: 200,
unit: 'metric'
}));






Mapbox GL JSを手軽に始めるビルド環境公開しています。
mapboxgljs-starter







Q&A