Add indoor maps to your web application

You can build web-based applications and services with HERE Maps API for JavaScript. HERE Maps API for JavaScript consists of libraries of classes and methods to implement the functionality of an interactive application. You can combine HERE maps and services with your indoor maps to build your unique service.

For more information and code examples for HERE Maps API for JavaScript, see the HERE Maps API for JavaScript Developer Guide.

Use Indoor Maps with HERE Maps API for JavaScript

To use Indoor Maps with HERE Maps API for JavaScript, you must have the following information:

• API Key
• Indoor Map ID
• Optional: Collection Catalog HRN

The API Key and Collection Catalog HRN (optionally) are set in the type H.venues.Service2.Options, when instantiating the class H.venues.Service2. The Indoor Map ID is needed when calling loadVenue to access a specific indoor map.

These three parameters are obtained as follows:

• API Key

  • Use the API key that has been issued for the Default Map Collection App. To create the API Key, follow these steps:
    1. Sign in to the HERE platform using your HERE account.
    2. Open the Access Manager from the launcher.
    3. Select the Apps tab.
    4. Select Show all apps and locate the Default Map Collection App.
    5. Create an API key for this app. You must be an Org Admin or Resource Admin with management rights enabled for all apps and resources in order to create an API key.

• Indoor Map ID, set to loadVenue

  • See Indoor Maps discovery below.

• Optionally: Collection Catalog HRN

  • If you use a standard indoor map setup, you don't need to set the hrn explicity, but the HERE Maps API for JavaScript will handle this for you. However, if you experience problems or need to explicitly set the catalog from where to read the indoor maps, then use the hrn parameter.
  • To use the hrn parameter, locate the default indoor map collection catalog HRN from the Indoor portal frontpage, or from the HERE platform by selecting Data from the HERE platform launcher, and then searching for collection. Copy the default collection catalog HRN.

For more information on indoor maps in HERE Maps API for JavaScript, see the Integrate Indoor Maps topic in the HERE Maps API for JavaScript documentation.

Indoor Maps discovery

• You can copy the Indoor Map UUID from the Indoor portal, and select the last portion of the numerical value without the leading zeros to get the Indoor Map ID. See Concepts.
• Use the the method getMapInfoList of the class H.venues.Service2 to list the indoor maps you can access.

Add base map to the background

If you want to add the base map so that it is visible in the background, you need to link the HERE Vector Tile service to the project. To link the HERE Vector Tile service to your project, follow these steps:

1. Sign in to the HERE platform using your HERE account.
2. Open the Projects Manager from the launcher.
3. Select the Indoor Maps Project.
4. Select Services from the Resources tab.
5. Click Link a Service
6. Search for the HERE Vector Tile service and link it to the project.

HERE Indoor Map resources for HERE Maps API for JavaScript

An Example project is available on GitHub.