MAP6.html.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>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("Document loaded");

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

            // Add MapTiler tiles
            L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=W6NNpOvcqv0aWEo3OAmU', {
                attribution: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 18,
            }).addTo(map);

            console.log("Map initialized");

            // 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 local storage
            var savedLocations = JSON.parse(localStorage.getItem('locations')) || [];
            savedLocations.forEach(function(data) {
                console.log("Retrieved location:", data);
                addMarker(data.location, data.date, data.lat, data.lng);
            });

            // 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 local storage
                            savedLocations.push({ location: location, date: date, lat: lat, lng: lon });
                            localStorage.setItem('locations', JSON.stringify(savedLocations));
                            console.log("Location saved:", location, date);
                        } 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>