Integrate HERE Indoor Map

HERE Indoor Map offers high quality maps modeling indoor spaces, including building geometry and points of interest spanning across multiple floors. For more information about Here Indoor Map, refer to the HERE Indoor Map User Guide.

This tutorial provides information on how to integrate and use HERE Indoor Map in the Maps API.

Pre-requisites for integrating HERE Indoor Map

The following pre-requisites are required to integrate HERE Indoor Map in the Maps API:

  1. The app credentials must have access to the requested indoor map, and the catalog HRN of the catalog containing the relevant indoor maps is required.

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

<!DOCTYPE html>
  <html>
  <head>
  ...
  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"
     type="text/javascript"></script>
  ...
  </head>

Displaying data on a map

To create and display data on a map, follow the procedures outlined in Get started.

Creating an instance of the Service

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 the loaded Indoor Maps. Refer to H.service.Platform.getVenuesService to get more details on service instantiation.

There are two ways of creating an instance, with and without a valid Indoor Map collection HRN.

Creating an instance of the Service without a collection HRN

It is required to set a valid OAuth token value when HRN is not provided, otherwise the H.venues.Service2 will not work. This link contains more information on how you can get a valid OAuth tokens on the HERE platform.

// Get instance of the Indoor Maps service
// The second parameter 'opt_version' signifies the venues version. 
//    2 = latest venue service, 1 = legacy service
const venuesService = platform.getVenuesService({ 
  token: "Platform token"
}, 2);

Creating an instance of the Service with a collection HRN

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. When HRN is provided, additionally either a HERE Platform API key or token is required. 

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

Fetching list of all available Indoor maps

The H.venues.Service2 object provides Indoor Maps info list through the getMapInfoList method. This function will retrieve a list of available Indoor maps from the given HRN.

// Get a list of indoor maps
venuesService.getMapInfoList().then((res) => {
  console.log("Indoor Maps: ", res)
}).catch((e) => {
  console.error("Error when fetching map list", e)
})

Loading the Indoor Map

Use 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 the loaded Indoor Maps. Refer to H.service.Platform.getVenuesService to get more details on service instantiation.

// 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
  venuesProvider.addVenue(venue);
  venuesProvider.setActiveVenue(venue);

 // create a tile layer for the Indoor Maps provider
  map.addLayer(new H.map.layer.TileLayer(venuesProvider));

  // center the map on the Indoor Map
  map.setCenter(venue.getCenter());
  map.setZoom(15);
});
Example of a HERE Indoor Map
Figure 1. Example of a HERE Indoor Map

The example above shows a HERE Indoor Map on a map.

Changing levels

The Provider facilitates the control of the indoor map. Set the following to retrieve information about the current level or change the level:

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

// get current level index
venue.getActiveLevelIndex();

// and change level
venue.setActiveLevelIndex(1);

Overriding label preferences

To override the default label preferences, set the value for labelTextPreferenceOverride from H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE in H.venues.Service2:

// This is an option to override label preference. 
// If both space name and address are available for a given space, they will take priority over the rest of labels, in the given order.
const labelTextPreferenceOverride = [
  H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE.SPACE_NAME,
  H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE.INTERNAL_ADDRESS
]

// Indoor Maps service provides a loadVenue method
venuesService.loadVenue(VENUE_ID, { labelTextPreferenceOverride }).then((venue) => {
  // add Indoor Map to the venues provider
  venuesProvider.addVenue(venue);
  venuesProvider.setActiveVenue(venue);

 // create a tile layer for the Indoor Maps provider
  map.addLayer(new H.map.layer.TileLayer(venuesProvider));
});

Search functionality

The H.venues.Venue object provides 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
venue.search('Bathroom');

HERE Indoor Map user interface

Default user interface 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);

HERE Indoor Map objects

HERE Indoor Map data is encapsulated in a hierarchy of objects. These objects perform the same 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 of Geometry objects. The raw data associated with each object is accessible through the getData() method. The classes extend H.map.Feature.

results matching ""

    No results matching ""