How to integrate TomTom API in React application
Tags: react, javascript, tomtom
Published: 2020-04-01 06:14:29

---
title: How to integrate TomTom API in React application
published: true
description: 
tags: React, JavaScript, TomTom
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h66bn6ga36fdg81et7m4.png
---

Last month, I challenged [DeveloperWeek Hackathon 2020](https://www.developerweek.com/events/hackathon/) in SanFrancisco.
Our team built a React application using [TomTom](https://developer.tomtom.com/) which is APIs of Maps, Directions, Places, and Traffic for mobile application.
If you are interested in the Hackathon's project, please see [Devpost](https://devpost.com/software/forktofarm).

In this article, based on my experience in the hackathon, I explain how to build a React application using TomTom APIs in the following steps.
Let's dive in!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1uqp7oh28xd8v3diweit.png)


## Show a Map
At first, you should import javascript and css file of TomTom APIs from CDN in index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
  (snip)
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/maps.css'>
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/css-styles/routing.css'/>
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/css-styles/poi.css'/>
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/css-styles/traffic-incidents.css'/>

  <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/maps-web.min.js"></script>
  <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/services/services-web.min.js"></script>
  (snip)
</head>
<body>
  (snip)
</body>
</html>
```


In a react component, you add a div that is the container for the map.
```jsx
    <div id="map">
```

Finally, in the component, you add the following process to load a map.
```jsx
  componentDidMount() {
    // snip
    const tt = window.tt

    const map = tt.map({
      key: process.env.REACT_APP_TOM_TOM_API_KEY,
      container: 'map',
      style: 'tomtom://vector/1/basic-main'
    })
    map.addControl(new tt.FullscreenControl())
    map.addControl(new tt.NavigationControl())

    this.map = map
    this.tt = tt
    this.points = [] // for management of points
    // snip
  }
```

If you want to specify the center of the map, you should add the following process.
```jsx
  componentDidMount() {
    // snip
    const self = this
    map.on('load', () => {
      this.map.flyTo({
        center: {
          lng: longitudeValue,
          lat: latitudeValue,
        },
        zoom: 14, // you can also specify zoom level
      })
    })
    // snip
  }
```

## Put Points on Map

You can put points on the map you created.
This process is very simple.
```jsx
    new this.tt.Marker({
      color: '#2aceeb', 
      width: '20',
      height: '20'
    })
    .setLngLat([longitudeValueOfPoint, latitudeValueOfPoint])
    .addTo(this.map) // Don't forget to specify a map to be display
```


## Show a Modal on Point
You can show modal on the points you created.
Here's an example of using the TomTom API to search for restaurants in the vicinity and putting points for the search results.

```jsx
    const response = await this.tt.services.fuzzySearch({
        key: apiKey,
        center: this.map.getCenter(), // Search in the vicinity of the area indicated on the map
        query: 'restaurant',
        categorySet: '7315025',　// Italian's category code,
    })
    .go()

    response.results.forEach(result => {
    const popup = new this.tt.Popup({offset: 30}).setHTML(this.createPopupContent(result));
    const marker = new this.tt.Marker()
                    .setLngLat(result.position)
                    .setPopup(popup)
                    .addTo(this.map)

    this.markers.push(marker) // Define this line so that you can control marker later.
```


## Route Search

TomTom APIs also provides Navigation function.
Here's an example of getting a route in text format.

```jsx
    const locations = `${lngOfOrigin},${latOfOrigin}:${lngOfDestination},${latOfDestination}`
    
    const { routes } = await this.tt.services.calculateRoute({
      locations,
      instructionsType: 'text',
      key: apiKey,
    }).go()

    const routesDirections = routes.map(route => {
      const { instructions } = route.guidance
      return instructions.map(i => {
        let result = ''

        switch (i.maneuver) {
          case 'TURN_LEFT':
            result+='↰ '
            break
          case 'TURN_RIGHT':
            result+='↱  '
            break
          case 'ARRIVE_RIGHT':
          case 'ARRIVE:LEFT':
          case 'WAYPOINT_REACHED':
            result+='☑ '
            break
        }
        result += i.message.replace('waypoint','pickup area')
        return result
      })
    })
  }
```

TomTom APIs is feature-rich. You can make a great mobile app depending on your ideas. I hope you'll give it a try.