DEV Community


Posted on • Updated on

How to: Mapbox with Vue.js

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='' rel='stylesheet' />
Enter fullscreen mode Exit fullscreen mode

Creating a map

Create a BaseMap component:

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

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],
Enter fullscreen mode Exit fullscreen mode
  • 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%;
Enter fullscreen mode Exit fullscreen mode

Displaying markers and controls


This adds a zoom buttons and a compass.

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


This adds a marker component.

const marker = new mapboxgl.Marker()
  .setLngLat([103.811279, 1.345399])
Enter fullscreen mode Exit fullscreen mode


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")
Enter fullscreen mode Exit fullscreen mode

And there you have it! 🎉

screenshot of page

  • If you are interested in using Mapbox with React.js, I have written a similar tutorial here
  • Mapbox official documentation here

Top comments (6)

sameergaikwad222 profile image
Sameer Gaikwad

Hey Thanks :) You saved my day.

matias2018 profile image

I just bookmarked your article! I also gave it a heart and a unicorn, whatever that means. Thank you!! :)

dedane profile image

How did you finally add the geolocate code on your project file because its giving me errors

hmintoh profile image

what sort of error is it throwing? can you try the example code here to see if it works?

dedane profile image

an unwanted token has been listed id like to see how you implimented it on a vue js page

arashkenji73 profile image

not working for mee