variables index.js

index.js

window.onload = () => {
    const target = document.getElementById('map')

    // countriesSource is a variable holding the vector source with countries from countries.geojson
    const countriesSource = new VectorSource({
        url: 'https://raw.githubusercontent.com/bernardobelchior/openlayers-scratch-map-tutorial/start/countries.geojson',
        format: new GeoJSON(),
    })

    new Map({
        target,
        view: new View({
            center: [0, 0],
            zoom: 2,
        }),
        layers: [
            new TileLayer({
                source: new OSM(),
            }),
            new VectorLayer({
                // Old instantiation moved to countriesSource
                source: countriesSource,
                style: new Style({
                    fill: new Fill({
                        color: '#D4AF37',
                    })
                })
            })
        ]
    })
// ....
}