interactive-basemap/demo.html

<!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>
  </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. See  <a href="https://github.com/heremaps/maps-api-for-javascript-examples">the README</a> for instructions on how to run the example.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>