How to Add XYZ Tile Layers to a HERE Maps API for JavaScript Map

This article teaches you how to create a simple HERE Maps API for JavaScript application with XYZ tile layers. You can use any of the layers on our categorized layer list to add to the application.

Here is a CodePen of the resulting application:

First, let's create an index.html file:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>HERE Maps API for JavaScript - XYZ Tiles Demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="main.js"></script>
  </body>
</html>

What's happening here:

We include HERE Maps JS API CSS file on line 7.
We include a CSS file on line 8 that we will create later.
We include the necessary HERE Maps JS API JavaScript files on lines 9-11.
We create a container for the map on line 14, defining 'map' as the id (you can use any id you want).
We include a JavaScript file on line 15 that we will create later.

Now, let's create a style.css file to style the map:

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

These rules will make our map appear full screen.

Finally, we'll create a main.js file that will handle creating a tile provider and a map object, adding a layer to the map and making the map interactive:

main.js

const cartoDBDarkMatter = new H.map.provider.ImageTileProvider({
  max: 20,
  getURL: (x, y, z) => {
    const subdomains = ['a', 'b', 'c', 'd'];
    const subdomain = subdomains[~~(Math.random() * subdomains.length)];
    return `https://${subdomain}.basemaps.cartocdn.com/dark_all/${z}/${x}/${y}.png`;
  },
  getCopyrights: () => [{
    label: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
  }]
});

const map = new H.Map(
  document.getElementById('map'),
  new H.map.layer.TileLayer(cartoDBDarkMatter),
  {
    zoom: 8,
    center: { lng: -1.5, lat: 52.2 }
  }
);

window.addEventListener('resize', () => map.getViewPort().resize());
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

Let's break it down:

We define the tile provider on lines 1-11 (the highlighted part) and save it to a variable.
We initialize the map on lines 13-20:
- First we obtain a reference to the map's container that we added to the HTML file via the document.getElementById() method.
- Then we define the map's base layer (basemap) by creating a layer using our tile provider.
- Finally, we set the map's view to our chosen geographical coordinates and zoom level (here we use coordinates for some place in England).
On line 22, we add a resize listener to make sure that the map occupies the whole container.
Lastly, with the command on line 23, we make the map interactive.

You can pick any of the layers from our categorized layer list to add to your application. Just copy the code to create the tile provider in the preview application, paste it into your JavaScript file in place of the highlighted part and use it to create your map's base layer (basemap) or an additional overlay. Overlay layers can be added to the map with the map.addLayer(layer) command.

Tags