var openHelp = document.getElementById("helpButton");
openHelp.onclick = function() {
    Swal.fire({
        title: 'Οδηγίες',
        html: `Παρατηρούμε τον χάρτη δικτύων μεταφορών. Υπάρχει δυνατότητα ενεργοποίησης εμφάνισης αυτοκινητόδρομων, γραμμών τρένων, αεροδρομίων και λιμανιών με την κατάλληλη επιλογή`,
        showConfirmButton: false,
        showCloseButton: true,
        heightAuto: false
    })
} 


// Initialize map with bounds
const map = L.map('map', {
    maxBounds: [[34.3, 19.3], [43, 30.5]],
    minZoom: 7,
    maxZoom: 9,
    }).setView([38.5, 24.5], 7);

L.tileLayer('assets/tiles/{z}/{x}/{y}.png.tile', {
    noWrap: true,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

// Function to toggle layers and change button color
function toggleLayer(layerKey) {
    const layer = mapLayers[layerKey];
    const button = document.getElementById(layerKey.replace('layer', 'button'));

    if (map.hasLayer(layer)) {
        map.removeLayer(layer);
        button.classList.remove('active'); // Reset button color
    } else {
        layer.addTo(map);
        button.classList.add('active'); // Set button as active
    }
}

// Placeholder for geojson layer
var geojsonLayer;


fetch('assets/geojson/greeceN10m.json')
    .then(response => response.json())
    .then(data => {
        // Call the function to load GeoJSON and draw the borders
        loadGeoJsonLayer(data, map);
    });

    // Function to load GeoJSON and style countries based on MAPCOLOR7
function loadGeoJsonLayer(geoJsonData, map) {
    // Define a function that sets the style dynamically based on MAPCOLOR7
    function style(feature) {
        return {
            fillColor: getColor(feature.properties.MAPCOLOR7), // Set color based on MAPCOLOR7
            weight: 2,    // Border thickness
            opacity: 0.5,   // Border opacity
            color: 'black', // Border color
            fillOpacity: 0.2 // Fill opacity
        };
    }

    // Function to determine color based on MAPCOLOR7 property
    function getColor(mapColor) {
        return '#eeeeee';
    }

    // Create a GeoJSON layer and add it to the map with the dynamic style
    var geoJsonLayer = L.geoJSON(geoJsonData, {
        style: style, 
    }).addTo(map);
}


//functions to add more geojson layers
let roads = [];
let rail = [];
let ship = [];
let air = [];

function addRoadsLayer() {
    if(roads.length === 0) {
        fetch('assets/geojson/roadNGreece.json')
            .then(response => response.json())
            .then(data => {
                roads = L.geoJSON(data, {
                    style: {
                        color: 'black',
                        weight: 2
                    }
                }).addTo(map);
            });
            document.getElementById("buttonRoad").classList.add("active");
    }
    else {
        map.removeLayer(roads);
        roads = [];
        document.getElementById("buttonRoad").classList.remove("active");
    }
}

function addRailLayer() {
    if(rail.length === 0) {
        fetch('assets/geojson/railNGreece.json')
            .then(response => response.json())
            .then(data => {
                rail = L.geoJSON(data, {
                    style: {
                        color: 'red',
                        weight: 3, dashArray: '10, 10', dashOffset: '10'
                    }
                }).addTo(map);
            });
            document.getElementById("buttonRail").classList.add("active");
    }
    else {
        map.removeLayer(rail);
        rail = [];
        document.getElementById("buttonRail").classList.remove("active");
    }
}

function addShipLayer() {
    if(ship.length === 0) {
        fetch('assets/geojson/portsGreeceN.json')
            .then(response => response.json())
            .then(data => {
                const icon = L.icon({
                    iconUrl: 'assets/images/anchor.png',
                    iconSize: [20, 20],
                    iconAnchor: [16, 16],
                    popupAnchor: [0, -50]
                });

                ship = L.geoJSON(data, {
                    style: {
                        color: 'red',
                        weight: 3, dashArray: '10, 10', dashOffset: '10'
                    },
                    pointToLayer: function(feature, latlng) {
                        return L.marker(latlng, {icon: icon});
                    }
                }).addTo(map);
            });
            document.getElementById("buttonShip").classList.add("active");
    }
    else {
        map.removeLayer(ship);
        ship = [];
        document.getElementById("buttonShip").classList.remove("active");
    }
}

function addAirLayer() {
    if(air.length === 0) {
        fetch('assets/geojson/airNgreece.json')
            .then(response => response.json())
            .then(data => {
                const icon = L.icon({
                    iconUrl: 'assets/images/plane.png',
                    iconSize: [20, 20],
                    iconAnchor: [10, 10],
                    popupAnchor: [0, -50]
                });

                air = L.geoJSON(data, {
                    style: {
                        color: 'red',
                        weight: 3, dashArray: '10, 10', dashOffset: '10'
                    },
                    pointToLayer: function(feature, latlng) {
                        return L.marker(latlng, {icon: icon});
                    }
                }).addTo(map);
            });
            document.getElementById("buttonAir").classList.add("active");
    }
    else {
        map.removeLayer(air);
        air = [];
        document.getElementById("buttonAir").classList.remove("active");
    }
}




