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
  • hrn
  • Indoor Map ID

The first two pieces of information are set in the type H.venues.Service.Options, when instantiating the class H.venues.Service2. 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 class Platform as outlined in the HERE Maps API for JavaScript - Get Started documentation.

These three parameters are obtained as follows:

  • API Key

    • Use the API key that has been issued for the Default 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 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.
  • hrn

    • 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.
  • Indoor Map ID, set to loadVenue

    • You can copy the indoor map HRN from the Indoor portal, and select the last portion of the numerical value without the leading zeros.
    • You can also discover indoor map HRNs that your app can access dynamically, and pick the last portion of the numerical value without the leading zeros.

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.

Retrieve the list of the indoor maps

You can list the indoor maps your API Key has access to using the Interactive Map Layer of the Data API stub available in the HERE Maps API for JavaScript in the H.service.iml.Service class.

The following code prints all the Indoor Map HRNs and the respective indoor map names to the console. You can use the list of names to implement an Indoor Map selection in your application, for example.

// Initialize the platform object
var platform = new H.service.Platform({
  'apikey': '{YOUR_API_KEY}'
  });

// Callback on imlService.searchFeatures success
function onIMLSearchResult (featureCollection) {
  const features = featureCollection.features;
  for (let i = 0; i < features.length; i++) {
    let feature = features[i];
    console.log('Indoor Map HRN = ' + feature.properties.indoorMapId + ', Indoor Map name = '+feature.properties.placeProperties.names[0].name);
  }
};

// Callback on imlService.searchFeatures error
function onIMLSearchError (e) {
  console.log(e);
};

const serviceParameters = {
  'p.featureType':'indoor.Site'
};

var catalogHrn = '{COLLECTION_CATALOG_HRN}';
var layerId = '9999999999999';

const imlService = platform.getIMLService();
imlService.searchFeatures (
  catalogHrn, 
  layerId,
  onIMLSearchResult,
  onIMLSearchError,
  serviceParameters);

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.

Note

The use of background map may incur extra costs.

HERE Indoor Map resources for HERE Maps API for JavaScript

An Example project is available on GitHub.

results matching ""

    No results matching ""