real data fetch

Author: suvanbanerjee

.env.local.example

@@ -0,0 +1,11 @@
+# Mapbox Configuration
+NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here
+
+# Auth0 Configuration
+AUTH0_CLIENT_ID=your_auth0_client_id
+AUTH0_CLIENT_SECRET=your_auth0_client_secret
+AUTH0_ISSUER_BASE_URL=your_auth0_domain
+AUTH0_SECRET=your_random_secret_key
+
+# CloudCasting API Configuration
+NEXT_PUBLIC_CLOUDCASTING_API_URL=http://0.0.0.0:8000/api/cloudcasting/layers

README.md

@@ -57,7 +57,17 @@ AUTH0_BASE_URL=http://localhost:3000
 AUTH0_SCOPE=openid profile email
 
 # Mapbox Configuration
+```
+
 NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token
+AUTH0_CLIENT_ID=your_auth0_client_id
+AUTH0_CLIENT_SECRET=your_auth0_client_secret
+AUTH0_ISSUER_BASE_URL=your_auth0_domain
+AUTH0_SECRET=your_random_secret
+NEXT_PUBLIC_CLOUDCASTING_API_URL=http://localhost:8000/api/cloudcasting/layers
+
+```
+
 ```
 
 ### Installation
@@ -89,6 +99,9 @@ Authentication is handled via Auth0 integration with NextAuth.js. Protected rout
 ## Features
 
 - **Interactive Map**: Visualizes cloud movements using Mapbox GL
+- **Real-time Cloud Layers**: Fetch and display satellite imagery in multiple spectral bands (IR, VIS, WV)
+- **Time-series Forecasting**: View predicted cloud positions at 15-minute intervals up to 3 hours ahead
+- **Variable Selection**: Choose from 10 different satellite bands for cloud analysis
 - **Authentication**: Secure login via Auth0
 - **Responsive Design**: Works across different device sizes
 - **Dark Mode**: Optimized for viewing satellite imagery

app/api/cloud-layers/[variable]/[step]/route.ts

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL =
+  process.env.CLOUDCASTING_API_URL || 'http://localhost:8000/api/cloudcasting/layers';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { variable: string; step: string } }
+) {
+  try {
+    const { variable, step } = params;
+
+    // Validate parameters
+    if (!variable || !step) {
+      return NextResponse.json({ error: 'Missing variable or step parameter' }, { status: 400 });
+    }
+
+    // Validate step is a number
+    const stepNum = parseInt(step.replace('.tif', ''));
+    if (isNaN(stepNum) || stepNum < 0 || stepNum > 11) {
+      return NextResponse.json(
+        { error: 'Invalid step parameter. Must be between 0 and 11' },
+        { status: 400 }
+      );
+    }
+
+    // Fetch from the CloudCasting API
+    const apiUrl = `${API_BASE_URL}/${variable}/${stepNum}.tif`;
+    const response = await fetch(apiUrl, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/octet-stream',
+      },
+    });
+
+    if (!response.ok) {
+      console.error(`API request failed: ${response.status} ${response.statusText}`);
+      return NextResponse.json(
+        { error: `Failed to fetch from CloudCasting API: ${response.statusText}` },
+        { status: response.status }
+      );
+    }
+
+    // Get the blob data
+    const blob = await response.blob();
+    const arrayBuffer = await blob.arrayBuffer();
+
+    // Return the TIF file with proper headers
+    return new NextResponse(arrayBuffer, {
+      status: 200,
+      headers: {
+        'Content-Type': 'image/tiff',
+        'Content-Length': arrayBuffer.byteLength.toString(),
+        'Cache-Control': 'public, max-age=300', // Cache for 5 minutes
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET',
+        'Access-Control-Allow-Headers': 'Content-Type',
+      },
+    });
+  } catch (error) {
+    console.error('Error in cloud layer proxy:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+// Handle preflight requests
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}

app/api/cloudcasting/layers/[variable]/[step]/route.ts

@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL =
+  process.env.CLOUDCASTING_API_URL || 'http://localhost:8000/api/cloudcasting/layers';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { variable: string; step: string } }
+) {
+  try {
+    const { variable, step } = params;
+
+    // Validate parameters
+    if (!variable || !step) {
+      return NextResponse.json({ error: 'Missing variable or step parameter' }, { status: 400 });
+    }
+
+    // Validate step is a number
+    const stepNum = parseInt(step.replace('.tif', ''));
+    if (isNaN(stepNum) || stepNum < 0 || stepNum > 11) {
+      return NextResponse.json(
+        { error: 'Invalid step parameter. Must be between 0 and 11' },
+        { status: 400 }
+      );
+    }
+
+    // Fetch from the CloudCasting API
+    const apiUrl = `${API_BASE_URL}/${variable}/${stepNum}.tif`;
+    console.log(`Proxying request to: ${apiUrl}`);
+
+    const response = await fetch(apiUrl, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/octet-stream',
+        'User-Agent': 'CloudCasting-UI-Proxy/1.0',
+      },
+    });
+
+    if (!response.ok) {
+      console.error(`API request failed: ${response.status} ${response.statusText}`);
+      return NextResponse.json(
+        { error: `Failed to fetch from CloudCasting API: ${response.statusText}` },
+        { status: response.status }
+      );
+    }
+
+    // Get the blob data
+    const blob = await response.blob();
+    const arrayBuffer = await blob.arrayBuffer();
+
+    // Return the TIF file with proper headers
+    return new NextResponse(arrayBuffer, {
+      status: 200,
+      headers: {
+        'Content-Type': 'image/tiff',
+        'Content-Length': arrayBuffer.byteLength.toString(),
+        'Cache-Control': 'public, max-age=300', // Cache for 5 minutes
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET',
+        'Access-Control-Allow-Headers': 'Content-Type',
+      },
+    });
+  } catch (error) {
+    console.error('Error in cloud layer proxy:', error);
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    return NextResponse.json(
+      { error: 'Internal server error', details: errorMessage },
+      { status: 500 }
+    );
+  }
+}
+
+// Handle preflight requests
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}

app/globals.css

@@ -24,3 +24,29 @@ body {
   color: var(--foreground);
   font-family: Inter, sans-serif;
 }
+
+/* Custom slider styles */
+.slider {
+  background: linear-gradient(to right, #3b82f6 0%, #1e40af 100%);
+}
+
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #ffffff;
+  cursor: pointer;
+  border: 2px solid #3b82f6;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.slider::-moz-range-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #ffffff;
+  cursor: pointer;
+  border: 2px solid #3b82f6;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}

app/page.tsx

@@ -1,14 +1,16 @@
 'use client';
 
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import Header from '@/components/navbar';
+import CloudLayerControls from '@/components/cloud-layer-controls';
 import { withAuth } from '@/utils/withAuth';
 
 const HomePage = () => {
   const mapRef = useRef<mapboxgl.Map | null>(null);
   const mapContainerRef = useRef(null);
+  const [mapLoaded, setMapLoaded] = useState(false);
 
   useEffect(() => {
     mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN || '';
@@ -24,10 +26,7 @@ const HomePage = () => {
         style: 'mapbox://styles/mapbox/dark-v11',
         center: [-2.5, 54],
         zoom: 5,
-        projection: 'globe',
-        minZoom: 5,
-        maxZoom: 6,
-        maxBounds: bounds,
+        projection: 'equirectangular',
       });
 
       if (mapRef.current) {
@@ -39,9 +38,7 @@ const HomePage = () => {
             'space-color': 'rgb(11, 11, 25)',
             'star-intensity': 0.6,
           });
-
-          mapRef.current?.setPitch(30);
-          mapRef.current?.setBearing(-15);
+          setMapLoaded(true);
         });
       }
     }
@@ -56,7 +53,14 @@ const HomePage = () => {
   return (
     <div>
       <Header />
-      <div id="map" ref={mapContainerRef} style={{ width: '100%', height: 'calc(100vh - 64px)' }} />
+      <div className="relative">
+        <div
+          id="map"
+          ref={mapContainerRef}
+          style={{ width: '100%', height: 'calc(100vh - 64px)' }}
+        />
+        {mapLoaded && <CloudLayerControls map={mapRef.current} />}
+      </div>
     </div>
   );
 };