CODEWITHSUNDEEP
angularhere-api
octal akshay
octal akshay

Reputation: 31

angular 4 module for here-API

I am unable to find angular-4 module for Here-Api. They have given only JS SDK which is difficult to integrate in angular-4. Has anyone able to integrate HERE-API js/API SDK for angular-4?

Upvotes: 2

Views: 2878

Answers (4)

pds
pds

Reputation: 2582

Option (a): You can use imports in your My-App.ts file: e.g.

//In My-Map-App.ts
import "src/assets/here/mapsjs-core.js";
import "src/assets/here/mapsjs-service.js";
import "src/assets/here/mapsjs-places.js";
declare let H;

// then some use case..
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class MyMapApp {

  searchForPlaces(){
    var platform = new H.service.Platform({ ... });
    var explore = new H.places.Explore( ... );
  }
}

Above, I have downloaded and copied the here JS files into my local assets directory.

Option (b): is to use a <script..> import in index.html and then declare let H in your .ts file.

FWIW: as my mapping application has expanded, I find putting the map object into an Angular service and letting Angular's inversion of control insert it into my other components and services is the path of least adversity.

Upvotes: 0

Nic Raboy
Nic Raboy

Reputation: 3153

I know this question is a bit older now, but I've actually written a tutorial of using HERE with Angular.

https://developer.here.com/blog/display-here-maps-angular-web-application

Long story short, you add the HERE JavaScript libraries to your index.html file, declare the platform class, and then you're good. Of course my tutorial will have a lot more depth.

Just for clarity, I work for HERE on the Developer Evangelism team.

Best,

Upvotes: 1

Michel
Michel

Reputation: 28349

As there is no npm package for HERE maps, you'd need to integrate the HERE library directly in your index.html header, as in the examples from the developer portal, or in the scripts array property of .angular-cli.json.

Once the scripts are loaded, you can start to integrate the maps in your angular components. Besides applying HERE examples, the only thing you need to know is how to reference to the HTML element of your angular component that will host the map.

I put up a project on github with all the required setup, that you can checkout, npm install and then npm start : https://github.com/michaelbazos/angular-here

Upvotes: 2

Joe B
Joe B

Reputation: 788

first include all script tags in the index page then install the definitions file from DefinitelyTyped 

npm install --save @types/heremaps

then add a reference tag /// <reference types="@types/heremaps" /> so you have all the typings and intellisense

 var platform = new H.service.Platform({
        'app_id': 'YOUR APP ID',
        'app_code': 'YOUR_APP_CODE'
    });

Upvotes: 3

Related Questions