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: ```javascript


## Creating a map

Create a `BaseMap` component:
```vue


<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")