Integrate Indoor Maps

HERE Indoor Maps provides a wealth of hyperlocal information about indoor spaces including building geometry and points of interest, spanning across multiple floors. For more information about Here Indoor Map, refer to the Introduction to HERE Indoor Map.

Setting up HERE Indoor Maps

The following is required to use HERE Indoor Maps in the Maps API:

  1. The app credentials must have access to the requested Indoor Map. Additionally, the catalog HRN of the catalog that contains the indoor maps will be needed.

  2. Include the HERE Indoor Maps module script in the <head> section of the HTML page:

<!DOCTYPE html>
  <script src=""
  <script src=""
  <script src=""
  <script src=""
  <script src=""

Displaying data on map

To create the map, make sure to follow the Quick Start guide.

Loading the Indoor Map

Use the platform object to get the instance of H.venues.Service2 (venues.Service2 provides the latest service on Platform) to load your Indoor Maps and create a H.venues.Provider object to control of the loaded Indoor Maps. Refer to H.service.Platform.getVenuesService to get more details on service instantiation. It is required to set a valid HRN value, otherwise the H.venues.Service2 will not work. This link contains more information on how you can get a valid HRN string for your project.

// Get instance of the Indoor Maps service
// The second parameter 'opt_version' signifies the venues version. 
//    2 = latest venue service (hrn is mandatory for the latest service), 1 = legacy service
const venuesService = platform.getVenuesService({ 
  apikey: 'API KEY',
  hrn: 'Platform hrn for indoor maps catalog'
}, 2);

// Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
const venuesProvider = new H.venues.Provider();

// Indoor Maps service provides a loadVenue method
venuesService.loadVenue(VENUE_ID).then((venue) => {
  // add Indoor Map to the venues provider

 // create a tile layer for the Indoor Maps provider

  // center the map on the Indoor Map

Example Indoor Map

Figure 1.

The example above shows an Indoor Map on the map.

Changing levels

The Provider facilitates the control of the Indoor Map. To get information about the current level or change the level:

// Get active Indoor Map
const venue = venuesProvider.getActiveVenue();

// get current level index

// and change level

The H.venues.Venue object provides a search functionality through the search method. The search string is not case sensitive and also looks for close matches:

// Get the active Indoor Map
const venue = venuesProvider.getActiveVenue();

// Search for bathrooms'Bathroom');

Indoor Maps user interface

Default UI elements control Drawings and Levels using H.venues.ui.DrawingControl and H.venues.ui.LevelControl:

// Get the active Indoor Map
const venue = venuesProvider.getActiveVenue();

// Create the level control
const levelControl = new H.venues.ui.LevelControl(venue);
ui.addControl('level-control', levelControl);

// Create the drawing control:
const drawingControl = new H.venues.ui.DrawingControl(venue);
ui.addControl('drawing-control', drawingControl);

Indoor Map objects

The Indoor Map data is encapsulated in a hierarchy of objects. These objects perform as other MapObjects and are represented by the following classes:

  • H.venues.Venue
  • H.venues.Drawing
  • H.venues.Level
  • H.venues.Geometry

The root is Venue, which contains one or more Drawings, which contains one or more Levels. And the Level object holds the relevant collection Geometry objects.

The raw data associated with each object is accessible through the getData() method.

The classes extend

results matching ""

    No results matching ""