Spaces:
Running
Running
try again to look up tidecharts for the next week and display them below the map - Follow Up Deployment
37edede verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Location Finder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <style> | |
| #map { | |
| height: 400px; | |
| transition: all 0.3s ease; | |
| } | |
| #beachTideInfo { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .location-card { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">📍 Location Finder</h1> | |
| <p class="text-gray-600">Enter any address or place to see it on the map</p> | |
| </div> | |
| <div class="location-card bg-white rounded-xl p-6"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="flex-grow"> | |
| <label for="locationInput" class="block text-sm font-medium text-gray-700 mb-1">Search Location</label> | |
| <div class="relative"> | |
| <input | |
| type="text" | |
| id="locationInput" | |
| placeholder="e.g. Eiffel Tower, Paris" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" | |
| > | |
| <button | |
| id="searchButton" | |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-500 hover:bg-green-600 text-white p-2 rounded-lg transition duration-200 pulse" | |
| > | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="location-card bg-white rounded-xl overflow-hidden"> | |
| <div id="map" class="w-full"></div> | |
| <div id="locationInfo" class="p-4 border-t border-gray-200 hidden"> | |
| <h3 class="font-semibold text-lg text-gray-800 mb-1">Location Details</h3> | |
| <p id="address" class="text-gray-600"></p> | |
| <p id="coordinates" class="text-sm text-gray-500 mt-1"></p> | |
| </div> | |
| </div> | |
| <div id="tideInfo" class="location-card bg-white rounded-xl p-6 mt-6 hidden"> | |
| <h3 class="font-semibold text-lg text-gray-800 mb-4">Tide Information</h3> | |
| <div id="tideChart" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"></div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| <p>Click the search button or press Enter to find your location</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize map with a default view | |
| const map = L.map('map').setView([51.505, -0.09], 13); | |
| // Add tile layer (OpenStreetMap) | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // Create a marker but don't add it to the map yet | |
| let marker = null; | |
| // Function to update the map with the searched location | |
| function updateMap(location) { | |
| // Use Nominatim API for geocoding | |
| fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.length > 0) { | |
| const lat = parseFloat(data[0].lat); | |
| const lon = parseFloat(data[0].lon); | |
| const displayName = data[0].display_name; | |
| // Update map view | |
| map.setView([lat, lon], 15); | |
| // Remove previous marker if exists | |
| if (marker) { | |
| map.removeLayer(marker); | |
| } | |
| // Add new marker with custom icon | |
| const customIcon = L.icon({ | |
| iconUrl: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png', | |
| iconSize: [32, 32], | |
| iconAnchor: [16, 32], | |
| popupAnchor: [0, -32] | |
| }); | |
| marker = L.marker([lat, lon], {icon: customIcon}).addTo(map) | |
| .bindPopup(displayName) | |
| .openPopup(); | |
| // Show location info | |
| document.getElementById('locationInfo').classList.remove('hidden'); | |
| document.getElementById('address').textContent = displayName; | |
| document.getElementById('coordinates').textContent = `Latitude: ${lat.toFixed(6)}, Longitude: ${lon.toFixed(6)}`; | |
| // Check if location is near coast and get tide data | |
| getTideData(lat, lon); | |
| } else { | |
| alert('Location not found. Please try a different search term.'); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('There was an error processing your request. Please try again.'); | |
| }); | |
| } | |
| // Search button click event | |
| document.getElementById('searchButton').addEventListener('click', function() { | |
| const location = document.getElementById('locationInput').value.trim(); | |
| if (location) { | |
| updateMap(location); | |
| } else { | |
| alert('Please enter a location to search.'); | |
| } | |
| }); | |
| // Enter key press event | |
| document.getElementById('locationInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const location = document.getElementById('locationInput').value.trim(); | |
| if (location) { | |
| updateMap(location); | |
| } else { | |
| alert('Please enter a location to search.'); | |
| } | |
| } | |
| }); | |
| // Function to get tide data from NOAA API | |
| function getTideData(lat, lon) { | |
| // First get the nearest tide station | |
| fetch(`https://api.tidesandcurrents.noaa.gov/mdapi/prod/webapi/stations.json?type=tidepredictions&units=metric`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| // Find nearest station | |
| let nearestStation = null; | |
| let minDistance = Infinity; | |
| data.stations.forEach(station => { | |
| if (station.lat && station.lng) { | |
| const distance = getDistance(lat, lon, parseFloat(station.lat), parseFloat(station.lng)); | |
| if (distance < minDistance && distance < 100) { // Within 100km | |
| minDistance = distance; | |
| nearestStation = station; | |
| } | |
| } | |
| }); | |
| if (nearestStation) { | |
| // Get tide predictions for next 7 days | |
| const today = new Date(); | |
| const endDate = new Date(); | |
| endDate.setDate(today.getDate() + 7); | |
| const dateFormat = (d) => d.toISOString().split('T')[0]; | |
| const stationId = nearestStation.id; | |
| fetch(`https://api.tidesandcurrents.noaa.gov/api/prod/datagetter?product=predictions&application=NOS.COOPS.TAC.WL&begin_date=${dateFormat(today)}&end_date=${dateFormat(endDate)}&datum=MLLW&station=${stationId}&time_zone=lst_ldt&units=english&interval=hilo&format=json`) | |
| .then(response => response.json()) | |
| .then(tideData => { | |
| displayTideData(tideData, nearestStation.name); | |
| }) | |
| .catch(error => { | |
| console.error('Tide data error:', error); | |
| }); | |
| } else { | |
| document.getElementById('tideInfo').classList.add('hidden'); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Station data error:', error); | |
| }); | |
| } | |
| // Helper function to calculate distance between coordinates | |
| function getDistance(lat1, lon1, lat2, lon2) { | |
| const R = 6371; // Earth radius in km | |
| const dLat = (lat2 - lat1) * Math.PI / 180; | |
| const dLon = (lon2 - lon1) * Math.PI / 180; | |
| const a = | |
| Math.sin(dLat/2) * Math.sin(dLat/2) + | |
| Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * | |
| Math.sin(dLon/2) * Math.sin(dLon/2); | |
| const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); | |
| return R * c; | |
| } | |
| // Function to display tide data | |
| function displayTideData(tideData, stationName) { | |
| const tideContainer = document.getElementById('tideChart'); | |
| tideContainer.innerHTML = ''; | |
| if (tideData.predictions && tideData.predictions.length > 0) { | |
| document.getElementById('tideInfo').classList.remove('hidden'); | |
| // Group predictions by date | |
| const predictionsByDate = {}; | |
| tideData.predictions.forEach(prediction => { | |
| const date = prediction.t.split(' ')[0]; | |
| if (!predictionsByDate[date]) { | |
| predictionsByDate[date] = []; | |
| } | |
| predictionsByDate[date].push(prediction); | |
| }); | |
| // Create cards for each date | |
| for (const date in predictionsByDate) { | |
| const predictions = predictionsByDate[date]; | |
| const dateObj = new Date(date); | |
| const dayName = dateObj.toLocaleDateString('en-US', { weekday: 'long' }); | |
| const formattedDate = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); | |
| const card = document.createElement('div'); | |
| card.className = 'bg-gray-50 p-4 rounded-lg'; | |
| card.innerHTML = ` | |
| <h4 class="font-medium text-gray-700 mb-2">${dayName}<br><span class="text-sm text-gray-500">${formattedDate}</span></h4> | |
| <div class="space-y-2"> | |
| ${predictions.map(p => ` | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm ${p.type === 'H' ? 'text-blue-600' : 'text-amber-600'} font-medium"> | |
| ${p.type === 'H' ? 'High' : 'Low'} Tide | |
| </span> | |
| <span class="text-sm text-gray-700">${p.t.split(' ')[1]}</span> | |
| <span class="text-sm font-medium">${p.v} ft</span> | |
| </div> | |
| `).join('')} | |
| </div> | |
| `; | |
| tideContainer.appendChild(card); | |
| } | |
| } else { | |
| document.getElementById('tideInfo').classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mirthbottle/activities-planner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |