DEV Community

hmintoh
hmintoh

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


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%;
}
</style>

Enter fullscreen mode Exit fullscreen mode




Displaying markers and controls

Navigation

This adds a zoom buttons and a compass.



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

Enter fullscreen mode Exit fullscreen mode




Marker

This adds a marker component.



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

Enter fullscreen mode Exit fullscreen mode




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

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)

Collapse
 
sameergaikwad222 profile image
Sameer Gaikwad

Hey Thanks :) You saved my day.

Collapse
 
matias2018 profile image
matias2018

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

Collapse
 
dedane profile image
dedane

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

Collapse
 
hmintoh profile image
hmintoh

what sort of error is it throwing? can you try the example code here to see if it works? docs.mapbox.com/mapbox-gl-js/api/m...

Collapse
 
dedane profile image
dedane

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

Collapse
 
arashkenji73 profile image
ArashKenji73

not working for mee