Map Objects Events

Handle events on various map objects

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- BASE - this example uses relative URLs -->
<base href="https://raw.githubusercontent.com/heremaps/jsfiddle-github/master/map-object-events-displayed/" />

<!-- 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 Events</h1>
<p>This example shows how to attach listeners to pointer events such as <code>pointerup</code>, <code>pointerdown</code> and <code>tap</code> to various map objects.</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 subscribe to different event type on different map objects
 *
 * @param {H.Map} map A HERE Map instance within the application
 * @param {Function} logEvent Custom function for logging events
 */
function testObjectsEvents(map, logEvent) {
  // Let's create the same style for all objects
  var style = {
    fillColor: 'rgba(35, 51, 129, 0.3)',
    lineWidth: 5,
    strokeColor: 'rgba(114, 38, 51, 1)'
  };

  // Create a rectangle map object
  var rect = new H.map.Rect(new H.geo.Rect(
    51.5072, 0, 48.8567, 2.3508
  ), {style: style});

  // Create a circle map object
  var circle = new H.map.Circle(
    new H.geo.Point(52.3667, 4.9000), //center
    198000, // Radius in meters
    {style: style}
  );

  // Create a polyline map object
  var polyline = new H.map.Polyline(new H.geo.Strip([
    52.5167, 13.3833, 0,
    50.0833, 14.4167, 0,
    52.2333, 21.0167, 0
  ]), {style: style});

  // Create a polygon map object
  var polygon = new H.map.Polygon(new H.geo.Strip([
    45.4667, 9.1833, 0,
    48.1333, 11.566, 0,
    50.0800, 8.2400, 0,
  ]), {style: style});

  // Create a standard marker
  var standardMarker = new H.map.Marker(new H.geo.Point(48.2000, 16.3667));

  // Create image marker object
  var imageMarker = new H.map.Marker(new H.geo.Point(53.5653, 10.0014), {
    icon: new H.map.Icon('img/marker-house.png')
  });

  // Let's give names to our objects and save it as data
  rect.setData('Rect');
  circle.setData('Circle');
  polyline.setData('Polyline');
  polygon.setData('Polygon');
  standardMarker.setData('Standard Marker');
  imageMarker.setData('Image Marker');

  // Now lets add out objects to the container for the conviniece of use
  var container = new H.map.Group({
    objects: [rect, circle, polyline, polygon, standardMarker, imageMarker]
  });

  // Subscribe to different events on every object
  rect.addEventListener('pointerenter', logEvent);
  rect.addEventListener('pointerdown', logEvent);
 ...