import TileLayer from "ol/layer/Tile";
import XYZSource from "ol/source/XYZ";

const mapboxToken = "pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\
h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw";

/**
 * Create the list of layers for displaying the background map.
 * @returns {Array.<Layer>} List of map layers.
 */
export const getLayers = () => {
    const backgroundSource = new XYZSource({
        url: `https://api.mapbox.com/${[
            "styles", "v1", "mapbox", "streets-v11",
            "tiles", "512", "{z}", "{x}", "{y}"
        ].join("/")}?access_token=${mapboxToken}`,
        tileSize: [512, 512]
    });

    return [new TileLayer({
        source: backgroundSource
    })];
};