Maps API for JavaScript Developer's Guide

Metainfo

HERE Maps API for JavaScript provides a Metainfo layer that provides information about objects visible on the map, for example, buildings, stations, labels, etc. The Metainfo layer can be used to enrich the map experience by highlighting buildings or street names, or displaying the names of POIs. The metaInfo layer uses the Map Tile API.

The code example below implements a simple use case involving the Mapinfo layer in which the map user can tap on map objects to view information about them. The code:

  1. Adds the Metainfo layer to the map.
  2. Registers a tap event listener with the tile provider responsible for the MetaInfo layer.

The listener is a callback function to be invoked when the map user taps on a map (spatial) object, for example a marker. It retrieves the object from the event passed to it and outputs information about the object to the console.

Please bear in mind that all objects are transparent by default, but they remain interactive.
/**
 * Assuming that "map" and "platform" are already initialized
 */
 // Create default map layers:
var defaultLayers = platform.createDefaultLayers();

// Add metaInfo layer to the map:
map.addLayer(defaultLayers.normal.metaInfo);

// Store a reference to the metaInfo TileProvider:
var tileProvider = defaultLayers.normal.metaInfo.getProvider();

// Subscribe to tap events on all objects of the metaInfo provider:
tileProvider.addEventListener('tap', function (e) {
  // Save a reference to the clicked spatial object:
  var spatial = e.target;

  // Output meta data for the spatial object to the console:
  console.log(spatial.getData());
});

The example above uses the Metainfo layer with default settings that filter out building outlines. However, the API allows you to change the filter settings and make use of buildings data (including building outlines). The code below extends the initial steps from the previous examples by:

  1. Obtaining a service object for the Metainfo layer.
  2. Using the service to create a tile layer that defines:
    • the required map tile size
    • the tile pixel ration
    • an array of information category names to be excluded – in this case the array is empty to indicate that all information is to be included
/**
 * Assuming that "map" and "platform" are already initialized
 */
// Get the Metainfo service object from the platform:
var metainfoService = platform.getMetaInfoService();

// Create a tile layer with an empty array (this means all categories are included filtered out categories:
var metainfoLayer = metainfoService.createTileLayer(/**tile size*/256,
    /** tile pixel ratio*/1, []);
    
// Add the Metainfo layer to the map:
map.addLayer(metainfoLayer);

Additionally, the base map and the corresponding Metainfo layer can be configured to provide information about points of interest (POIs) such as banks, restaurants, government buildings, etc. The following code shows how to configure map layers to fetch this data and to display the POI name in an info bubble. The code:

  1. Creates the default map layers, including the POI layer.
  2. Adds the Metainfo layer to the map.
  3. Obtains the tile provider object and adds a listener function for pointerdown events to it.

The listener function:

  1. Retrieves the spatial object on which the map user clicked.
  2. Gets the meta data associated with the spatial object.
  3. Obtains the geographic coordinates of the object (converts screen coordinates to latitude and longitude).
  4. Displays an info bubble with the name of the object on the screen at the location on which the map user clicked.
/**
 * Assuming that "map", "ui" and "platform" are already initialized
 */
// Create default map layers with POIs present:
maptypes = platform.createDefaultLayers(256, 320, false, false, null, /*pois*/ true);

// Add metainfo layer to the map:
map.addLayer(maptypes.normal.metaInfo);

// Store a reference to the metaInfo TileProvider:
var tileProvider = defaultLayers.normal.metaInfo.getProvider();

// Add a listener for pointerdown events -- it displays an info bubble with the POI
// name when the map user clicks on the POI:
tileProvider.addEventListener('pointerdown', function(e) {
  // Get the spatial object on which the user clicked:
  var spatial = e.target,
    // Get the meta data for the object:
    metadata = spatial.getData(),
    // Translate the screen coordinates of the click to lat/lon:
    coord = map.screenToGeo(e.currentPointer.viewportX, e.currentPointer.viewportY);

  // Display an info bubble with the name of the object at the location of the click:
  if (metadata.category === 'POIs') {
    var bubble  =  new H.ui.InfoBubble(coord, {content : metadata.name});
    ui.addBubble(bubble);
  }
});

The image below shows the observable effects of this code on the map.

Figure 1. Map with POIs and additional data fetched by the MetaInfo layer.

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.