Adding Meta Information layer to the Map

Retrieve meta information of city labels, transit stations, etc.

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- BODY -->
<h1>Adding Meta Information layer to the Map</h1>
<p>This example shows how to retrieve meta information of the certain geographic objects like city labels, transit stations, country names, historical places, etc.<br><br>Hover over the map to see the interactive objects.<br></p>
<hr/>
<div id="map" style="width: 600px; height: 300px; background: grey;" ></div>
<hr/>
<div id="panel" style="width: 600px; "></div>

CSS

code, h1, h2, h3{
  color: #124191;
  letter-spacing: -0.03em;
}
body {
  font-family:"Lucida Grande",Tahoma,sans-serif;
  color: rgb(102, 102, 102);
  font-size: 80%;
}
b, strong {
  color: black;
}
code {
  font-weight: 700;
  font-size: 120%;
}

JavaScript

/**
 * Adds meta information layer to the map and makes supported geographic objects
 * (street names, city labels, parks, transit stations etc) "interactive".
 *
 * @param {H.Map} map Reference to initialized map object
 */
function addMetaInfoLayer(map) {
  // Subscribe to the metaInfo objects' pointermove event. The event bubbles up to
  // the TileProvider of the metaInfo layer.
  var tileProvider = defaultLayers.normal.metaInfo.getProvider();
  tileProvider.addEventListener('pointermove', updateMapCursor);

  // Change cursor back when not needed
  map.addEventListener('pointermove', updateMapCursor);

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


/**
 * Sets cursor to pointer, when hovering over meta objects
 * @this {H.Map}
 * @param {H.mapevents.Event} e
 */
function updateMapCursor(e) {
  // Change cursor appearance when hovering over geographic objects
  map.getElement().style.cursor = (e.target === map) ? '' : 'pointer';
  if (e.target !== map){
    showMetaInfo(e);
  }
}


/**
 * Handler for metaInfo tap event
 *
 * @param {H.mapevents.Event} e Fired event
 */
function showMetaInfo(e) {
  var currentPointer = e.currentPointer,
      metaInfoData = e.target.getData(),
      // Format object's data for display
      content =  '<strong style="font-size: large;">' + metaInfoData.name  + '</strong></br>';
      content  += '<br/><strong>metaInfo:</strong><br/>';
      content  += '<div style="margin-left:5%; margin-right:5%;"><pre><code style="font-size: x-small;">' +
        JSON.stringify(metaInfoData, null, ' ') + '</code></pre></div>';

  locationsContainer.innerHTML = content;
}

/**
 * Boilerplate map initialization code starts below:
 */


// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true,
  useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();

// Step 2:...