ng2-heremaps

Angular Heremaps

Allows you to interact with the HERE Maps API for JavaScript through Angular.

Check API Documentation

Install

npm install ng2-heremaps @types/heremaps --save

Setup

step 1: add ng2-heremaps to app NgModule

import { HereMapsModule } from 'ng2-heremaps';
 
@NgModule({
  imports: [
    ...
    HereMapsModule.forRoot({
      apiKey: 'your heremaps API key',
      appId: 'your heremaps API id',
      apiVersion: '3.0',
      libraries: ['core', 'service']
    }),
    ...
  ],
  bootstrap: [AppComponent],
  declarations: [AppComponent]
})
class AppModule {}

Use

Basic map

 <div style="height: 400px; width: 600px;">
    <heremap [center]="{latitude: 40.730610, longitude: -73.935242}"></heremap>
  </div>

Inputs

Input	Type	Default	Description
autoFitMarkers	boolean	true	Should map auto resize bounds to current set of markers
backgroundColor	string	transparent	This color will be visible when tiles have not yet loaded as the user pans.
center	LatLng or Location	REQUIRED	The initial Map center.
enableDoubleClickZoom	boolean	true	Enables/disables zoom and center on double click.
draggable	boolean	true	If false, prevents the map from being dragged.
keyboardShortcuts	boolean	true	If false, prevents the map from being controlled by the keyboard.
scrollwheel	boolean	true	If false, disables scrollwheel zooming on the map.
zoom	number	5	Map zoom level
minZoom	number	null	The minimum zoom level which will be displayed on the map.
maxZoom	number	null	The maximum zoom level which will be displayed on the map.
disableDefaultUI	boolean	false	Enables/disables all default UI.
mapTypeControl	boolean	false	Enabled/Disabled state of the Map type control.
rotateControl	boolean	false	Enabled/Disabled state of the Rotate control.
scaleControl	boolean	true	Enabled/Disabled state of the Scale control.
streetViewControl	boolean	false	Enabled/Disabled state of the Street View Pegman control.
animateZoom	boolean	true	Enabled/Disabled zoom animation.
zoomControl	boolean	true	Enabled/Disabled state of the Zoom control.

Directives

There are directives for directions, markers, and polylines. Please see the files directly to see the available inputs and outputs.