<div id="map"></div>

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

#map {
  height: 100%;
}

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));