Running examples locally

Overview of the tutorial

This tutorial shows how to run offline functional examples. We will do the following steps:

• Download examples
• Prepare your environment
• Replace keys placeholders in HTML files
• Run simple http-server to display these examples

Step 1. Download offline functional examples

Before you start you need to download the latest version of offline functional examples, which can be found here https://developer.tomtom.com/maps-sdk/maps-sdk-downloads and unpack the archive.

In the containing folder you will find mutiple files and folders:

• HTML files contain the examples code
• assets folder contain css files and fonts used by the map
• css, img and js contain assets needed by the examples (custom CSS, images and JavaScript libraries, which are used in the examples)
• sdk is the folder where our SDK lives. Contains glyphs, sprites, styles and images used internally on the map. Also contains the minified version of SDK

Step 2. Install node.js

Download and install the latest LTS version of node.js suitable for your operating system, you can download from here https://nodejs.org/en/download/.

Step 3. Install npm dependencies

After you finish installing node.js, it is time to install dependencies which are used by the examples. Go into the directory where you have extracted the examples. Open the terminal or command line tool and type the following command:

npm install

This will install the necessary dependencies.

Step 4. Prepare config.json for key replacement script

In order for the offline examples to work you need to replace keys in the examples, for that we have a config file - config.json - where you can enter your keys.

Open the config.json file, which is in the main folder with examples. There are several placeholders for your keys, which you need to replace.

{
    "keys": {
        "maps": "<your maps key>",
        "routing": "<your routing key>",
        "search": "<your search key>",
        "traffic": "<your traffic key>",
        "trafficFlow": "<your trafficFlow key>"
    },
    "paths": {
        "basePath": "/sdk"
    }
}

You may notice that there is an additional property named basePath. If you go back to Step 1, there is a description of sdk folder. basePath points to this folder, so if you have moved it you will need to change this property to the correct path, if not, you can leave it as it is.

Step 5. Replace keys placeholders using the provided script

We provide a script which will automatically replace placeholders for keys and base path in all the examples (otherwise you would have to edit each file manually). In order to run this script, open terminal or command line tool in the main directory and type following command:

npm run replaceKeys

If there is no error message on the console, it means that all keys have been replaced successfully.

Step 6. Run HTTP server

In order to run our examples, open the terminal or command line tool and type the following command:

npm run start

This will start a http-server. Most likely it will open at http://localhost:8080, if it doesn’t, there is an output log on the console of http-server: