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 - HERE platform.

Loading an indoor map

To load an indoor map, use the platform object to get the instance of H.venues.Service2 (venues.Service2 provides the latest service on the 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 for more information on service instantiation.

You must set a valid HRN value for the H.venues.Service2 to work as designed. For more information on how to get a valid HRN string for your project, see the HERE Indoor Map User Guide.

// 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
  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 ""