Implementing geocoder service for OpenLayers map in Angular project

Question

I am working on an Angular project, part of which involves displaying a map with a marker on the given address. I wanted to use the geocoding (and reverse) service from Here, and I followed all the instructions from here:

https://developer.here.com/blog/using-the-here-geocoder-api-for-javascript-in-an-angular-application

The problem is that this request requires an "app id" and an "app code" for authentication. I found on Here's website that "app code" is no longer given out for authentication, and only API key and OAuth token are (which I have), for better security. On using the apikey in place of "app code", it responds with an error "credentials invalid for app-id", understandably. I am having trouble finding the documentation for this service platform object where I can find a way to use the API key instead. Any suggestions? If I resolve the authentication issue, I am pretty sure this will work just fine.

For more context on the project, I do have a restriction on the map service to use (OpenLayers), but not on the third-party geocoder service. There are a few geocoding libraries available on npm but they're all either outdated or don't work. My only last resort is to make my own Http request-response service for another external geocoding API (for which I have proper credentials) - I am currently working on that as well but it is taking time, given I am new to Angular. I just want to make sure I have tried everything else wrt already available services before I set this up from scratch. Please help!

Answer 1

I think that with just a couple of changes you are ready to go.

1. Update the version of the API to 3.1, you can do that just by modifying the library url in index.html.

from

<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js"
    type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js"
    type="text/javascript" charset="utf-8"></script>

to

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
    type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
    type="text/javascript" charset="utf-8"></script>

2. Update the platform initialization parameters, you can do that by modifying HereService constructor.

from

this.platform = new H.service.Platform({
    "app_id": "APP-ID-HERE",
    "app_code": "APP-CODE-HERE"
});

to

this.platform = new H.service.Platform({
  'apikey': '{YOUR_API_KEY}'
});

That should works.