【JavaScript】Mapbox入門【API】

Mapboxを使って地図を表示

CDN

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.css' rel='stylesheet' />

Mapbox GL JS / マイアカウントでアクセストークンを取得

mapboxgl.accessToken = 'hoge';

mapboxglのMapオブジェクトを生成（インスタンス化）

const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://hoge',
        center: [lon, lat],
        zoom: 14
    });

オプション

container
マウントするdiv要素（not ネスト）

<div id="map"></div>

style
マップのスタイル

center

[longitude, latitude]

中心地の緯度経度

zoom
ズーム度

現在地を追跡

map.addControl(
        new mapboxgl.GeolocateControl({
            positionOptions: {
            enableHighAccuracy: true
        },
            trackUserLocation: true
        })
    );

オプション

addControl
UIでmapを操作

GeolocateControl
位置情報を操作(類似:Geolocation API)

ジオロケーション
ユーザーの位置情報を扱う技術

enableHighAccuracy
・false:デフォルト
・true:高精度で現在地を取得

trackUserLocation
詳細不明
trueにするとアニメーションがつく

ギアマークをクリックで現在地まで追跡

next

リアルタイムに自分の居場所を保存し取り出せる
Webページにいる人それぞれの位置をマップに表示