Working with TypeScript

This section shows how to use HERE Maps API for JavaScript with TypeScript. The sections below provide the simple boilerplate code that produces the output for the TypeScript code with the help of Webpack.

Getting Started

In order to be able to use the HERE Maps API for JavaScript with NPM the HERE public repository must be added to the NPM configuration:

npm config set @here:registry
  1. Assuming that the node.js and npm are installed create a directory that will contain the project and run from the console the following command:

    npm init

    It will produce the package.json file similar to the one below:

         "name": "typescript-demo",
         "version": "1.0.0",
         "description": "",
         "main": "index.js",
         "scripts": {
             "test": "echo \"Error: no test specified\" && exit 1"
         "author": "",
         "license": "ISC"
  2. Add a dependency to the HERE Maps API for JavaScript library:

     npm install @here/maps-api-for-javascript --save
  3. Add development dependencies to the Webpack:

     npm install webpack webpack-cli  --save-dev
  4. Install TypeScript compiler and loader for the project:

     npm install --save-dev typescript ts-loader

    After this step, all the development prerequisites are installed and the project must be configured.

  5. In the root directory add the following tsconfig.json that defines the minumal configuration for the TypeScript compiler:

         "compilerOptions": {
             "outDir": "./dist/",
             "noImplicitAny": true,
             "module": "es6",
             "target": "es5",
             "jsx": "react",
             "allowJs": true,
             "moduleResolution": "node"
  6. Create webpack.config.js file in the root directory of the project with the following configuration

     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
  7. Next step is to create in the root directory index.tstypescript file responsible for the display of the basic map:

     import "@here/maps-api-for-javascript";
     let platform = new H.service.Platform({
         apikey: "{YOUR_API_KEY}",
     let maptypes = platform.createDefaultLayers();
     let map = new H.Map(
             zoom: 10,
             center: { lng: 13.4, lat: 52.51 },
     new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

    And the corresponding index.html HTML file that uses the compiled output from the dist directory:

             <meta name="viewport" content="initial-scale=1.0, width=device-width" />
             <meta charset="utf-8">
             #map {
                 position: absolute;
                 left: 0;
                 top: 0;
                 width: 100%;
                 height: 100%;
             <div id="mapContainer"></div>
             <script src="./dist/index.js"></script>
  8. With the local installation of Webpack, update the script section of the package.json by adding the buildtarget:

     "build": "webpack"
  9. Run the following command from the console.

    npm run build

    This produces the bundled build and puts it in the dist directory. Accessing the index.html page from the browser will display the following result: A basic non-interactive map

results matching ""

    No results matching ""