Skip to content
This repository has been archived by the owner on Jan 24, 2023. It is now read-only.
/ ng2-heremaps Public archive

Here maps for Angular 2, 4, 5

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
license-banner.txt
Notifications You must be signed in to change notification settings

mjaric/ng2-heremaps

Repository files navigation

Angular Heremaps

Build Status npm

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.