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.