画像




現在位置を表示するメモ。


オプションとして指定。

Option Description
positionOptions GeolocationAPIの設定
fitBoundsOptions 現在位置表示時のズームレベル
trackUserLocation 現在ボタンのON/OFF
showUserLocation 現在位置アイコンのON/OFF




画像




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.GeolocateControl({
positionOptions: {
enableHighAccuracy: false
},
fitBoundsOptions: {maxZoom: 6},
trackUserLocation: true,
showUserLocation: true
}));






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







Q&A