document.addEventListener('DOMContentLoaded', async () => {
    const BASE_URL = location.href;

    const map = L.map('map').setView([27.49, -9.3], 3);

    map.crs = L.CRS.EPSG4326;

    const world = await fetch(`${BASE_URL}js/world.geojson`)
        .then(res => res.json())
        .catch(error => console.log('AJAX request error: ', error));

    const fieldwork = await fetch(`${BASE_URL}js/fieldwork.geojson`)
        .then(res => res.json())
        .catch(error => console.log('AJAX request error: ', error));

    L.geoJson(world,{
        style: function () {
            return {
                color: '#fff',
                opacity: 0.4,
                weight: 2,
                fillColor: '#19365e',
                fillOpacity: 1
            };
        }
    }).addTo(map);

    L.geoJson(fieldwork,{
        style: function () {
            return {
                opacity: 0,
                fillColor: '#ce1417',
                fillOpacity: 1
            };
        }
    }).addTo(map);
    
    //TEST Egitto
    let egypt1 = L.marker([30.551944, 32.098611], {
            title: 'Tell el-Maskhuta',
            riseOnHover : true
        }).addTo(map);

    let greece = L.marker([39.2739,20.6869], {
            title: 'Pandosia',
            riseOnHover : true
    }).addTo(map);
});