DEV Community

loading...

How to: Mapbox with Vue.js

hmintoh profile image hmintoh ・Updated on ・2 min read

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

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>
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 ⚡

Discussion (5)

pic
Editor guide
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 Author

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