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 https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

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"
 }

Add a dependency to the HERE Maps API for JavaScript library:
```
 npm install @here/maps-api-for-javascript --save
```

Add development dependencies to the Webpack:

 npm install webpack webpack-cli  --save-dev

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.

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"
     }
 }

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
     }
 };

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(
     document.getElementById("mapContainer"),
     maptypes.vector.normal.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:

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

With the local installation of Webpack, update the script section of the package.json by adding the buildtarget:
```
 "build": "webpack"
```
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:

Working with TypeScript

Working with TypeScript

Getting Started

results matching ""

No results matching ""

Developer