Mapbox Vue

Posted on  by admin

Scaffolding the Front End With Vue.js

  • A lightweight Mapbox GL JS component that helps developers render interactive maps in Vue applications.
  • Import and register the component. Add the component to the template, insert your own API key, and pass Mapbox GL JS options as follows:.
  • Author: phegman. Live Demo: Download Link:

Basic usage:

Official Website:

  • A Vue.js Mapbox component. This package does not include the Mapbox GL JS and CSS files. They need to be included in the of your HTML file.
  • See Mapbox GL quickstart guide here: If you decide to pull in Mapbox Gl via npm and use a module bundler you need to require it globally from your main js file like this: window.mapboxgl = require('mapbox-gl');.
  • In your main js file:. In your HTML file:. If you are using Vueify in your build script the Mapbox component can be included as follows:.
  • CSS needs to be added for the map to show up. The #map container needs a height and a width.

Pinpoint accuracy and modularity are among the perks that make geocodes the perfect means of finding a particular location.

In this guide, we’ll build a simple geocoding app from scratch, using Vue.js and Mapbox.

Set Up File Structure of Application


We’ll cover the process from building the front-end scaffolding up to building a geocoder to handle forward geocoding and reverse geocoding.

Reverse Geocode Location With Mapbox API

To get the most out of this guide, you’ll need a basic understanding of JavaScript and Vue.js and how to make API calls.

Forward Geocoding With Mapbox Geocoder

Geocoding is the transformation of text-based locations to geographic coordinates (typically, longitude and latitude) that indicate a location in the world.


  • Geocoding is of two types: forward and reverse. Forward geocoding converts location texts to geographic coordinates, whereas reverse geocoding converts coordinates to location texts.
  • In other words, reverse geocoding turns 40.714224, -73.961452 into “277 Bedford Ave, Brooklyn”, and forward geocoding does the opposite, turning “277 Bedford Ave, Brooklyn” into 40.714224, -73.961452.