【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ページにいる人それぞれの位置をマップに表示