ng2-heremaps: A TypeScript repository from michael-mader

Angular Heremaps

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

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.