try again to look up tidecharts for the next week and display them below the map - Follow Up Deployment

index.html

@@ -46,30 +46,6 @@
                 <p class="text-gray-600">Enter any address or place to see it on the map</p>
             </div>
 
-            <div id="beachTideInfo" class="bg-blue-50 rounded-xl p-6 mb-8 hidden">
-                <div class="flex flex-col md:flex-row gap-6">
-                    <div class="flex-1">
-                        <h2 class="text-2xl font-bold text-blue-800 mb-2" id="beachName">Nearby Beach</h2>
-                        <p class="text-blue-600" id="beachDistance">Distance: Calculating...</p>
-                    </div>
-                    <div class="flex-1">
-                        <h3 class="text-lg font-semibold text-blue-700 mb-2">Tide Information</h3>
-                        <div class="grid grid-cols-2 gap-4">
-                            <div class="bg-white p-3 rounded-lg shadow">
-                                <p class="text-sm text-blue-500">Next High Tide</p>
-                                <p id="highTideTime" class="font-medium text-blue-800">-</p>
-                                <p id="highTideHeight" class="text-sm text-blue-600">-</p>
-                            </div>
-                            <div class="bg-white p-3 rounded-lg shadow">
-                                <p class="text-sm text-blue-500">Next Low Tide</p>
-                                <p id="lowTideTime" class="font-medium text-blue-800">-</p>
-                                <p id="lowTideHeight" class="text-sm text-blue-600">-</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </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">
@@ -100,24 +76,14 @@
                     <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 id="tideInfo" class="mt-4 hidden">
-                        <h3 class="font-semibold text-lg text-gray-800 mb-1">Tide Information</h3>
-                        <div class="grid grid-cols-2 gap-4 mt-2">
-                            <div class="bg-blue-50 p-3 rounded-lg">
-                                <p class="text-sm text-blue-500">Next High Tide</p>
-                                <p id="highTideTime" class="font-medium"></p>
-                                <p id="highTideHeight" class="text-sm text-gray-500"></p>
-                            </div>
-                            <div class="bg-blue-50 p-3 rounded-lg">
-                                <p class="text-sm text-blue-500">Next Low Tide</p>
-                                <p id="lowTideTime" class="font-medium"></p>
-                                <p id="lowTideHeight" class="text-sm text-gray-500"></p>
-                            </div>
-                        </div>
-                    </div>
                 </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>
@@ -172,9 +138,10 @@
                             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);
                             
-                            // Check if near coast and fetch tide data
-                            fetchTideData(lat, lon);
                         } else {
                             alert('Location not found. Please try a different search term.');
                         }
@@ -206,47 +173,110 @@
                     }
                 }
             });
-            // Function to fetch tide data
-            async function fetchTideData(lat, lon) {
-                try {
-                    // First check if location is near coast
-                    const coastlineResponse = await fetch(`https://api.onwater.io/api/v1/results/${lat},${lon}?access_key=demo`);
-                    const coastlineData = await coastlineResponse.json();
-                    
-                    if (coastlineData.water) {
-                        // Get tide data (using WorldTides API - note: you'll need to get your own API key)
-                        const now = Math.floor(Date.now() / 1000);
-                        const tideResponse = await fetch(`https://www.worldtides.info/api/v2?heights&lat=${lat}&lon=${lon}&start=${now}&length=86400&key=YOUR_API_KEY`);
-                        const tideData = await tideResponse.json();
+            // 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;
                         
-                        if (tideData.heights && tideData.heights.length > 0) {
-                            // Find next high and low tides
-                            const nextHigh = tideData.heights.find(h => h.type === 'high');
-                            const nextLow = tideData.heights.find(h => h.type === 'low');
-                            
-                            if (nextHigh && nextLow) {
-                                const formatTime = (timestamp) => {
-                                    return new Date(timestamp * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
-                                };
-                                
-                                document.getElementById('beachTideInfo').classList.remove('hidden');
-                                document.getElementById('highTideTime').textContent = formatTime(nextHigh.dt);
-                                document.getElementById('highTideHeight').textContent = `${nextHigh.height.toFixed(2)}m`;
-                                document.getElementById('lowTideTime').textContent = formatTime(nextLow.dt);
-                                document.getElementById('lowTideHeight').textContent = `${nextLow.height.toFixed(2)}m`;
-                                
-                                // Try to get nearest beach name (simplified example)
-                                const beachResponse = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}&zoom=10`);
-                                const beachData = await beachResponse.json();
-                                if (beachData.address && beachData.address.tourism === 'beach') {
-                                    document.getElementById('beachName').textContent = beachData.display_name || 'Nearby Beach';
+                        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);
                     }
-                } catch (error) {
-                    console.error('Error fetching tide data:', error);
-                    // Silently fail - tide info is optional
+                } else {
+                    document.getElementById('tideInfo').classList.add('hidden');
                 }
             }
         });