Implement Elevation Heat Map for Resolution Search

app/actions.tsx

@@ -21,6 +21,7 @@ import { BotMessage } from '@/components/message'
 import { SearchSection } from '@/components/search-section'
 import SearchRelated from '@/components/search-related'
 import { GeoJsonLayer } from '@/components/map/geojson-layer'
+import { ElevationHeatmapLayer } from '@/components/map/elevation-heatmap-layer'
 import { ResolutionCarousel } from '@/components/resolution-carousel'
 import { ResolutionImage } from '@/components/resolution-image'
 import { CopilotDisplay } from '@/components/copilot-display'
@@ -123,6 +124,36 @@ async function submit(formData?: FormData, skip?: boolean) {
           );
         }
 
+        // Handle elevation heat map if requested
+        if (analysisResult.elevationData?.requested && analysisResult.elevationData.bounds) {
+          try {
+            const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+            const elevationResponse = await fetch(
+              `${baseUrl}/api/elevation?bounds=${JSON.stringify(analysisResult.elevationData.bounds)}&gridSize=${analysisResult.elevationData.gridSize || 20}`
+            );
+
+            if (elevationResponse.ok) {
+              const elevationData = await elevationResponse.json();
+
+              if (elevationData.points && elevationData.points.length > 0) {
+                (analysisResult as any).elevationPoints = elevationData.points;
+                (analysisResult as any).elevationStatistics = elevationData.statistics;
+
+                uiStream.append(
+                  <ElevationHeatmapLayer
+                    id={groupeId}
+                    points={elevationData.points}
+                    statistics={elevationData.statistics}
+                  />
+                );
+              }
+            }
+          } catch (error) {
+            console.error('Error fetching elevation data:', error);
+          }
+        }
+
+
         messages.push({ role: 'assistant', content: analysisResult.summary || 'Analysis complete.' });
 
         const sanitizedMessages: CoreMessage[] = messages.map((m: any) => {
@@ -173,7 +204,9 @@ async function submit(formData?: FormData, skip?: boolean) {
                 ...analysisResult,
                 image: dataUrl,
                 mapboxImage: mapboxDataUrl,
-                googleImage: googleDataUrl
+                googleImage: googleDataUrl,
+                elevationPoints: (analysisResult as any).elevationPoints,
+                elevationStatistics: (analysisResult as any).elevationStatistics
               }),
               type: 'resolution_search_result'
             },
@@ -745,6 +778,8 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
               const image = analysisResult.image as string;
               const mapboxImage = analysisResult.mapboxImage as string;
               const googleImage = analysisResult.googleImage as string;
+              const elevationPoints = analysisResult.elevationPoints;
+              const elevationStatistics = analysisResult.elevationStatistics;
 
               return {
                 id,

app/api/elevation/route.ts

@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { generateCoordinateGrid, decodeMapboxTerrainRGB, getElevationStats } from '@/lib/utils/elevation';
+
+export const runtime = 'edge';
+
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const boundsParam = searchParams.get('bounds');
+    const gridSizeParam = searchParams.get('gridSize');
+
+    if (!boundsParam) {
+      return NextResponse.json(
+        { error: 'Missing required parameter: bounds' },
+        { status: 400 }
+      );
+    }
+
+    const bounds = JSON.parse(boundsParam) as [number, number, number, number]; // [west, south, east, north]
+    const gridSize = gridSizeParam ? parseInt(gridSizeParam) : 20;
+
+    // Generate grid points
+    // generateCoordinateGrid expects bounds: [west, south, east, north]
+    // But check the implementation I just wrote:
+    // export function generateCoordinateGrid(bounds: [number, number, number, number], gridSize: number = 20)
+    // inside: const [west, south, east, north] = bounds;
+    // Implementation seems consistent.
+
+    const points = generateCoordinateGrid(bounds, gridSize);
+
+    // Fetch elevation data
+    const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
+    if (!mapboxToken) {
+      return NextResponse.json(
+        { error: 'Mapbox access token not configured' },
+        { status: 500 }
+      );
+    }
+
+    // Mapbox Tilequery API allows multiple coordinates? No, it's one by one or comma separated for features, but for terrain-rgb tilequery usually returns value at point.
+    // The user snippet did fetch per point. I will do parallel fetch with limit.
+    // Since runtime is edge, we can do parallel fetches.
+
+    // Batching strategy: Mapbox Tilequery API supports multiple queries?
+    // "Retrieve features from vector tiles based on a longitude and latitude."
+    // It doesn't support batch points in one request. We must make N requests.
+    // N = 20*20 = 400 requests. This might be too many for browser fetch limit or edge limit.
+    // But let's try. Maybe reduce grid size default if needed. 400 is a lot.
+    // User snippet uses 20x20.
+
+    // Limit concurrency to avoid hitting rate limits or fetch errors
+    const batchSize = 10;
+    const results = [];
+
+    for (let i = 0; i < points.length; i += batchSize) {
+      const batch = points.slice(i, i + batchSize);
+      const batchPromises = batch.map(async (point) => {
+        try {
+          const url = `https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/tilequery/${point.lng},${point.lat}.json?layers=contour&limit=1&access_token=${mapboxToken}`;
+
+          const response = await fetch(url);
+          if (!response.ok) return { ...point, elevation: 0 };
+
+          const data = await response.json();
+          const elevation = data.features && data.features.length > 0 ? data.features[0].properties?.ele : 0;
+          return { ...point, elevation };
+        } catch (e) {
+          console.error(e);
+          return { ...point, elevation: 0 };
+        }
+      });
+
+      const batchResults = await Promise.all(batchPromises);
+      results.push(...batchResults);
+    }
+
+    const validPoints = results.filter(p => p.elevation !== undefined);
+    const statistics = getElevationStats(validPoints);
+
+    return NextResponse.json({
+      points: validPoints,
+      statistics
+    });
+
+  } catch (error) {
+    console.error('Error fetching elevation data:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch elevation data', details: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}

components/map/elevation-heatmap-layer.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import mapboxgl from 'mapbox-gl'
+import { useMap } from './map-context'
+import { getElevationStats } from '@/lib/utils/elevation'
+
+interface ElevationPoint {
+  lat: number;
+  lng: number;
+  elevation: number;
+}
+
+interface ElevationHeatmapLayerProps {
+  id?: string;
+  points: ElevationPoint[];
+  statistics?: {
+    min: number;
+    max: number;
+    average: number;
+    count: number;
+  };
+}
+
+export function ElevationHeatmapLayer({ id = 'elevation', points, statistics }: ElevationHeatmapLayerProps) {
+  const { map } = useMap()
+  const sourceId = `elevation-heatmap-source-${id}`
+  const heatmapLayerId = `elevation-heatmap-layer-${id}`
+  const pointsLayerId = `elevation-points-layer-${id}`
+
+  // Keep track of layers added to remove them cleanly
+  const layersAdded = useRef(false);
+
+  useEffect(() => {
+    if (!map || !points || points.length === 0) return
+
+    // Calculate stats if not provided
+    const stats = statistics || getElevationStats(points);
+    const { min, max } = stats;
+
+    // Normalize elevation for heat map intensity (0-1 scale)
+    const intensity = (val: number) => (max === min ? 0.5 : (val - min) / (max - min));
+
+    // Convert points to GeoJSON
+    const geojson: GeoJSON.FeatureCollection = {
+      type: 'FeatureCollection',
+      features: points.map(point => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [point.lng, point.lat]
+        },
+        properties: {
+          elevation: point.elevation,
+          intensity: intensity(point.elevation)
+        }
+      }))
+    }
+
+    const addLayers = () => {
+      if (map.getSource(sourceId)) {
+        // Update data if source exists
+        (map.getSource(sourceId) as mapboxgl.GeoJSONSource).setData(geojson);
+      } else {
+        // Add the data source
+        map.addSource(sourceId, {
+          type: 'geojson',
+          data: geojson
+        })
+      }
+
+      // Add heatmap layer if not exists
+      if (!map.getLayer(heatmapLayerId)) {
+        map.addLayer({
+          id: heatmapLayerId,
+          type: 'heatmap',
+          source: sourceId,
+          maxzoom: 15,
+          paint: {
+            // Increase weight based on elevation intensity
+            'heatmap-weight': [
+              'interpolate',
+              ['linear'],
+              ['get', 'intensity'],
+              0, 0,
+              1, 1
+            ],
+            // Increase intensity as zoom increases
+            'heatmap-intensity': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              0, 1,
+              15, 3
+            ],
+            // Color ramp for the heatmap (elevation-based proxy)
+            // Blue (low) -> Green (mid) -> Yellow (high) -> Red (very high)
+            'heatmap-color': [
+              'interpolate',
+              ['linear'],
+              ['heatmap-density'],
+              0, 'rgba(33,102,172,0)',
+              0.2, 'rgb(103,169,207)',
+              0.4, 'rgb(209,229,240)',
+              0.6, 'rgb(253,219,199)',
+              0.8, 'rgb(239,138,98)',
+              1, 'rgb(178,24,43)'
+            ],
+            // Adjust heatmap radius by zoom level
+            'heatmap-radius': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              0, 2,
+              15, 20
+            ],
+            // Opacity
+            'heatmap-opacity': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              7, 0.7,
+              15, 0.5
+            ]
+          }
+        })
+        layersAdded.current = true;
+      }
+
+      // Add circle layer for high zoom levels if not exists
+      if (!map.getLayer(pointsLayerId)) {
+        map.addLayer({
+          id: pointsLayerId,
+          type: 'circle',
+          source: sourceId,
+          minzoom: 14,
+          paint: {
+            'circle-radius': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              14, 3,
+              22, 8
+            ],
+            'circle-color': [
+              'interpolate',
+              ['linear'],
+              ['get', 'intensity'],
+              0, '#2166ac',
+              0.25, '#67a9cf',
+              0.5, '#f7f7f7',
+              0.75, '#ef8a62',
+              1, '#b2182b'
+            ],
+            'circle-stroke-color': 'white',
+            'circle-stroke-width': 1,
+            'circle-opacity': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              14, 0,
+              15, 0.8
+            ]
+          }
+        })
+        layersAdded.current = true;
+
+        // Popup logic
+        map.on('click', pointsLayerId, (e) => {
+          if (!e.features || e.features.length === 0) return
+
+          const feature = e.features[0]
+          const elevation = feature.properties?.elevation
+
+          if (elevation !== undefined) {
+            new mapboxgl.Popup()
+              .setLngLat(e.lngLat)
+              .setHTML(`<strong>Elevation:</strong> ${elevation.toFixed(1)}m`)
+              .addTo(map)
+          }
+        })
+
+        // Cursor logic
+        map.on('mouseenter', pointsLayerId, () => {
+          map.getCanvas().style.cursor = 'pointer'
+        })
+
+        map.on('mouseleave', pointsLayerId, () => {
+          map.getCanvas().style.cursor = ''
+        })
+      }
+    }
+
+    if (map.isStyleLoaded()) {
+      addLayers()
+    } else {
+      map.on('load', addLayers)
+    }
+
+    // Cleanup handled by return function of useEffect
+    return () => {
+      // We don't remove source immediately to avoid flickering if component re-renders quickly
+      // But for clean unmount we should.
+      // However, usually we want layers to persist until explicitly removed or component unmounted.
+      if (map.isStyleLoaded()) {
+        if (map.getLayer(pointsLayerId)) map.removeLayer(pointsLayerId)
+        if (map.getLayer(heatmapLayerId)) map.removeLayer(heatmapLayerId)
+        if (map.getSource(sourceId)) map.removeSource(sourceId)
+      }
+      layersAdded.current = false;
+    }
+  }, [map, id, points, statistics]) // Re-run if points change
+
+  return null
+}

lib/agents/resolution-search.tsx

@@ -28,7 +28,12 @@ const resolutionSearchSchema = z.object({
   cogInfo: z.object({
     applicable: z.boolean(),
     description: z.string().optional()
-  }).optional().describe('Information about whether Cloud Optimized GeoTIFF (COG) data is applicable or available for this area.')
+  }).optional().describe('Information about whether Cloud Optimized GeoTIFF (COG) data is applicable or available for this area.'),
+  elevationData: z.object({
+    requested: z.boolean().describe('Whether elevation heat map was requested or appropriate for this analysis'),
+    bounds: z.array(z.number()).optional().describe('Bounding box for elevation query [west, south, east, north]'),
+    gridSize: z.number().optional().describe('Grid resolution for elevation sampling'),
+  }).optional().describe('Elevation heat map configuration for the analyzed area'),
 })
 
 export interface DrawnFeature {
@@ -66,7 +71,8 @@ Your analysis should be comprehensive and include the following components:
 2.  **Points of Interest (POI):** Detect and name any significant landmarks, infrastructure (e.g., bridges, major roads), or notable buildings.
 3.  **Coordinate Extraction:** If possible, confirm or refine the geocoordinates (latitude/longitude) of the center of the image.
 4.  **COG Applicability:** Determine if this location would benefit from Cloud Optimized GeoTIFF (COG) analysis for high-precision temporal or spectral data.
-5.  **Structured Output:** Return your findings in a structured JSON format. The output must include a 'summary' (a detailed text description of your analysis) and a 'geoJson' object.
+5.  **Elevation Heat Map:** If the user has drawn polygons or if terrain analysis would be valuable, indicate that elevation data should be fetched by setting elevationData.requested to true and providing appropriate bounds.
+6.  **Structured Output:** Return your findings in a structured JSON format. The output must include a 'summary' (a detailed text description of your analysis) and a 'geoJson' object.
 
 Your analysis should be based solely on the visual information in the image and your general knowledge. Do not attempt to access external websites or perform web searches.