Adding an Overlay to the Map

Display custom map tiles as an overlay

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/custom-tile-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 an Overlay to the Map</h1>
<p>This example displays a movable map initially centered on the historical centre of <b>Berlin</b> (<i>52.515, °N, 13.405°E</i>) with an overlay of a historical map from 1789 on top of the base map. A public domain image was used as a source, and split it into individual map tiles. Additional tiles are only downloaded when the zoom level or location changes.</p>
<hr/>
<div id="map" style="width: 600px; height: 400px; background: grey"></div>
<hr/>
<h2>Credits</h2>
<blockquote>
<code>Wikimedia Commons Images</code><br/>
<small>
The tile source is based on <a href="https://commons.wikimedia.org/wiki/File%3AMap_de_berlin_1789_%28georeferenced%29.jpg">https://commons.wikimedia.org/wiki/File%3AMap_de_berlin_1789_%28georeferenced%29.jpg</a><br/>

Images provided by Wikimedia Commons are under the copyright of their owners.<br/>
However, almost all content hosted on Wikimedia Commons may be freely reused subject to certain restrictions.<br/>
(<a href="https://commons.wikimedia.org/wiki/Commons:Reusing_content_outside_Wikimedia">https://commons.wikimedia.org/wiki/Commons:Reusing_content_outside_Wikimedia</a>)<br/>
</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

/**
 * This example overlays a historical map of Berlin
 * from 1789 on top of the base map.
 *
 * @param {H.Map} map A HERE Map instance within the application
 */
function overlayHistoricalBerlin(map) {
  // Create a tile provider from our images of historical Berlin
  var tileProvider = new H.map.provider.ImageTileProvider({
    // We have tiles only for zoom levels 12–15,
    // so on all other zoom levels only base map will be visible
    min: 12,
    max: 15,
    getURL: function (column, row, zoom) {
      // If Berlin is not displayed, return a blank tile.
      if (((zoom == 12) && (row != 1343 || column != 2200)) ||
        ((zoom == 13) &&  (row < 2686 || column < 4400 || row > 2687 || column > 4401)) ||
        ((zoom == 14) && (row < 5372 || column < 8800 || row > 5375 || column > 8803)) ||
        ((zoom  == 15) && (row < 10744 || column < 17601 || row > 10750 || column > 17607))) {
        return 'tiles/blank.png';
      } else {
        // The Old Berlin Map Tiler follows the TMS URL specification.
        // By specification, tiles should be accessible in the following format:
        // http://server_address/zoom_level/x/y.png
        return 'tiles/'+ zoom+ '/'+ row + '/'+ column+ '.png';
      }
    }
  });
  // Unless you own the map tile source,
  // you need to comply with the licensing agreement of the map tile provider.
  // Often this means giving attribution or copyright acknowledgment to the owner,
  // even if the tiles are offered free of charge.
  tileProvider.getCopyrights = function (bounds, level) {
    // We should return an array of objects that implement H.map.ICopyright interface
    return [{
      label: "Overlay derived from <a href='http://commons.wikimedia.org/wiki/File%3AMap_de_berlin_1789_%28georeferenced%29.jpg' target='_blank'>WikiMedia Commons</a>",
      alt: 'Overlay Based on a WikiMedia Commons Image in the Public Domain'
    }];
  };
  // Now let's create a layer that will consume tiles from our provider
  var...