vue-mapbox-gl

    mounted () {
        MapBoxGl.accessToken = 'pk.eyJ1IjoibGxveWRqYXRraW5zb24iLCJhIjoiY2ptdG94NnBkMmdveDNrb2VwMnpuZ2xlbiJ9.P_aB3PF24QZL0uAlNvpDVw';
        this.map = new MapBoxGl.Map({
            container: this.$refs.map,
            style: 'mapbox://styles/mapbox/streets-v10',
            center: [8, 50],
            zoom: 4,
        });

        this.map.addControl(new MapboxGeocoder({ accessToken: MapBoxGl.accessToken }));
        this.map.addControl(new MapBoxGl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }));
        this.map.addControl(new MapBoxGl.NavigationControl());
        this.map.addControl(new MapBoxGl.FullscreenControl());
        this.map.addControl(new MapBoxGl.ScaleControl({ unit: 'imperial' }));
    },