DOM Marker

Display a marker that is capable of receiving DOM events

HTML

<script src="https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js"></script>
<!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>DOM Marker</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>DOM Marker</h1>
        <p>Display a marker that is capable of receiving DOM events</p>
    </div>
    <p>This example displays a movable map of <b>Chicago</b> with a single marker 
      highlighting the location of Soldier Field <i>(41.8625°N, 87.6166°W)</i>, 
      home of the Chicago Bears. Marker displays the letter C in the correct club colors.</p>
    <p>The marker is capable of receiving DOM (Document Object Model) events such as <code>mouseenter</code>, 
      <code>mouseleave</code> etc. The marker will fade if the mouse pointer is placed over it.</p>
    <div id="map"></div>
    <h3>Code</h3>
    <p>DOM markers are created by using the <code>H.map.DomMarker</code> class by providing a <code>H.map.DomIcon</code>.</p>
    <script type="text/javascript"...

CSS

#map {
    width: 95%;
    height: 450px;
    background: grey;
}

#panel {
    width: 100%;
    height: 400px;
}

JavaScript

function drawCanvas() {
  var canvas = document.createElement('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
  return canvas;
}


/**
 * Create a marker that is capable of receiving DOM events and add it
 * to the map.
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function addDomMarker(map) {
  
  function setToShadow(outerElement){
		  var innerElement = document.createElement('div');

      outerElement.attachShadow({mode: 'open'});
      outerElement.shadowRoot.innerHTML = `
        <div></div>
      `;
      let outerShElem = outerElement.shadowRoot.querySelectorAll('div')[0];

      outerShElem.style.userSelect = 'none';
      outerShElem.style.webkitUserSelect = 'none';
      outerShElem.style.msUserSelect = 'none';
      outerShElem.style.mozUserSelect = 'none';
      outerShElem.style.cursor = 'default';

      innerElement.style.color = 'red';
      innerElement.style.backgroundColor = 'blue';
      innerElement.style.border = '2px solid black';
      innerElement.style.font = 'normal 12px arial';
      innerElement.style.lineHeight = '12px'

      innerElement.style.paddingTop = '2px';
      innerElement.style.paddingLeft = '4px';
      innerElement.style.width = '20px';
      innerElement.style.height = '20px';

      // add negative margin to inner element
      // to move the anchor to center of the div
      innerElement.style.marginTop = '-10px';
      innerElement.style.marginLeft = '-10px';

      outerShElem.appendChild(innerElement);
      outerShElem.appendChild(drawCanvas());

      // Add text to the DOM element
      innerElement.innerHTML = 'C';
      
      outerShElem.addEventListener('mouseover', changeOpacity);
      outerShElem.addEventListener('mouseout', changeOpacityToOne);

  }
  
  var outerElement = document.createElement('div');

 ...