Maps API for JavaScript Developer's Guide

Venues

When you plan a trip or arrange to meet with friends, there is a good chance that your destination is indoors. For example, it could be in a large multi-storey shopping mall, with shops, movie theaters and restaurants. Once there, you may want to know what else is there and how to find it. A map of the location could save a lot of time, and it would be nice to share it .

The HERE Venue Maps API provides access to more than 10,000 venues around the world through PNG/JS tiles including floor levels or full JSON models, including polygons/geometry, connectors (elevators/escalators), access points (entry/exit doorways) and store/POI information.

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

The simple example below shows how to display the venue layer on the map. The code:

  1. Obtains an instance of Platform.
  2. Gets the HTML element that acts as the map container.
  3. Obtains the an object with the default map layers.
  4. Instantiates the map, with the default layers and setting the map zoom and center.
  5. Adds the venue layer to the map.
// Instantiate a map and platform object:
var platform = new H.service.Platform({
  'app_id': '{YOUR_APP_ID}',
  'app_code': '{YOUR_APP_CODE}'
});

// Retrieve the map container (map target element):
var targetElement = document.getElementById('mapContainer');

// Get the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();

// Instantiate the map:
var map = new H.Map(
  document.getElementById('mapContainer'),
  defaultLayers.normal.map,
  {
  zoom: 19,
  center: { lat: 51.513807, lng: -0.127183 }
  });

// Add the venue layer to the map:
map.addLayer(defaultLayers.venues);

The image below shows the result of executing this code.

Figure 1. Venues layer on a map

Object Hierarchy

The venue layer displayed on the map encapsulates a hierarchy of objects with information about venues.

The root is Venue . It contains one or more Building s, which hold Floor s.

Each Floor holds raw data associated with it that can be retrieved by calling the method getData() . For more details, see HERE Venue Maps API documentation, specifically Floor IATileMember .

A Floor contains one or more Space objects. Each Space holds raw data associated with that space that can be retrieved by calling the method getData() . For more details on data format see HERE Venue Maps API documentation about Space IATileMember .

The figure below represents this hierarchy graphically.

Figure 2. Venues Object Hierarchy

Each floor has a special space called "floor space", which represents the footprint of the floor. It can be retrieved by calling the method getFloorSpace() . You can use it to style the areas of the floor not covered by other spaces.

Space inherits from H.map.Object , therefore you can use the methods setVisibility() or setStyle() as with any other map objects.

Venue, Building and Floor inherit from the H.map.Group.

It is possible to attach event listeners to the map in order to handle user interaction with Space instances. For example, you can implement specific behavior in response to tap and hover events related to a Space. This is shown in the code below, which defines:

  • A tap listener – outputs Space-related data to the console
  • A pointermove listener – highlights a floor by putting a black border around it when the (mouse) pointer moves over it
// We assume that map was properly initalized and venue layer was added

// Log space information on "tap" event:
map.addEventListener('tap', function(e) {
  // Make sure we are dealing with Space objects:
  if (e.target instanceof H.service.venues.Space) {
  console.log(e.target.getData());
  }
});

// Highlight the space on "pointermove"
map.addEventListener('pointermove', function(e) {
  var space = e.target;

  // Make sure we are dealing with Space objects:
  if (space instanceof H.service.venues.Space) {
  // Highlight the space by showing 2px black outline
  // Calling "getCopy" is necessary as long as we want to keep the
  // original styling properties such as fillColor untouched:
  space.setStyle(space.getStyle().getCopy({
    lineWidth: 2,
    strokeColor: 'rgba(0,0,0,0.5)'
  }));
  }
});

Changing Colors and Getting Venue Information

The Maps API for JavaScript allows you to apply different visual styles to floor spaces, depending, for example, on category or id. You can see this in the code below, which:

  • Instantiates the Platform class.
  • Obtains an instance of the Venue service.
  • Creates a Venue tile layer with a callback that, for each new space:
    • sets the color for a space identified as "Consumer Electronics Store"
    • highlights a 'target shop' by changing the color of its label
  • Adds the tile layer to the map.
  • Obtains a venue provider and uses it to change the floor level (and thus moves to the next floor).
// Instantiate a map and platform object:
var platform = new H.service.Platform({
  'app_id': '{YOUR_APP_ID}',
  'app_code': '{YOUR_APP_CODE}'
});

// Get an instance of the venue service:
var venueService = platform.getVenueService();

// Create venue layer with desired customizations:
var customVenueLayer = venueService.createTileLayer({
    // This callback is called each time space is created on the map:
    onSpaceCreated: function(space) {
    // Note that you can style spaces according to their category,
    // venue category or id
    var id = space.getFloor().getBuilding().getId(),
      spaceData = space.getData(),
      categoryId = spaceData && spaceData.category && spaceData.category.id;

    // If space has a category "Consumer Electronics Store"
    // See http://developer.here.com/rest-apis/documentation/venue-maps/topics/resource-categories.html
    if (categoryId === '9987') {
      // Get existing default style of the space and override just the "fillColor" property:
      space.setStyle(space.getStyle().getCopy({
       fillColor: 'rgba(100,140,156,0.6)'
      }));
    }

    // Change the label color of desired shop:
    if (id === 'MY_SHOP_ID') {
      space.initLabelStyle({
      fillColor: 'rgba(41,165,74,0.8)'
      });
    }
    }
  });

// Add custom venue layer to the map:
map.addLayer(customVenueLayer);

// Get TileProvider from our custom venue layer:
var venueProvider = customVenueLayer.getProvider();

// Increment floor level:
venueProvider.setCurrentLevel(venueProvider.getCurrentLevel() + 1);

Changing the Floor Level

The code in the previous section demonstrated not just how to apply different styles to floor spaces, but also how to move to the next floor level. Of course, you can also, simply set the floor level, which mean "move to a specific floor" in a venue. This is shown in the following code:

// Instantiate a map and platform object:
var platform = new H.service.Platform({
  'app_id': '{YOUR_APP_ID}',
  'app_code': '{YOUR_APP_CODE}'
});

// Get default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();

// Add venue layer to the map:
map.addLayer(defaultLayers.venues);

// Get TileProvider from the venue layer:
var venueProvider = defaultLayers.venues.getProvider();

// Set floor level:
venueProvider.setCurrentLevel(-1);
Figure 3. Parking level of the Alexa shopping center in Berlin

Note that when you set the floor level, the value applies to the venue provider object, in other words, to all the venues on the map and not for each building specifically. Therefore, if you set the floor level to 10 and a building on the map has levels from -2 to 5, level 10 is not be visible, because it cannot be shown.

You can show venue locations on the map as markers regardless of the current selected floor level by using the discovery service. For more details, see HERE Venue Maps API documentation about Discovery Service.

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.