How to: Mapbox with Vue.js

#tutorial #vue #webdev

Getting started

Generate a MapBox access token in your account page
Download the npm library using yarn add mapbox-gl
Include the css in the <head> of your index.html file:

<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />

Creating a map

Create a BaseMap component:

<template>
  <div id="mapContainer" class="basemap"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";

export default {
  name: "BaseMap",
  data() {
    return {
      accessToken: MAPBOX_ACCESS_TOKEN,
    };
  },
  mounted() {
    mapboxgl.accessToken = this.accessToken;

    new mapboxgl.Map({
      container: "mapContainer",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [103.811279, 1.345399],
      zoom: 12,
      maxBounds: [
        [103.6, 1.1704753],
        [104.1, 1.4754753],
      ],
    });
  },
};
</script>

container: The HTML element in which Mapbox GL JS will render the map, or the element's string id. The specified element must have no children.
style: choose from a pre-defined Mapbox style or create your own using Mapbox studio
center: refers to the starting position in [long,lat]
zoom: refers to the initial zoom level

Other option parameters for Map can be found here.

Finally, add basic styles:

<style lang="scss" scoped>
.basemap {
  width: 100%;
  height: 100%;
}
</style>

Displaying markers and controls

Navigation

This adds a zoom buttons and a compass.

const nav = new mapboxgl.NavigationControl();
map.addControl(nav, "top-right");

Marker

This adds a marker component.

const marker = new mapboxgl.Marker()
  .setLngLat([103.811279, 1.345399])
  .addTo(map);

Geolocate

This locates the user on the map based on the browser's geolocation API.

const geolocate = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});

map.addControl(geolocate, "top-right")