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

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

#map {
  height: 100%;
}

mapboxgl.accessToken = 'pk.eyJ1IjoiZ2VvaG93dG9zIiwiYSI6ImNrdmxoZWk1eDJxNnoycHE1bXc0dzZlOXUifQ.IIucx3luddlx8ZIqJCfyNA';

const cartoDBDarkMatter = {
  type: 'raster',
  tiles: [
    'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
    'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
    'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
    'https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
  ],
  tileSize: 256,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
  minzoom: 0,
  maxzoom: 19
};

const map = new mapboxgl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      'xyz-tiles-source': cartoDBDarkMatter
    },
    layers: [
      {
        id: 'xyz-tiles',
        type: 'raster',
        source: 'xyz-tiles-source'
      }
    ]
  },
  center: [-1.5, 52.2],
  zoom: 7
});