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

Displaying vector map

Overview of the tutorial

This tutorial shows you how to use our SDK to include a Tomtom vector map in your webpage. In this tutorial you will do the following:

 

  • Create a simple HTML page
  • Include our TomTom Maps SDK for web to display a vector map
  • Run a simple Node.js based Http server to display the page

 

Prerequesites

  • API key
  • Npm and Node.js

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

API keys

To get an API key:

 

Note - It is possible to have a single key(app) for all TomTom services, but you can also choose to have individual keys for the different services.

 

Step 1. Download our Maps Web SDK

Before you start you need to download the latest version of our SDK from https://developer.tomtom.com/maps-sdk/maps-sdk-downloads:

Our SDK comes in two flavors, with raster and with vector maps. By default it comes with raster maps, but as you can see in the page above you can also download the SDK with vector maps.

For this particular example we will use vector maps, so please download Maps SDK for Web with vector maps.

 

Step 2. Extract the SDK

Create a new directory for our example and extract there the SDK.

For this example I created a directory called sdk-example and extracted there our SDK to a folder named sdk. This is how it should look like:

 

The contents of the sdk folder should look like this:

Description of the contents:

  • glyphs - fonts used for rendering vector maps
  • images - images used by widgets, POI icons, etc.
  • sprites - images used for rendering vector maps
  • styles - contains json files with style definition for vector maps
  • map.css - minified css from leaflet, mapbox and widgets
  • tomtom.min.js - minified version of the library
  • tomtom.min.js.map - the source map of the library

These are all the elements required for vector maps to work.

 

Step 3. HTML file

Now let’s create a basic HTML5 file to display a map. For this example I created a file named my-map.html as you can see below.

 

Add the following script to my-map.html:

<!DOCTYPE html>
<html>
    <head>
        <title>My map</title>
        <link rel='stylesheet' type='text/css' href='sdk/map.css'/>
        <script src='sdk/tomtom.min.js'></script>
    </head>
    <body>
        <div id='map' style='height:500px;width:500px'></div>
        <script>
	    tomtom.setProductInfo('<your-product-name>', '<your-product-version>');
            tomtom.L.map('map', {
		    key: <your-api-key>,
                    source: 'vector',
                    basePath: '<your-tomtom-sdk-base-path>'
	    });
        </script>
    </body>
</html>

Let's go over the important lines:

<link rel='stylesheet' type='text/css' href='sdk/map.css'/>

In this line we include the styles used in the map.

 

<script src='sdk/tomtom.min.js'></script>

In this line we load the Tomtom JS SDK, so that we can create our map.

 

tomtom.setProductInfo('<your-product-name>', '<your-product-version>');

In this line you set your product Id and your product version. This step is optional although we encourage you to provide this information - it will help us deliver you better tools in the future. All statistics we gather via this key are kept private. For more information about our privacy policy please go here.
Don't forget to replace <your-product-name> and <your-product-version> with the correct values. For instance, as a product id you may use product name followed by your domain name (e.g., myproduct.example.com).

 

tomtom.L.map('map', {
		    key: <your-api-key>,
                    source: 'vector',
                    basePath: '<your-tomtom-sdk-base-path>'
	    });

This block will load a Tomtom map in the element with id ‘map’.

Don’t forget to replace <your-api-key> with you key and <your-tomtom-sdk-base-path> with the sdk base path in your project, in our case it would be /sdk.

 

Map styles

In point 2 we mentioned that our sdk contains several styles that can be used in the map. For more information on this please refer to our Map Styles example and TomTom Layer documentation.

 

Step 4. HTTP server

We need a basic HTTP server to display the page we created in the previous step.

For this part we are going to use npm and node js, so please make sure you have it installed on your machine. 

 

Use your favorite terminal and navigate to the example folder we created previously sdk-example:

 

The easiest way to get a server running is to use an existent package from the npm repository, we are going to use http-server for our example, so let’s install it. In your terminal run the following command:

npm install http-server

This will create a directory called node_modules in sdk-examples and will contain the http server module and its dependencies.

 

 

And to run the server simply type http-server. You should see the following:

 

 

Result!

 

You are all set and ready to start developing! To see the result, open your favorite browser and navigate to http://localhost:8080/my-map.html.