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 used in three ways:
    • Downloaded from NPM: npmjs.com
    • With a CDN: https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/maps-web.min.js - Note: Include latest version in the URL
    • Downloaded from this page: Downloads.

        In this tutorial, we are using CDN as an example.

  • API Key
     

    Get your API Key now

    To create a new API Key you need to first register on the portal. Once you are logged in there is only one step remaining:

    Go to your Dashboard:

    Go to the dashboard

    You can now click on your app - My first app and copy your API Key:

    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 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'/>
    <!-- Replace version in the URL with desired library version -->
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/maps.css'/>
    <style>
       #map {
           width: 100vw;
           height: 100vh;
       }
    </style>
</head>
<body>
    <div id='map' class='map'></div>
 <!-- Replace version in the URL with desired library version -->
    <script src='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/maps-web.min.js>
    <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.


<!-- Replace version in the URL with desired library version --> 
    <!-- Include SDK's stylesheet -->
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/maps.css'/>
    <!-- Include JavaScript SDK -->
    <script src='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/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.
<version> Version of the library - all versions can be found in the Downloads section.

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 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