Build HERE Maps with TypeScript

This tutorial guides you through the process of integrating the HERE Maps API for JavaScript with TypeScript and Webpack. By following these steps, you set up a comprehensive environment to make the most of the HERE Maps API for JavaScript with TypeScript and Webpack in your project.

Before you begin

Ensure that you installed the following software in your system:

Node.js - JavaScript runtime environment that allows running JavaScript code outside a web browser.
NPM (Node Package Manager) - Package manager for Node.js that facilitates the installation, sharing, and management of dependencies (libraries and tools) for Node.js projects.

Configure a TypeScript project

Follow these steps to create a basic TypeScript project that includes the HERE Maps API for JavaScript.

Create a folder for your TypeScript project.
Open the Command Prompt, and then change the directory to the project folder.
Enable the use of the HERE Maps API for JavaScript with NPM by adding the public HERE Maps API for JavaScript repository to the NPM configuration through the following command:
```
npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/
```
Initialize a package.json file for your project by running the following command:
```
npm init
```
📘
Note
The Node.js environment prompts you to set the basic project settings by presenting a series of questions in the command line. You can provide input to customize the package.json file during this initialization process or accept the default settings.
At the final confirmation prompt, complete the package.json generation by entering yes.
Include the HERE Maps API for JavaScript library as a dependency by entering the following command:
```
npm install @here/maps-api-for-javascript
```
Install development dependencies for Webpack through the following command:
```
npm install --save-dev webpack webpack-cli
```
Install the TypeScript compiler and loader by entering the following command:
```
npm install --save-dev typescript ts-loader
```
In the project folder, create a file called tsconfig.json with the following structure:
```
{
  "compilerOptions": {
      "outDir": "./dist/",
      "noImplicitAny": true,
      "module": "es6",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "moduleResolution": "node"
  }
}
```
This file is used to configure the TypeScript compiler, with the following settings:
- "outDir": "./dist/": Sets the output directory for compiled JavaScript files. In this case, the compiled files are placed in the folder called dist/ that is located in the same directory as the tsconfig.json file.
- "noImplicitAny": true: Prevents TypeScript from automatically adding the any type to variables when they are declared without an explicit type.
- "module": "es6": Sets the module system for compiled JavaScript files to ES6.
- "target": "es5": Sets the target language version for the compiled JavaScript code. In this case, the target language is set to ES5.
- "jsx": "react": Configures TypeScript to use the React syntax when compiling JSX files.
- "allowJs": true: Allows JavaScript files (.js files) to be compiled alongside TypeScript files (.ts and .tsx files).
- "moduleResolution": "node": Sets the module resolution strategy for the compiler. In this case, it is Node.js.

In the project folder, create the following webpack.config.js file:

const path = require('path');

module.exports = {
    entry: './index.ts',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production',
    node: {
        global: false,
    },
    performance: {
        maxEntrypointSize: 2048000,
        maxAssetSize: 2048000
    }
};

This file provides basic configuration that can be used as a starting point for building a small to medium-sized TypeScript application with Webpack, with the following settings:

Compiles a TypeScript application with an entry point at index.ts.
Outputs the compiled code to a directory called dist.
Uses production mode for optimizations.
Sets performance limits to prevent large files from being generated.

For more information, see the Webpack documentation.

In the project folder, create the following index.ts file that is the entry point for your TypeScript code:

📘
Note
Replace the value of the apikey attribute with your own HERE API key.

// Import the HERE Maps API for JavaScript library
import "@here/maps-api-for-javascript";

// Create default map layers using the HERE Maps platform
const platform = new H.service.Platform({
    apikey: 'YOUR_HERE_APIKEY',
});

// Create a new map instance with specified options
const maptypes = platform.createDefaultLayers({ppi:250});
const map = new H.Map(
    document.getElementById("mapContainer"), // Target HTML element for the map
    maptypes.vector.normal.map, // Use the vector map type
    {
        pixelRatio: 2,
        zoom: 11,
        center: { lng: 14.3279, lat: 40.8352 },
    }
);
// Enable basic map events for user interaction
new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

In the project folder, create the following index.html file:
```
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta charset="utf-8">
        <style>
        #map {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <div id="mapContainer"></div>
        <script src="./dist/index.js"></script>
    </body>
</html>
```
This file is the main entry point for your web application when it is loaded in a web browser.

Result: The final project folder structure consists of the following files and folders:
- project folder (root)
  - node_modules/
  - index.html
  - index.ts
  - package.json
  - package-lock.json
  - tsconfig.json
  - webpack.config.json
    
    👍
    Tip
    The HTML definition allows you to refernce additional references, such as the favicon, and among others, as shown in the following example: <link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
In your project folder, open the package.json file and add the following command in the scripts section:
```
"build": "webpack"
```
After adding the build script execution command, when you run the npm run build command in the terminal, the build script automatically triggers the Webpack bundling process, as defined in your project's configuration.
Run the following command to build and generate the bundled output:
```
npm run build
```
After the build completes, the Command Prompt displays a success message and a dist folder is created that contains the JavaScript code responsible for managing the map.
From the project folder, open the index.html file in a web browser page.

Result: The web page displays an interactive HERE map, as shown in the following example: A basic HERE map

Next steps

To explore the design and features of the HERE Maps API for JavaScript, see the API Reference.