How to build a geocoding program in Vue.js using Mapbox – Smashing Magazine

Accurate accuracy and modularity are one of the advantages that make geocodes the perfect way to find a specific location.

In this guide we build a simple geocoding program from scratch using Vue.js and Mapbox. We cover the process from building the front scaffolding to building a geocoder to handle forward coding and reverse geocoding. To get the most out of this guide, you will need a basic understanding of JavaScript and Vue.js and how to make API calls.

What is geocoding?

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

Geocoding is of two types: forward and backward. Forward geocoding converts location texts to geographic coordinates, while reverse geocoding coordinates to location texts.

In other words, reverse geocoding changes 40.714224, -73.961452 to “277 Bedford Ave, Brooklyn”, and forward geocoding does the opposite, changing “277 Bedford Ave, Brooklyn” to 40.714224, -73.961452.

To provide more insight, we will set up a mini-web application that uses an interactive web map with custom markers to display location coordinates, which we will then decode to location texts.

Our app has the following basic features:

• gives the user access to an interactive map display with a marker;
• allows the user to move the marker at will while displaying coordinates;
• returns a text-based location or location coordinates at the request of the user.

Set up project with Vue CLI

We use the kettle plate found in this repository. It contains a new project with the Vue CLI and yarn as package manager. You need to clone the repository. Ensure that from the geocoder/boilerplate branch.

Configure the file structure of the application

Next, we need to set up the file structure of our project. Rename the Helloworld.vue file in the directory of the component to Index.vue, and leave it blank for now. Go ahead and copy the following into the App.vue file:

<template>
  <div id="app">
    <!--Navbar Here -->
    <div>
      <nav>
        <div class="header">
          <h3>Geocoder</h3>
        </div>
      </nav>
    </div>
    <!--Index Page Here -->
    <index />
  </div>
</template>
<script>
import index from "./components/index.vue";
export default {
  name: "App",
  components: {
    index,
  },
};
</script>

Here we imported the recently renamed component locally and then registered. We’ve also added a navigation bar to enhance the aesthetics of our app.

We have a .env file to load the environmental variables. Go ahead and add one at the root of your workbook.

Install required packages and libraries

To launch the development process, we will need to install the required libraries. Here is a list you will use for this project:

1. Mapbox GL JS
   This JavaScript library uses WebGL to render interactive maps vector rules and Mapbox.
2. Mapbox-gl geocoder
   This Mapbox GL geocoder control will help with our forward geocoding.
3. Dotenv
   We do not need to install it because it is pre-installed with Vue CLI. It helps us to understand environmental variables from a .env file in process.env. This way we can keep our configurations separate from our code.
4. Axios
   This library will help us to make HTTP requests.

Install the packages in your CLI according to your package manager of your choice. If you are using Yarn, then complete the following command:

cd geocoder && yarn add mapbox-gl @mapbox/mapbox-gl-geocoder axios

If you use npm, execute it:

cd geocoder && npm i mapbox-gl @mapbox/mapbox-gl-geocoder axios --save

We first had to geocoder fold before executing the installation command.

Scaffold the front with Vue.js

Let’s go ahead and make a layout for our app. We need an element to house our map, a region to display the coordinates as we listen to the movement of the marker on the map, and something to display the location when we call the reverse geocoding API. We can contain it all within one card component.

Draw the following in your Index.vue file:

<template>
  <div class="main">
    <div class="flex">
      <!-- Map Display here -->
      <div class="map-holder">
        <div id="map"></div>
      </div>
      <!-- Coordinates Display here -->
      <div class="dislpay-arena">
        <div class="coordinates-header">
          <h3>Current Coordinates</h3>
          <p>Latitude:</p>
          <p>Longitude:</p>
        </div>
        <div class="coordinates-header">
          <h3>Current Location</h3>
          <div class="form-group">
            <input
              type="text"
              class="location-control"
              :value="location"
              readonly
            />
            <button type="button" class="copy-btn">Copy</button>
          </div>
          <button type="button" class="location-btn">Get Location</button>
        </div>
      </div>
    </div>
  </div>
</template>

Start your development server to see what we currently have. For stations:

yarn serve

Or for npm:

npm run serve

Our app should now look like this:

The empty spot to the left looks down. It must contain our map display. Let’s add it.

Interactive map display with Mapbox

The first thing we need to do is access the Mapbox GL and Geocoder libraries. We start through the Mapbox GL and Geocoder libraries in the Index.vue file.

import axios from "axios";
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

Mapbox requires a unique access token to calculate map vectors. Get yours, and add it as an environmental variable in your .env file.

.env

VUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

We also need to define features that will help put our map tiles together in our data institution. Add the following below where we entered the libraries:

export default {
  data() {
    return {
      loading: false,
      location: "",
      access_token: process.env.VUE_APP_MAP_ACCESS_TOKEN,
      center: [0, 0],
      map: {},
    };
  },
}

• The location property will be modeled on the input we have in our scaffolding. We will use this to handle reverse geocoding (ie to display a location from the coordinates).
• The center property contains our coordinates (longitude and latitude). It is critical to put together our map tiles, as we will see soon.
• The access_token property refers to our environmental variable, which we added earlier.
• The map property serves as a constructor for our card component.

Let’s continue to create a method that outlines our interactive map with our leading geocoder in it. This method is our basic function, and acts as an intermediary between our component and Mapbox GL; we will call this method createMap. Add it below the data object:

mounted() {
  this.createMap()
},

methods: {
  async createMap() {
    try {
      mapboxgl.accessToken = this.access_token;
      this.map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: this.center,
        zoom: 11,
      });

    } catch (err) {
      console.log("map error", err);
    }
  },
},

To create our map, we specified a container containing the card, a style property for the display format of our card, and a center property to house our coordinates. The center property is an array type and holds the longitude and latitude.

Mapbox GL JS initializes our map based on these parameters on the page and returns a Map object to us. The Map object refers to the map on our page, while exposing methods and features that enable us to communicate with the map. We have stored this returned item in our data instance, this.map.

Send Geocoding With Mapbox Geocoder

Now we will add the geocoder and custom marker. The geocoder handles forward geocoding by transforming text-based locations into coordinates. It will appear in the form of a search input box added to our map.

Add the following under the this.map initialization we have above:

let geocoder =  new MapboxGeocoder({
    accessToken: this.access_token,
    mapboxgl: mapboxgl,
    marker: false,
  });

this.map.addControl(geocoder);

geocoder.on("result", (e) => {
  const marker = new mapboxgl.Marker({
    draggable: true,
    color: "#D80739",
  })
    .setLngLat(e.result.center)
    .addTo(this.map);
  this.center = e.result.center;
  marker.on("dragend", (e) => {
    this.center = Object.values(e.target.getLngLat());
  });
});