<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Water Facility Map with KMZ</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/leaflet.awesome-markers/dist/leaflet.awesome-markers.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.2/papaparse.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet.awesome-markers/dist/leaflet.awesome-markers.min.js"></script>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #map {
            height: 100vh;
            width: 100%;
        }

        .leaflet-container .leaflet-control-attribution {
            display: none;
        }

        .legend {
            background: white;
            padding: 25px;
            border-radius: 20px;
        }

        .legend ul {
            padding: 0;
        }

        .legend li {
            list-style: none;
            font-size: 12px;
            padding: 2px;

        }

        .legend li i {
            margin-right: 12px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        // Initialize the map
        const map = L.map('map').setView([7.75, 36.84], 10); // Center map on a general location

        // Add Satellite Tiles from MapTiler
        L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=WgUwYoZJZzY3RIyYOOMG', {
            maxZoom: 20
        }).addTo(map);


        // Function to create pop-up content dynamically
        function createPopupContent(site) {
            let popupContent = `<b>${site["Name of water system"] || "Unnamed Site"}</b><br>`;
            popupContent += `Woreda: ${site["Woreda"] || "N/A"}<br>`;
            popupContent += `Kebele: ${site["Kebele"] || "N/A"}<br>`;
            popupContent += `Village: ${site["Village Name"] || "N/A"}<br>`;
            popupContent += `Elevation: ${site["Elevation"] || "N/A"}<br>`;
            popupContent += `On Spot or Distribution: ${site["on spot or have distribution"] || "N/A"}<br>`;
            popupContent += `Total HH Beneficiaries: ${site["Total HH beneficiaries"] || "N/A"}<br>`;
            popupContent += `Type of Water System: ${site["Type of water system"] || "N/A"}<br>`;
            popupContent += `Water Source Fenced: ${site["water source fenced"] || "N/A"}<br>`;
            popupContent += `Guard at Source: ${site["guard at source"] || "N/A"}<br>`;
            popupContent += `Type of Lifting Device: ${site["Type of lifting device (on spot)"] || "N/A"}<br>`;
            popupContent += `Type of Hand Pump: ${site["Type of hand pump"] || "N/A"}<br>`;
            popupContent += `Type of Power Source: ${site["Type of power source"] || "N/A"}<br>`;
            popupContent += `Functionality Status: ${site["Functionality Status"] || "N/A"}<br>`;
            popupContent += `System Maintained/Rehabilitated: ${site["Has the system ever been maintained/Rehabilitated?"] || "N/A"}<br>`;
            popupContent += `Water Quality Test Conducted: ${site["water quality test conducted regularly"] || "N/A"}<br>`;
            popupContent += `Water Quality Complaints: ${site["Water quality complain from user community"] || "N/A"}<br>`;
            popupContent += `Management: ${site["Who manages the system?"] || "N/A"}<br>`;
            popupContent += `Year of WASHCO Establishment: ${site["Year of WASHCO established (EFY)"] || "N/A"}<br>`;
            popupContent += `Active WASHCO Members: ${site["Are all WASHCO members active?"] || "N/A"}<br>`;
            popupContent += `Date of Last Woreda Visit: ${site["Date of last woreda visit to the WASHCO (EFY)"] || "N/A"}<br>`;
            popupContent += `WASHCO Training Provided: ${site["Was there WASHCO training?"] || "N/A"}<br>`;
            popupContent += `Bank Account: ${site["Does the WASHCO have bank account?"] || "N/A"}<br>`;
            popupContent += `Water Fee Collection: ${site["Water fee collection"] || "N/A"}<br>`;
            popupContent += `Fee Collected Regularly: ${site["Fee collected regularly"] || "N/A"}<br>`;
            if (site["Photo"]) {
                popupContent += `<img src="${site["Photo"]}" alt="Photo of ${site["Name of water system"]}" style="width:100%;max-width:200px;"><br>`;
            }
            popupContent += `Latitude: ${site.Latitude || "N/A"}<br>`;
            popupContent += `Longitude: ${site.Longitude || "N/A"}`;
            return popupContent;
        }

        const markerIconSize = [25, 25];  // Define a consistent icon size

        const markerIcons = {
            "Drilled well (shallow well)": L.AwesomeMarkers.icon({
                icon: 'tint', // Water droplet with a sun
                markerColor: 'blue',
                prefix: 'fa',
                iconSize: markerIconSize, // Apply consistent size
                iconAnchor: [12, 12] // Center the icon
            }),
            "Hand dug well": L.AwesomeMarkers.icon({
                icon: 'hand-holding-water', // Hands representing the action of digging or providing
                markerColor: 'green',
                prefix: 'fa',
                iconSize: markerIconSize, // Apply consistent size
                iconAnchor: [12, 12]
            }),
            "Spring": L.AwesomeMarkers.icon({
                icon: 'leaf', // A leaf to represent spring or nature
                markerColor: 'orange',
                prefix: 'fa',
                iconSize: markerIconSize, // Apply consistent size
                iconAnchor: [12, 12]
            }),
            "Borehole": L.AwesomeMarkers.icon({
                icon: 'water', // Water icon representing deep well
                markerColor: 'red',
                prefix: 'fa',
                iconSize: markerIconSize, // Apply consistent size
                iconAnchor: [12, 12]
            })
        };



        // Create a legend
        const legend = L.control({ position: "bottomleft" });
        legend.onAdd = function () {
            const div = L.DomUtil.create("div", "legend");
            div.innerHTML = `
                <b>Legend:</b>
                <ul>
                    <li><i class="fa fa-tint" style="color: blue;"></i>Shallow Well</li>
                    <li><i class="fa fa-hand-holding-water" style="color: green;"></i>Hand Dug Well</li>
                    <li><i class="fa fa-leaf" style="color: orange;"></i>Spring</li>
                    <li><i class="fa fa-water" style="color: red;"></i>Deep Well</li>
                </ul>
            `;
            return div;
        };
        legend.addTo(map);

        // Load CSV data
        fetch('Mana_Water_Facility(Mana_Raw Data).csv')
            .then(response => response.text())
            .then(csvText => {
                const data = Papa.parse(csvText, { header: true }).data;
                data.forEach(site => {
                    if (site.Latitude && site.Longitude) {
                        const icon = markerIcons[site["Type of water system"]] || L.AwesomeMarkers.icon({ icon: 'question', markerColor: 'gray', prefix: 'fa' });
                        L.marker([parseFloat(site.Latitude), parseFloat(site.Longitude)], { icon }).addTo(map)
                            .bindPopup(createPopupContent(site));
                    }
                });
            });


        // Load KMZ file
        fetch('map.geojson')
            .then(response => response.json())
            .then(geojson => {
                L.geoJSON(geojson, {
                    style: function () {
                        return { color: "#3388ff", weight: 2, fillOpacity: 0 };
                    }
                }).addTo(map);
            })
            .catch(err => console.error("Error loading GeoJSON:", err));
    </script>
</body>

</html>