angularopenlayersgeocodinghere-apiangular-openlayers

Implementing geocoder service for OpenLayers map in Angular project


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!


Solution

  • 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>
    
    1. 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.