Venues

HERE Venues provides a wealth of hyperlocal information about indoor spaces, including building geometry and points of interest, spanning across multiple floors. HERE has mapped thousands of buildings globally, including, shopping malls, airports, train stations, parking garages, corporate campuses, factories, warehouses and many other types of buildings. If you are a venue owner and are interested in leveraging HERE Venues with the Maps API for Javascript, contact us at venues.support@here.com.

The Venues module provides access to given venues including full JSON models with polygons/geometry, areas and POI information.

All these features can be accessed through the venues module (mapsjs-venues.js) in the Maps API for JavaScript for easy integration into a map application.

Setting up venues

To be able to use Venues in the Maps API, requires

  1. Access to venue data In order the load venue data, the app credentials should have access to the requested venue data.

  2. Including the venues 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 map

To create the map, make sure to follow the Get Started guide.

Loading the venue data

Than use the platform object to get the instance of H.venues.Service to load Venue data and create a H.venues.Provider to enable control of the loaded venues on the map:

// Get instance of venues service using valid apikey for venues
const venuesService = platform.getVenuesService({ apikey: 'API KEY' });

// Venues provider interacts with tile layer to visualize and control the venue map
const venuesProvider = new H.venues.Provider();

// Venues service provides a loadVenue method
venuesService.loadVenue(VENUE_ID).then((venue) => {
  // add venue data to venues provider
  venuesProvider.addVenue(venue);
  venuesProvider.setActiveVenue(venue);

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

  // center map on venue
  map.setCenter(venue.getCenter());
  map.setZoom(15);
});

Example map

Figure 1.

The example above shows a venue map loaded on the map.

Changing levels

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

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

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

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

The H.venues.Venue object also provides a search functionality through the search method. It is performed on geometry data where names and address are taken into account. The search string is not case sensitive and also looks for close matches:

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

// Search for bathrooms
venue.search('Bathroom');

Venue UI

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

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

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

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

Map Objects

The venue 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 row data associated with each of the objects is accessible through the getData() method.

The classes extend H.map.Feature.

results matching ""

    No results matching ""