Adding a Ground Overlay to the Map

Display an image over a specified geographical area.

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/ground-overlay/" />
<!-- 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>Adding a Ground Overlay to the Map</h1>
<p>This example adds a ground overlay, which displays an image showing the allied occupation sectors in <b>Berlin</b> after the Second World War, with the image stretched across a specified geographic area.</p>

<div id="map" style="width: 600px; height: 400px; background: grey"></div>
<hr/>
<h2>Credits</h2>
<blockquote>
<code>berlin-sector.png</code><br>
<small>
The file <code>berlin-sector.png</code> is based on <a href="https://en.wikipedia.org/wiki/Allied-occupied_Germany#/media/File:Occupied_Berlin.svg">https://en.wikipedia.org/wiki/Allied-occupied_Germany#/media/File:Occupied_Berlin.svg</a><br/>
It is Copyright Wikipedia user Stefan-XP (Stefan@XpofPc.de)<br/>
Licensed under CC BY-SA 3.0 (<a href="http://creativecommons.org/licenses/by-sa/3.0/">http://creativecommons.org/licenses/by-sa/3.0/</a>)
</small>
</blockquote>

CSS

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

/**
 * Displays an image showing the allied occupation sectors in Berlin
 * after the Second World War,
 *
 * @param {H.Map} map   A HERE Map instance within the application
 *
 */
function addGroundOverlay(map){

  // This is the location of the ground overlay - i.e. the city of Berlin.
  var berlinBounds = new H.geo.Rect(52.687, 13.06, 52.328, 13.78),
  // Create an image node in the DOM to be used
    image = document.createElement('img');

  image.style.position = "absolute";
  image.style.opacity = "0.8";
  image.src = './img/berlin-sector.png'; // This is the image itself

  // this function updates the image whenever something changes
   updateOverlay = function() {
    // project the rectangle's geo-coords to screen space
    var topLeft = map.geoToScreen(berlinBounds.getTopLeft()),
      bottomRight = map.geoToScreen(berlinBounds.getBottomRight()),
      offsetX = topLeft.x,
      offsetY = topLeft.y,
      width = bottomRight.x - topLeft.x,
      height = bottomRight.y - topLeft.y;

    // set image position and size
    image.style.top = offsetY + "px";
    image.style.left = offsetX + "px";
    image.style.width = width + "px";
    image.style.height = height + "px";
  };

  // append the DOM element to the map
  map.getViewPort().element.appendChild(image);

  // update whenever viewport or viewmodel changes
  map.getViewPort().addEventListener('sync', updateOverlay);
  map.getViewModel().addEventListener('sync', updateOverlay);

  // zoom to rectangle (just to get the overlay nicely into view)
  map.setViewBounds(berlinBounds);
}

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

//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true,
  useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map - this map is centered over Berlin
var map = new...