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

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

#map {
  height: 100%;
}

require([
  'esri/Map',
  'esri/views/MapView',
  'esri/layers/WebTileLayer',
  'dojo/domReady!'
], (Map, MapView, WebTileLayer) => {
  const cartoDBDarkMatter = new WebTileLayer({
    urlTemplate: 'https://{subDomain}.basemaps.cartocdn.com/dark_all/{level}/{col}/{row}.png',
    subDomains: ['a', 'b', 'c', 'd'],
    copyright: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
  });

  const map = new Map({
    layers: [cartoDBDarkMatter]
  });

  const view = new MapView({
    container: 'map',
    map: map,
    zoom: 8,
    center: [-1.5, 52.2]
  });
});