Ng2-heremaps-next NPM

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.

angular ng2 heremaps typescript

tslib

@infinitebrahmanuniverse/nolb-ng2-h @everything-registry/sub-chunk-2277 @zalastax/nolb-ng2-h

0.2.6

3 years ago

0.2.5

3 years ago