map.html

<!DOCTYPE html>
<html>
<head>
    <title>Travel Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 600px; width: 100%; margin-bottom: 20px; }
        .form-container { margin: 20px; }
        .form-container input, .form-container button { margin: 5px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="form-container">
        <h1>Travel Map</h1>
        <form id="travel-form">
            <label for="location">Enter Location:</label>
            <input type="text" id="location" name="location" placeholder="City, Country" required>
            <label for="date">Date of Visit:</label>
            <input type="date" id="date" name="date" required>
            <button type="submit">Add to Map</button>
        </form>
    </div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-firestore.js"></script>
    <script>
        // Your Firebase configuration
        var firebaseConfig = {
            apiKey: "AIzaSyCkrF3AEsfCPjuICtV8zEVq_mI9Wut0HIE",
            authDomain: "carte-de-nos-voyages.firebaseapp.com",
            projectId: "carte-de-nos-voyages",
            storageBucket: "carte-de-nos-voyages.appspot.com",
            messagingSenderId: "143573866524",
            appId: "1:143573866524:web:abf283832ffc0b4cbfe7d9"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        var db = firebase.firestore();

        // Initialize the map
        var map = L.map('map').setView([20, 0], 2); // Center of the world with a zoom level of 2

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors',
            maxZoom: 18,
        }).addTo(map);

        // Function to add marker to the map
        function addMarker(location, date, lat, lng) {
            var marker = L.marker([lat, lng], {
                icon: L.icon({
                    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    shadowSize: [41, 41]
                })
            }).addTo(map);
            marker.bindPopup(`${location} - ${date}`).openPopup();
        }

        // Retrieve saved locations from Firestore
        db.collection("locations").get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                var data = doc.data();
                console.log("Retrieved location:", data);
                addMarker(data.location, data.date, data.lat, data.lng);
            });
        }).catch((error) => {
            console.error("Error retrieving locations:", error);
        });

        // Handle form submission
        document.getElementById('travel-form').addEventListener('submit', function(event) {
            event.preventDefault();
            var location = document.getElementById('location').value;
            var date = document.getElementById('date').value;

            // Use an API to get the coordinates of the location
            axios.get(`https://nominatim.openstreetmap.org/search?format=json&q=${location}`)
                .then(function(response) {
                    if (response.data.length > 0) {
                        var lat = response.data[0].lat;
                        var lon = response.data[0].lon;
                        console.log("Location found:", location, date, lat, lon);
                        addMarker(location, date, lat, lon);
                        map.setView([lat, lon], 8); // Zoom in to the added location

                        // Save the location to Firestore
                        db.collection("locations").add({
                            location: location,
                            date: date,
                            lat: lat,
                            lng: lon
                        }).then(() => {
                            console.log("Location saved:", location, date);
                        }).catch((error) => {
                            console.error("Error saving location:", error);
                        });
                    } else {
                        alert('Location not found.');
                    }
                })
                .catch(function(error) {
                    console.log("Error retrieving location data:", error);
                    alert('Error retrieving location data.');
                });

            document.getElementById('location').value = ''; // Clear the input
            document.getElementById('date').value = ''; // Clear the input
        });
    </script>
</body>
</html>