How to add indoor maps to your web applications

You can build web-based applications and services with the HERE Maps API for JavaScript, which contains classes and methods for creating interactive applications. You can combine HERE maps and services with your indoor maps to build your unique service.

For more information and code examples, 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 (optional) are set in the type Options when instantiating the class Venue Service class. The Indoor Map ID is needed when calling loadVenue to access a specific indoor map.

📘

Note

The same API key is used when instantiating the Platform class as outlined in the HERE Maps API for JavaScript - Get Started documentation.

Configure the parameters as follows:

• API Key - Use the API key that was issued for the Default Map Collection App. To create the API Key:
  • Sign in to the HERE platform using your HERE account.
  • Open the Access Manager from the launcher.
  • Select the Apps tab.
  • Select Show all apps and locate the Default Map Collection App. If you don't see the Default Map Collection App, contact your HERE account executive to gain access.
  • 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. For more information, see Indoor Maps discovery below.
• Collection Catalog HRN (Optional)
  • If you use a standard indoor map setup, you don't need to set the hrn explicitly, 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 front page, or from the HERE platform by selecting Data from the HERE platform launcher, and then searching for collection. Copy the default collection catalog HRN.

📘

Note

If you don't explicitly provide the hrn parameter, you must provide the project-scoped token in the parameter token in H.venues.Service2.Options. See the documentation for details.

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 method getMapInfoList of the class Venue Service class 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 must link the HERE Vector Tile service to the project. To link the HERE Vector Tile service to your project:

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.

📘

Note

The use of a background map may incur extra costs.

HERE Indoor Map resources for HERE Maps API for JavaScript

An example project is available on GitHub.