Adding Advanced TomTom Mapping Features to a Modern Vue + Quasar App

Learn how to add a search function, then use Calculate Route to calculate and display a map route

Published in

Dev Genius

5 min readMay 24, 2022

Geolocation-based applications help users find locations, keep track of places, and visualize these locations on a map. TomTom Maps API and SDK have made it easier for developers to build these web applications with various mapping services accessible on different devices.

In this tutorial, we'll build a Quasar application to help users search and track the route to a particular location. We'll use TomTom’s Search API, Routing API, and Matrix Routing Service.

You should be familiar with JavaScript and Vue, but you don’t need Quasar experience to follow this tutorial. Feel free to check out our other article, Adding TomTom Maps to a Vue + Quasar App.

PREREQUISITES

First, ensure Node is on your local development machine. Check if you have it by running this command in your terminal:

node –v

If you don’t have Node, download it. Also, install the Quasar CLI if you don’t already have it.

You’ll also need a TomTom developer account. You get thousands of free requests daily, even for commercial applications. Just pay as you grow!

SETTING UP THE PROJECT

We’ll set up the Quasar application. First, create a new Vue project using the Quasar CLI:

quasar create route-tracker

This command creates a prompt for you to add details about the project and the suitable development environment. Once the application is successfully created, the Quasar CLI displays the command to change into the newly-created directory. Run this command to start your application:

quasar dev

The result should look like this:

Next, we set up TomTom in our application by installing the required Map SDKs and APIs. So, we’ll install TomTom’s services:

npm install @tomtom-international/web-sdk-maps @tomtom-international/web-sdk-services

Then, install the Maps SDK:

npm i @tomtom-international/web-sdk-maps

You will need to use your TomTom API key in this project. Here's a simple guide to create one for free — no credit card required.

CREATING THE LAYOUT

The application layout includes a search bar to search for places, a map container to display the map, and the results, which display the calculated distance and time respectively. This image demonstrates the UI layout:

Add this code to the template section of the MainLayout file:

<q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar class="bg-deep-purple-8  text-white">
        <q-toolbar-title >
          Route Tracker
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
     <q-page-container>
     <!-- To handle the search for location -->
      <div class="q-pa-md" >
    <q-form  class="q-gutter-md" >
      <q-input filled v-model="locationQuery" label="Search for an address/location"/>
      <div>
        <q-btn label="Search" type="submit" color="deep-purple-8"/>
      </div>
    </q-form>
    <div>
    <!-- To display the result-->
      <p>Destination -  {{routeAddress}} </p>
      <p> Estimated Route Distance(KM) - {{destinationDistance}}
        <br>
           Estimated Time(MINS) -  {{timeToDestination}}
      </p>
      <p>
        {{errorMessage}}
      </p>
    </div>
    </div>
    </q-page-container>
  </q-layout>

This code creates the application’s user interface (UI) layout.

DISPLAYING A MAP

TomTom Maps APIs enable us to display maps in the application. We can also style our maps to our liking.

Index.template.html, include the CSS stylesheet to handle the maps:

<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.13.0/maps/maps.css'>

Also, import the tt object the index.template.html in the Quasar application. This object represents the object library to access everything related to TomTom maps and services.

import tt from '@tomtom-international/web-sdk-maps'

We create a mapDisplay.vue file in the components folder to handle this section. This component will display the map in our application. Then, we add the map container layout to the mapDisplay.vue file:

<template>
        <div id='map' class='window-height'></div>
</template>

Next, we create a function to display the map and add it to the mapDisplay.vue file:

displayMap(){
            const map = tt.map({  
            key: "8h504Wc4AXL6OPndqhrtKf70AovVBL3V",  
            container:'map', // Container ID 
            style: 'tomtom://vector/1/basic-main',  //the specified map style 
        });  
        map.addControl(new tt.FullscreenControl());  
        map.addControl(new tt.NavigationControl()); 
        const location = [this.longitude,this.latitude];
        const popupOffset = 25; 
        const marker = new tt.Marker().setLngLat(location).addTo(map); 
        const popup = new tt.Popup({ offset: popupOffset }).setHTML("Your Destination"); 
        marker.setPopup(popup).togglePopup();       
       }

Then, we call the function to display the map in the mapDisplay.vue file using the mounted() lifecycle method:

mounted() {  
        this.displayMap()
     }

INTEGRATING THE SEARCH API

TomTom's Search API performs various functions such as fuzzy search, autocomplete, geocoding, and reverse geocoding.

FUZZY SEARCH

We’ll mainly focus on the fuzzy search, which searches for addresses and places like hospitals, bars, and restaurants. We can also restrict the search to a particular region or geometry.

The query’s result gives a detailed description of the location that matches the specific query text partially.

To implement fuzzy search, start by importing the tt object from the SDK in MainLayout.vue:

import tt from "@tomtom-international/web-sdk-services";

Then, in MainLayout.vue, create the form to handle the search:

<div class="q-pa-md" >
    <q-form @submit="SearchAndCalculateRoute()" class="q-gutter-md" >
      <q-input filled v-model="locationQuery" label="Search for an address/location"/>
      <div>
        <q-btn label="Search" type="submit" color="deep-purple-8"/>
      </div>
    </q-form>

Next, create a function to handle the search:

const _this = this
      // Using the fuzzySearch service
    await tt.services.fuzzySearch({
      key: 'INSERT API KEY HERE',
      query: this.locationQuery //The input gotten from the search
    }).then(function (response) {
      _this.routeAddress = response.results[0].address.freeformAddress
      _this.routeLatitude =  response.results[0].position.lat
      _this.routeLongitude = response.results[0].position.lng
    })

This code performs the search function and displays the address’s first result while storing the latitude and longitude to use in the other services.

We can also add the bounding box parameter to refine the search. The bounding box is a limited area within the search results, and without it, the search considers the whole world. This parameter accepts longitude and latitude values of the place to search.

<!-- Display the result of the search -->
<p> Destination -  {{routeAddress}} </p>

POINT OF INTEREST SEARCH

Another feature that we’ll add to our map is the ability to find specific places around the location searched for. We do this using Points of Interest Search, a service provided by TomTom that enables us to find a specific type of place, like restaurants, arts centers, or even transit stations.

We’ll implement this in the mapDisplay.vue file to display the places on the map. As an example, we’ll search for nearby gas stations. To implement fuzzy search, start by importing the tt object from the SDK in MainLayout.vue. The tts object is imported in the mapDisplay.vue:

import tts from "@tomtom-international/web-sdk-services";

Then, a function is created to call the service when the map has been rendered on the page:

tts.services.poiSearch({
            key: 'INSERT API KEY HERE'
            query: Gas Stations,
            center: [ _this.latitude, _this.longitude ]
            })
            .then(function(data) {
              _this.stations = data.results})
              .catch((err) => {
                console.log(err)
            });