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

Display a vector map

Overview of the tutorial

This tutorial covers the basic use of the Maps SDK for Web to display a basic vector map in a web page.

To start using the latest version of the Maps SDK for Web, you need the following:

  • The Maps library can be downloaded from here: Downloads. Unzip it and save it in a folder. This tutorial assumes your folder is named ‘sdk’. If you choose another name, remember to change the provided paths to match it.

    Check out the current file structure

          .
          └── sdk-tutorial
              └── sdk
                  ├── LICENSE.txt
                  ├── README.md
                  ├── glyphs
                  ├── sprites
                  ├── styles
                  ├── css-styles
                  ├── maps.css
                  ├── maps-web.min.js
                  ├── maps-web.min.js.map
                  ├── maps.min.js
                  └── maps.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:

We recommend that you have npm and Node.js already installed on your computer to quickly spin up a http server to display the page we will create.

 

Create a HTML file

Now let us create a basic HTML file to display a map. For this example I have created a file named my-map.html.

Next, copy the following script to your my-map.html file.

<!DOCTYPE html>
<html class='use-all-space'>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge' />
    <meta charset='UTF-8'>
    <title>My Map</title>
    <meta name='viewport'
          content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link rel='stylesheet' type='text/css' href='../sdk/maps.css'/>
    <style>
       #map {
           width: 100vw;
           height: 100vh;
       }
    </style>
</head>
<body>
    <div id='map' class='map'></div>
    <script src='../sdk/maps-web.min.js'></script>
    <script>
	    tt.setProductInfo('<your-product-name>', '<your-product-version>');
	    tt.map({
          key: '<your-tomtom-API-key>',
          container: 'map',
          style: 'tomtom://vector/1/basic-main'
      });
    </script>
</body>
</html>

 

Let's go over the important lines

First, we import all the necessary assets, in this case the JavaScript SDK and its styles.

    <!-- Include SDK's stylesheet -->
    <link rel='stylesheet' type='text/css' href='./sdk/maps.css'/>
    <!-- Include JavaScript SDK -->
    <script src='./sdk/maps-web.min.js'></script>
  

Then, we can create our new map.

// Set product's id and version
tt.setProductInfo('<your-product-name>', '<your-product-version>');

//...

// Initialize the TomTom map in the element with an id set to 'map'
tt.map({
   key: '<your-tomtom-API-Key>',
   container: 'map',
   style: 'tomtom://vector/1/basic-main'
});

Remember to replace the placeholders with your real data.

<your-product-name> Name of your product (e.g., com.company-name.product-name).
<your-product-version> The version of your product.
<your-tomtom-API-Key> Your TomTom API Key generated earlier.

Setting the product information is optional, although we encourage you to provide it. This information helps us improve our tools even further. All the data collected this way is kept private. For more information about our privacy policy please see: Privacy And Your Information.

 

Run a http-server

Navigate to the directory containing our example using a terminal.

For example:

  ~$  cd sdk-example/
  ~sdk-example$
  

Install a light-weight http-server (you might need to run this command with admin/root privileges):

  npm install --global http-server
  

Then just simply run the following command:

  http-server
  

Note that npm comes bundled with the Node.js, so please make sure you have it installed on your machine.

 

So now it is time to see the results!

Open a browser and type this url in the address bar: http://localhost:8080/my-map.html. You should be able to see a vector map!

vector-map

You are here