• JavaScript
  • HTML
                  
                  

/**
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function setInteractive(map){
  // get the vector provider from the base layer
  var provider = map.getBaseLayer().getProvider();

  // get the style object for the base layer
  var style = provider.getStyle();

  var changeListener = (evt) => {
    if (style.getState() === H.map.Style.State.READY) {
      style.removeEventListener('change', changeListener);

      // enable interactions for the desired map features
      style.setInteractive(['places', 'places.populated-places'], true);

      // add an event listener that is responsible for catching the
      // 'tap' event on the feature and showing the infobubble
      provider.addEventListener('tap', onTap);
    }
  };
  style.addEventListener('change', changeListener);
}

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

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map, {
  center: {lat: 52.51477270923461, lng: 13.39846691425174},
  zoom: 13,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

var bubble;
/**
 * @param {H.mapevents.Event} e The event object
 */
function onTap(evt) {
  // calculate infobubble position from the cursor screen coordinates
  let position = map.screenToGeo(
    evt.currentPointer.viewportX,
    evt.currentPointer.viewportY
  );
  // read the properties associated with the map feature that triggered the event
  let props = evt.target.getData().properties;

  // create a content for the infobubble
  let content = '
It is a ' + props.kind + ' ' + (props.kind_detail || '') + (props.population ? '
population: ' + props.population : '') + '
local name is ' + props['name'] + (props['name:ar'] ? '
name in Arabic is '+ props['name:ar'] : '') + '
'; // Create a bubble, if not created yet if (!bubble) { bubble = new H.ui.InfoBubble(position, { content: content }); ui.addBubble(bubble); } else { // Reuse existing bubble object bubble.setPosition(position); bubble.setContent(content); bubble.open(); } } // Now use the map as required... setInteractive(map);
                  
                  
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Interactive base map</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  <script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script></head>
  <body id="markers-on-the-map">
    <div class="page-header">
        <h1>Interactive base map</h1>
        <p>Retrieve information associated with the map features</p>
    </div>
    <p>This example demonstrates how to enable the interactions with the base map features. The interactions are enabled for the countries'
      cities', towns' and neighbourhoods' labels. When these labels are clicked the info bubble with the information about the label is shown.
    </p>
    <div id="map"></div>
    <h3>Code</h3>
    <p>The code below adds a <codeph>change</codeph> event listener to the instance of the <code>H.map.Style</code> associated with the
      layer's provider. Within this listener data layers 'places' and 'places.populated-places' are set as interactive and the
      <code>tap</code> event listener is assigned to display the information in the info bubble. Please refer to the
      <a href="https://developer.here.com/documentation/maps/common/credentials.html">Developer Guide</a> for more information
      about the vector styles.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>