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

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

#map {
  height: 100%;
}

const cartoDBDarkMatter = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
    attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
  }),
  maxZoom: 19
});

const map = new ol.Map({
  target: 'map',
  layers: [cartoDBDarkMatter],
  view: new ol.View({
    center: [-167000, 6840000],
    zoom: 8,
  }),
});