index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Study Areas Map 2</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

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

        .custom-pin .pin {
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        const map = L.map('map').setView([48.78039307145523, 9.172929033104959], 13);

        // Add OSM base map
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);

        // Function to load pins from CSV and add them to the map
        function loadPins() {
            Papa.parse('.public/data/pins.csv', {
                download: true,
                header: true,
                complete: function(results) {
                    results.data.forEach(pin => {
                        if (pin.lat && pin.lng && pin.name && pin.color) {
                            const marker = L.marker([parseFloat(pin.lat), parseFloat(pin.lng)], {
                                icon: L.divIcon({
                                    className: 'custom-pin',
                                    html: `<div style="background-color: ${pin.color};" class="pin" title="${pin.name}"></div>`
                                })
                            }).addTo(map);

                            marker.bindPopup(`<b>${pin.name}</b>`);
                        }
                    });
                }
            });
        }

        // Call the function to load pins from the CSV
        loadPins();
    </script>
</body>
</html>