Map Objects Event Delegation

Use event delegation on map objects

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>Map Objects Event Delegation</h1>
<p>This example shows how to use a single function to listen to the <code>tap</code> event across multiple map objects held within the same object container.</p>
<hr/>
<div id="map" style="width: 600px; height: 400px; background: grey"></div>

CSS

.log {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 150px;
  width: 250px;
  overflow: scroll;
  background: white;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.log-entry {
  padding: 5px;
  border-bottom: 1px solid #d0d9e9;
}
.log-entry:nth-child(odd) {
    background-color: #e1e7f1;
}

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

/**
 * Shows how to use events delegation in your projects
 *
 * @param {H.Map} map A HERE Map instance within the application
 * @param {Function} customLog Custom function for logging events
 */
function testDelegation(map) {
  // We create several markers and other map objects

  // Brandenburger tor in Berlin, Germany
  var brandenburgerTorMarker = new H.map.Marker(new H.geo.Point(52.516237, 13.377686));

  // Fernsehturm in Berlin, Germany
  var fernsehturmMarker = new H.map.Marker(new H.geo.Point(52.520816, 13.409417));
  // Circle with Altes Museum in Berlin as its center
  var circle = new H.map.Circle(
    new H.geo.Point(52.5194, 13.3986), //center
    250, // Radius in meters
    {
      style: {
        fillColor: 'rgba(0, 221, 255, 0.66)',
      }
    }
  );

  // Polygon containing Alexanderplatz and Fernsehturm in Berlin
  var polygon = new H.map.Polygon(new H.geo.Strip([
      52.51998, 13.40529, 0,
      52.52395, 13.41250, 0,
      52.52197, 13.41590, 0,
      52.51860, 13.40718, 0
    ]), {
      style: {
        lineWidth: 1,
        strokeColor: 'rgba(204, 34, 34, 0.66)',
        fillColor: 'rgba(204, 34, 34, 0.66)',
      }
    });

  // Purple polyline
  var polyline = new H.map.Polyline(new H.geo.Strip([
      52.521490, 13.387983, 0,
      52.517156, 13.388820, 0,
      52.516960, 13.385730, 0,
      52.515510, 13.386009, 0,
      52.515132, 13.381481, 0,
      52.516333, 13.380806, 0
    ]), {
      style: {
        strokeColor: 'rgba(34, 34, 204, 0.66)',
        lineWidth: 7
      }
    });

  // Let's give names to our objects and save it as data
  brandenburgerTorMarker.setData('I am Brandenburger Tor!');
  fernsehturmMarker.setData('I am Fernsehturm');
  circle.setData('I am Circle!');
  polygon.setData('I am Polygon!');
  polyline.setData('I am Polyline!');

  // We add our newly created makers and objects to the object container
  var container = new H.map.Group({
    objects: [brandenburgerTorMarker, fernsehturmMarker, circle,...