Build Different

Plan Your Road Trip Menu in Advance with the TomTom Routing and Search APIs

Kingsley Ubah
Nov 10, 2022 • Last edit on Nov 14, 202211 min read
TomTom map displaying a route

Road trips are fun, but planning them can be tricky. You often have to make stops to have a quick meal, which can be challenging to coordinate if you aren’t familiar with the route.

Using the TomTom Routing and Search APIs, you can plan your road trip menu in advance, specifying all the stops you want to make along the way. You can schedule meal stops and even find restaurants around your stop location.

In this article, we create an app using Python and JavaScript that lets you choose your restaurants based on your road trip schedule. You can find the complete application code on GitHub.

Prerequisites

To get started, you must have Python and pip installed. Pip is a package manager for Python. You use it to install and manage third-party Python packages in a Python development environment.

You must also get an API key from your TomTom account.

Create a Flask Application

Create a folder named tomtom-flask. Navigate to it using your command line tool and execute the following command to install Flask using pip:

pip install flask

Once the installation is complete, create a file named app.py in the folder tomtom-flask with the following code:

1from flask import Flask, render_template
2
3app = Flask(__name__)
4
5@app.route('/')
6def index():
7 return render_template('index.html')
8
9if __name__ == "__main__":
10 app.run(debug=True)

First, we imported both Flask and render_template from the core flask library. Then, we initialized the Flask application beneath the imports. After initialization, we set up our homepage route to render the index.html file from our templates/ folder. Finally, we run the application at the end of the file.

Next, create a folder named templates in tomtom-flask. Inside templates/, create an index.html file with the following markup:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>Document</title>
5 <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
6 <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps.css'>
7
8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
9
10</head>
11<body>
12 <div>
13 <section id="form-section">
14 <div class="mb-3">
15 <label for="origin" class="form-label">Origin</label>
16 <input type="text" class="form-control" id="lat-origin" placeholder="Enter Latitide">
17 <input type="text" class="form-control" id="long-origin" placeholder="Enter Longitude">
18 </div>
19
20 <div class="mb-3">
21 <label for="destination" class="form-label">Destination</label>
22 <input type="text" class="form-control" id="lat-dest" placeholder="Enter Latitide">
23 <input type="text" class="form-control" id="long-dest" placeholder="Enter Longitude">
24 </div>
25
26 <button id="submit-btn">Submit</button>
27 </section>
28
29 <!-- Map and map details will be populated below -->
30 <section class="map-area">
31 <div id='map' class='map'></div>
32 <div id='time'></div>
33
34 <div id='select-input-div'>
35 </div>
36 </section>
37
38 </div>
39
40 <script src="{{ url_for('static', filename='script.js') }}"></script>
41 <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps-web.min.js"></script>
42 <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/services/services-web.min.js"></script>a
43</body>
44</html>

The homepage of our website renders this HTML file. It includes a form for collecting the origin and destination points from the user. Below the form, the page displays the map, journey time, and nearby restaurants.

The map area is empty now, but we populate it using JavaScript. Finally, we provide links to the CSS and the TomTom Maps SDK files.

In the root folder (tomtom-flask), create a folder called static and add a custom CSS named styles.css file.

1.map {
2 width: 80vw;
3 height: 70vh;
4}

Run the following command in your terminal to start up the application:

python app.py

Navigate to http://127.0.0.1:5000 with your web browser to see the result:

image 1

In the next section, we call the Routes API using the points a user provides to calculate the time it'll take to complete the journey.

Show the User the Route and Journey Time In the root folder (tomtom-flask), inside the static folder, create a file named script.js. Add the following:

1var map = null
2var instructions = null
3var results = null
4var api_key = put-your-api-key

The map variable is populated with our map when we create it later. When calling the routing API with a starting and ending point, it includes the instructions for getting there in the response object. We also want to store that globally in our code. Finally, we pass our API key from TomTom to the api_key variable.

Next, we have a helper code block that changes the time format from seconds to hours, minutes, and seconds (hh:mm:ss). Add the following:

1 function convertTime(sec) {
2 var hours = Math.floor(sec/3600);
3 (hours >= 1) ? sec = sec - (hours*3600) : hours = '00';
4 var min = Math.floor(sec/60);
5 (min >= 1) ? sec = sec - (min*60) : min = '00';
6 (sec < 1) ? sec='00' : void 0;
7
8 (min.toString().length == 1) ? min = '0'+min : void 0;
9 (sec.toString().length == 1) ? sec = '0'+sec : void 0;
10
11 return {
12 hrs: hours,
13 mins: min,
14 secs: sec
15 }
16}

Next, we add an event listener to listen for a click event on the Submit button and call the calculateRoute function when this event occurs. Add the following line of code in script.js, after the results variable:

document.getElementById("submit-btn").addEventListener("click", calculateRoute)

Create a loadMap function below the above code in script.js. Inside loadMap, first get the origin and destination points from the form inputs:

1function calculateRoute() {
2 const lat0 = document.getElementById("lat-origin").value
3 const long0 = document.getElementById("long-origin").value
4
5 const lat1 = document.getElementById("lat-dest").value
6 const long1 = document.getElementById("long-dest").value
7
8 // fetch request goes here
9}

Next, we make a GET request to the Routing API, including the coordinates as parameters. Add the following code in script.js, after the variable named long1:

1fetch(`https://api.tomtom.com/routing/1/calculateRoute/${lat0},${long0}:${lat1},${long1}/json?routeRepresentation=summaryOnly&instructionsType=text&key=${api-key}`)
2 .then(response => response.json())
3 .then((data) => {
4 loadMapWithStopTimes(data, long0, long1, lat0, lat1)
5 })

Inside the callback for the last then function, we call the loadMapWithStopTimes function, passing in the API response data as well as the origin and destination coordinates.

Next, create the loadMap function below calculateRoute:

1function loapMapWithStopTimes(data, long0, long1, lat0, lat1) {
2 // the rest of the code will go here
3}

As described by the comment above, the rest of the code provided under this section goes inside the loadMapWithStopTimes function.

First, we convert the time format, access the time container element, and insert a string showing the time it will take to complete the journey:

1 const {hrs, mins, secs} = convertTime(data.routes[0].summary.travelTimeInSeconds)
2 const timeBtn = document.getElementById('time')
3 timeBtn.innerHTML = `Your Journey will take ${hrs} hours, ${mins} minutes and
4 ${secs} seconds`

Next, we assign the guidance instructions for the journey to the global instructions variable:

instructions = data.routes[0].guidance.instructions

For the user to select a time on the browser, create a select input element and its accompanying label:

1 let label = document.createElement('label')
2 label.innerHTML = "Choose a time to stop for a meal"
3
4 let select = document.createElement('select')
5 select.id = "stop-time"
6 select.name = "time"
7 select.onchange = getRestaurants

When the value of the select input changes, getRestaurants is called to retrieve all nearby restaurants based on the time the user stops for a meal. We’ll implement the code for it towards the end of this article.

Next, we insert possible stop times for the user based on the points included in the instructions array in the API response:

1 // Keep track of the minutes already included
2 let minTracker = null
3
4 instructions.forEach((instruction, index) => {
5
6 // We don't want to get the first and last time
7 if(index !== 0 && index !== 1 && index !== instruction.length - 1) {
8 let {hrs, mins} = convertTime(instruction.travelTimeInSeconds)
9
10 // Check if minute is already included
11 if (mins !== minTracker) {
12
13 // Create select option
14 minTracker = mins
15 let option = document.createElement('option')
16
17 // add travelTime to value attribute
18 option.setAttribute('value', instruction.travelTimeInSeconds)
19 option.innerHTML = `${hrs} ${hrs === 1 ? 'hour': 'hours'} and ${mins} minutes in`
20
21 // Append option to select
22 select.appendChild(option)
23 }
24 }
25
26 })

In the code above, we created minTracker to track the minutes added as a select option for the user’s meal stop time. Then, in the forEach loop, we skipped the first and last points in the journey since it’s unlikely that the traveler will be eating at the beginning and just before the end. We then created a select option and set its value attribute to the journey time in seconds. Finally, we made a string showing the journey time and added it to the option element that we then appended to the select element.

Once the user has filled out the form, we can stop displaying it. To remove the form, and add the select options, add the following code:

1 document.getElementById('form-section').remove()
2
3 // Now, insert into the page
4 let targetEl = document.getElementById("select-input-div")
5 targetEl.appendChild(label)
6 targetEl.appendChild(select)

Finally, create a TomTom map and focus it on the starting point of the journey:

1let locations = [
2 { lat: lat0, lng: long0},
3 { lat: lat1, lng: long1}
4 ]
5
6 map = tt.map({
7 key: api-key,
8 container: 'map',
9 center: locations[0],
10 bearing: 0,
11 maxZoom: 21,
12 minZoom: 1,
13 pitch: 60,
14 zoom: 14,
15 });
16
17 map.addControl(new tt.FullscreenControl());
18 map.addControl(new tt.NavigationControl());
19
20 locations.forEach((location, index) => {
21 new tt.Marker().setLngLat(location).addTo(map)
22 })

That’s all! Remember that all of the code provided in this section should go inside the final then method nested to fetch. However, if we run the code now, we get an error because getRestaurants is not yet defined. We will do that in the next section.

Search for Nearby Restaurants

Now, let’s create the code for searching restaurants close to the stop-time specified by the user.

Recall that every time the user selects a stop-time for a meal, the getRestaurants function is called. When this happens, we’ll get the selected option and find its corresponding instruction object. From there, we get its latitude and longitude. Add the following code after the loadMap function in script.js:

1function getRestaurants() {
2const option = document.getElementById("stop-time").value
3
4 const selectedLoc = instructions.find((instruction) => {
5 return instruction.travelTimeInSeconds == option
6 })
7
8 const lat = selectedLoc.point.latitude
9 const long = selectedLoc.point.longitude
10
11 // fetch request goes here
12}

Make a request to the search API to search for restaurants that are close to the selected stop point. Add the following code to getRestaurants:

1 fetch(`https://api.tomtom.com/search/2/categorySearch/pizza.json?lat=${lat}&lon=${long}&radius=1700&categorySet=7315&view=Unified&relatedPois=off&key=${api_key}`)
2 .then(response => response.json())
3 .then((data) => {
4 // The remaining code will go here
5 })

Add the subsequent code blocks inside the callback of the last then method, as specified in the comment above.

In the above fetch request, categorySet is set to 7315, representing restaurants, while the radius is set to 1700 meters (approximately 1 mile).

Now that we have a list of restaurants to show the user, assign it to the global results variable:

results = data.results

Next, cycle through the results. For each restaurant, show the name, address, and phone number and also create a button for adding them to the map:

1results.forEach((result) => {
2 let dl = document.createElement('dl')
3 dl.className = "restaurants_list"
4
5 const dt_1 = document.createElement('dt')
6 dt_1.innerHTML = `Restaurant Name:`
7
8 const dd_1 = document.createElement('dd')
9 dd_1.innerHTML = result.poi.name
10
11 const dt_2 = document.createElement('dt')
12 dt_2.innerHTML = `Address:`
13
14 const dd_2 = document.createElement('dd')
15 dd_2.innerHTML = result.address.freeformAddress
16
17 const dt_3 = document.createElement('dt')
18 dt_3.innerHTML = `Phone No:`
19
20 const dd_3 = document.createElement('dd')
21 dd_3.innerHTML = result.poi.phone
22
23 const btn = document.createElement('button')
24 btn.id = result.id
25 btn.className = "restaurants"
26 btn.innerHTML = "Add to map"
27
28 dl.appendChild(dt_1)
29 dl.appendChild(dd_1)
30
31 dl.appendChild(dt_2)
32 dl.appendChild(dd_2)
33
34 dl.appendChild(dt_3)
35 dl.appendChild(dd_3)
36
37 dl.appendChild(btn)
38
39 document.getElementById('time').appendChild(dl)
40 })

In this snippet, we also appended all the child nodes to the dl parent and inserted them into the page.

At this point, when the user selects a stop time in the select input, the app calculates the route and displays a list of nearby restaurants. However, clicking the button to add the point to the map won’t work yet. Let’s fix that!

First, access all of the buttons:

let resButtons = document.getElementsByClassName("restaurants")

Next, loop through the buttons and listen for a click on all of them. When clicking any button, we find the chosen restaurant and add it to the map. Here’s the code:

1for(let i=0; i<resButtons.length; i++) {
2 resButtons[i].addEventListener("click", () => {
3 let selectedRes = results.find((result) => {
4 return result.id == resButtons[i].id
5 })
6
7 const lat = selectedRes.position.lat
8 const lon = selectedRes.position.lon
9
10 const popup = new tt.Popup({ offset: 50 }).setText(selectedRes.poi.name)
11
12 new tt.Marker().setLngLat({lat: lat, lng: lon}).setPopup(popup).addTo(map)
13 })
14 }

You’re done!

To test the app, run the following command and navigate your browser to http://127.0.0.1:5000.

python app.py

Results

When opened, your app displays the following form:

image 2

When a user submits the start and end points for their journey, a map is loaded with the total journey time, shown below:

image 3

The user can then select a stop time to display the list of nearby restaurants:

image 4

Then, the user can choose a restaurant and click Add to Map to add the marker for the location to their map instantly:

image 5

Next Steps

In this article, we created a JavaScript app that lets users choose our restaurants based on their road trip schedule, calculate the journey time, and fetch guidance instructions to generate stop points.

Now that you know how to create this app, you can try variations for other important stops, like gas stations. And this is only the beginning of what you can learn to build with TomTom!

Sign up for a free account to get started.

Want to learn more? Check out these related resources below:

Happy mapping!

Get the developer
newsletter.

No marketing fuff. Tech content only.
Thanks for contacting us

We will reach out to you soon.
Blog cards
tomtom tech news