Sorry, you need to enable JavaScript to visit this website.

React.js Map Init

Overview

This tutorial shows how to display the map using TomTom SDK and React.js.

Prerequisites

To start using the TomTom Maps SDK for Web with React.js, you need the following:

  • React.js instalation

    Set up the React development environment

    The best way to install React and setup the environment is to follow instructions on React Installation section: Create React App. You can also find more information here: Create React App.

  • An SDK that can be downloaded from here: Downloads. Save and unzip the Maps SDK for Web with vector maps folder. This tutorial assumes your folder is named ‘sdk’. If you choose another name, remember to change the provided paths to match.

    Check out the current file structure

    .
    └── sdk-tutorial
        └── sdk
            ├── LICENSE.txt
            ├── README.md
            ├── glyphs
            ├── images
            ├── map.css
            ├── mapbox-gl-js
            ├── sprites
            ├── styles
            ├── tomtom.min.js
            └── tomtom.min.js.map
        
  • API key

    Create your API key now

    To create a new API key you need to first register on the portal. Once you are logged in there are only two steps remaining:

    Create a new application in your Dashboard:

    Choose all the APIs:

    All set up. You can now click on your newly created app and copy your API key:

Displaying a map

You should have the TomTom SDK and the React.js environment installed on your computer so far.

See the React's file structure:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

Go to the public directory and put there the sdk folder:

public
├── favicon.ico
├── index.html
├── manifest.json
└── sdk

Now, we need to modify a bit the App.js file ("src/App.js").

This is how the App.js file should look like:

 import React from 'react';
 import './App.css';

 class App extends React.Component {
   componentDidMount() { 
     const script = document.createElement('script');
     script.src = process.env.PUBLIC_URL + '/sdk/tomtom.min.js';
     document.body.appendChild(script);
     script.async = true;
     script.onload = function () {
       window.tomtom.L.map('map', {
         source: 'vector',
         key: '<your-api-key>',
         center: [37.769167, -122.478468],
         basePath: '/sdk',
         zoom: 15
       });
     }
   }
 
   render() {
     return <div id = 'map'></div>
   }
 } 
 export default App;

Now, go to the index.css file ("src/index.css"). To put the map on the whole screen, replace the current code with:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#map {
  width: 100vw;
  height: 100vh;
}

The last step is to attach map.css file to index.html. Go to the ("public/index.html") and copy the code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">

  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/sdk/map.css">
  <title>React App</title>
</head>

<body>
  <noscript>
      You need to enable JavaScript to run this app.
  </noscript>

  <div id="root"></div>
</body>

</html>

If you run your application now, you should see the map on the whole screen!

You are here