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

Displaying raster map

Overview of the tutorial

This tutorial shows you how to use our SDK to include a Tomtom raster 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 raster map
  • See the result on the browser

 

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

 

 

Step 3. Create a HTML file

Now let’s create a basic HTML5 file to display a map. For this example I create 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-id>', '<your-product-version>');
	    tomtom.L.map('map', {
		    key: <your-api-key>
	    });
        </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-id>', '<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-id> 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>
});

This block will load a Tomtom map in the element with id ‘map’. Don’t forget to replace <your-api-key> with you key, otherwise the map will not work.

 

Step 4. Displaying the result

You have two options available to display the result, you can serve the file directly from the filesystem or you can boot up a http server.

 

Serving from the filesystem:

This is the easiest way to display the results, simply open up your html file in your favourite browser.

 

Boot up a HTTP server:

This is the preferred way of serving web files, although it requires a few extra things.

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.

 

 

You are here