- Products ProductsLocation Services
Solve complex location problems from geofencing to custom routing
PlatformCloud environments for location-centric solution development, data exchange and visualization
Tracking & PositioningFast and accurate tracking and positioning of people and devices, indoors or outdoors
APIs & SDKsEasy to use, scaleable and flexible tools to get going quickly
Developer EcosystemsAccess Location Services on your favorite developer platform ecosystem
- Documentation DocumentationOverview OverviewServices ServicesApplications ApplicationsDevelopment Enablers Development EnablersContent ContentHERE Studio HERE StudioHERE Workspace HERE WorkspaceHERE Marketplace HERE MarketplacePlatform Foundation and Policy Documents Platform Foundation and Policy Documents
- Pricing
- Resources ResourcesTutorials TutorialsExamples ExamplesBlog & Release Announcements Blog & Release AnnouncementsChangelog ChangelogDeveloper Newsletter Developer NewsletterKnowledge Base Knowledge BaseFeature List Feature ListSupport Plans Support PlansSystem Status System StatusLocation Services Coverage Information Location Services Coverage InformationSample Map Data for Students Sample Map Data for Students
- Help
- Maps
- Data display
- Styles and Layers
- Markers
- Geoshapes
- Resizable Geoshapes
- Clustering
- Events
- Info Bubbles
- Services - Routing, Geocoding
- Map with Driving Route from A to B
- Map with Pedestrian Route from A to B
- Truck routing road restrictions
- Map with Route from A to B using Public Transport
- Map with isoline route
- Search for a Location based on an Address
- Search for a Location given a Structured Address
- Search for the Address of a Known Location
- Search for a Landmark
- Integration of Fleet Telematics Services
- Integration with the HERE Style Editor
- Indoor Map
- JavaScript
- HTML
<!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">
<meta name="description" content="Display custom map tiles as an overlay">
<title>Adding an Overlay to the Map</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<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>
<link rel="stylesheet" type="text/css" href="../template.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
<body>
<div class="page-header">
<h1>Adding an Overlay to the Map</h1>
<p>Display custom map tiles as an overlay</p>
</div>
<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>
<div id="map"></div>
<hr/>
<h2>Credits</h2>
<p>
<span>Wikimedia Commons Images</span><br/>
The tile source is based on <a href="https://commons.wikimedia.org/wiki/File%3AMap_de_berlin_1789_%28georeferenced%29.jpg" target="_blank">an image of Berlin in 1789</a> from Wikimedia.<br/>
Images provided by Wikimedia Commons are under the copyright of their owners.<br/>
However, almost all <a href="https://commons.wikimedia.org/wiki/Commons:Reusing_content_outside_Wikimedia" target="_blank">content hosted on Wikimedia Commons</a> may be freely reused subject to certain restrictions.<br/>
</p>
<h3>Code</h3>
<p>
The example uses the <a target="_blank" rel="nofollow" href="http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-provider-imagetileprovider.html"><code>H.map.provider.ImageTileProvider</code></a> class for fetching our custom tiles. The <code>getUrl()</code> method constructs the URL of the tile for the specified column/row/zoom position. The result is displayed on the map as an additional layer using an instance of the <a target="_blank" rel="nofollow" href="http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-layer-layer.html"><code>H.map.layer.TileLayer</code></a> class which has been created by passing in the image tile provider object.
</p>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>
