It is incredibly easy to include a map within your web application using the HERE JavaScript API as long as you’re using vanilla JavaScript, but how do you include a map in your application if you’re using one of the more popular frameworks like Angular? Frameworks like Angular typically have a transpile process and a specific way to do business.

We’re going to see numerous approaches to including a map in your Angular application using the HERE JavaScript API and how easy it is to do so in comparison to vanilla JavaScript.

The goal of this project will be to render a map that looks like the following:

While it is a basic project, we’re going to see two different approaches towards solving the problem with Angular.

The Requirements

There are a few requirements that must be met prior to developing a web application with Angular and displaying a map on the screen.

The Angular CLI must be installed and configured. A HERE developer account must have been registered with an App ID and App Code available.

If you’re new to Angular, the Angular CLI can be obtained through the Node Package Manager (NPM). A HERE developer account can be created for free from the Developer Portal

Creating a New Angular Project with the Angular CLI

With the development prerequisites in place, the next logical step is to create a fresh project to work with. Somewhere on your computer, execute the following command from your command line:

ng new here-project

The above command will create a new project directory with the appropriate Angular boilerplate files.

With the project created, the appropriate JavaScript libraries must be loaded to work with maps and the other location services.

Open the project’s src/index.html file and include the following: