Elevation Heat Map Implementation for Resolution Search

app/api/elevation/route.ts

@@ -0,0 +1,177 @@
+import { NextRequest, NextResponse } from 'next/server';
+import * as turf from '@turf/turf';
+
+/**
+ * GET /api/elevation
+ *
+ * Fetches elevation data for a grid of points within the given bounds.
+ * Uses Mapbox Terrain vector tileset to get elevation values.
+ */
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const boundsParam = searchParams.get('bounds');
+    const gridSizeParam = searchParams.get('gridSize');
+    const geometryParam = searchParams.get('geometry');
+
+    if (!boundsParam) {
+      return NextResponse.json(
+        { error: 'Missing required parameter: bounds' },
+        { status: 400 }
+      );
+    }
+
+    let bounds;
+    try {
+      bounds = JSON.parse(boundsParam);
+    } catch (e) {
+      return NextResponse.json({ error: 'Invalid bounds parameter' }, { status: 400 });
+    }
+
+    const gridSize = gridSizeParam ? parseInt(gridSizeParam) : 20;
+    const geometry = geometryParam ? JSON.parse(geometryParam) : null;
+
+    const [west, south, east, north] = bounds;
+
+    const points: Array<{ lng: number; lat: number; elevation: number | null }> = [];
+    const lonStep = (east - west) / gridSize;
+    const latStep = (north - south) / gridSize;
+
+    const polygon = geometry ? turf.polygon(geometry.coordinates) : null;
+
+    for (let i = 0; i <= gridSize; i++) {
+      for (let j = 0; j <= gridSize; j++) {
+        const lng = west + (lonStep * i);
+        const lat = south + (latStep * j);
+
+        if (polygon) {
+          const point = turf.point([lng, lat]);
+          if (!turf.booleanPointInPolygon(point, polygon)) {
+            continue;
+          }
+        }
+
+        points.push({ lng, lat, elevation: null });
+      }
+    }
+
+    const token = process.env.MAPBOX_ACCESS_TOKEN || process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
+
+    // Fetch elevation data using Mapbox Terrain vector tiles (v2)
+    // This tileset contains contour lines with 'ele' property
+    const elevationPromises = points.map(async (point) => {
+      try {
+        const response = await fetch(
+          `https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/tilequery/${point.lng},${point.lat}.json?access_token=${token}`
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          if (data.features && data.features.length > 0) {
+            // Find the feature with the highest elevation in this point's vicinity
+            // or just take the first one if it has 'ele'
+            const elevations = data.features
+              .map((f: any) => f.properties.ele)
+              .filter((e: any) => e !== undefined);
+
+            if (elevations.length > 0) {
+              point.elevation = Math.max(...elevations);
+            }
+          }
+        }
+      } catch (error) {
+        console.error(`Error fetching elevation for ${point.lng},${point.lat}:`, error);
+      }
+      return point;
+    });
+
+    const elevationData = await Promise.all(elevationPromises);
+    const validPoints = elevationData.filter(p => p.elevation !== null);
+
+    if (validPoints.length === 0) {
+      return NextResponse.json({
+        success: true,
+        points: [],
+        statistics: { min: 0, max: 0, average: 0, count: 0 },
+        bounds,
+        gridSize,
+      });
+    }
+
+    const elevations = validPoints.map(p => p.elevation as number);
+    const minElevation = Math.min(...elevations);
+    const maxElevation = Math.max(...elevations);
+    const avgElevation = elevations.reduce((sum, e) => sum + e, 0) / elevations.length;
+
+    return NextResponse.json({
+      success: true,
+      points: validPoints,
+      statistics: {
+        min: minElevation,
+        max: maxElevation,
+        average: Math.round(avgElevation * 10) / 10,
+        count: validPoints.length,
+      },
+      bounds,
+      gridSize,
+    });
+
+  } 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 }
+    );
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { features, gridSize = 20 } = body;
+
+    if (!features || !Array.isArray(features)) {
+      return NextResponse.json(
+        { error: 'Missing or invalid features array' },
+        { status: 400 }
+      );
+    }
+
+    const results = await Promise.all(
+      features.map(async (feature: any) => {
+        if (feature.geometry.type !== 'Polygon') {
+          return null;
+        }
+
+        const bbox = turf.bbox(feature);
+        const params = new URLSearchParams({
+          bounds: JSON.stringify(bbox),
+          gridSize: gridSize.toString(),
+          geometry: JSON.stringify(feature.geometry),
+        });
+
+        const url = new URL(`/api/elevation?${params}`, req.url);
+        const response = await GET(new NextRequest(url));
+        return await response.json();
+      })
+    );
+
+    return NextResponse.json({
+      success: true,
+      results: results.filter(r => r !== null),
+    });
+
+  } catch (error) {
+    console.error('Error in batch elevation query:', error);
+    return NextResponse.json(
+      {
+        error: 'Failed to process batch elevation query',
+        details: error instanceof Error ? error.message : 'Unknown error'
+      },
+      { status: 500 }
+    );
+  }
+}

app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata, Viewport } from 'next'
+import Script from 'next/script'
 import { Inter as FontSans, Poppins } from 'next/font/google'
 import './globals.css'
 import 'katex/dist/katex.min.css';
@@ -66,27 +67,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (function() {
-                const htmxEvents = [
-                  'sseError', 'sseOpen', 'swapError', 'targetError', 'timeout',
-                  'validation:validate', 'validation:failed', 'validation:halted',
-                  'xhr:abort', 'xhr:loadend', 'xhr:loadstart'
-                ];
-                htmxEvents.forEach(event => {
-                  const funcName = 'func ' + event;
-                  if (typeof window[funcName] === 'undefined') {
-                    window[funcName] = function() { 
-                      console.warn('HTMX event handler "' + funcName + '" was called but not defined. Providing safety fallback.');
-                    };
-                  }
-                });
-              })();
-            `,
-          }}
-        />
+        <Script src="/htmx-fallback.js" strategy="beforeInteractive" />
       </head>
       <body
         className={cn(

app_actions_final_fix.patch

@@ -0,0 +1,9 @@
+<<<<<<< SEARCH
+import dynamic from 'next/dynamic'
+import { ResolutionCarousel } from '@/components/resolution-carousel'
+
+const ElevationHeatmapLayer = dynamic(() => import('@/components/map/elevation-heatmap-layer').then(mod => mod.ElevationHeatmapLayer), { ssr: false })
+=======
+import { ElevationHeatmapLayer } from '@/components/map/elevation-heatmap-layer'
+import { ResolutionCarousel } from '@/components/resolution-carousel'
+>>>>>>> REPLACE

components/header-search-button.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Search } from 'lucide-react'
 import { useMap } from './map/map-context'
 import { useActions, useUIState } from 'ai/rsc'
-import { AI } from '@/app/actions'
+
 import { nanoid } from '@/lib/utils'
 import { UserMessage } from './user-message'
 import { toast } from 'sonner'
@@ -24,8 +24,8 @@ export function HeaderSearchButton() {
   const { mapProvider } = useSettingsStore()
   const { mapData } = useMapData()
   // Cast the actions to our defined interface to avoid build errors
-  const actions = useActions<typeof AI>() as unknown as HeaderActions
-  const [, setMessages] = useUIState<typeof AI>()
+  const actions = useActions<any>() as unknown as HeaderActions
+  const [, setMessages] = useUIState<any>()
   const [isAnalyzing, setIsAnalyzing] = useState(false)
   const [desktopPortal, setDesktopPortal] = useState<HTMLElement | null>(null)
   const [mobilePortal, setMobilePortal] = useState<HTMLElement | null>(null)

components/map/elevation-heatmap-layer.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useMap } from './map-context'
+
+interface ElevationPoint {
+  lng: number;
+  lat: number;
+  elevation: number;
+}
+
+interface ElevationHeatmapLayerProps {
+  id: string;
+  points: ElevationPoint[];
+  statistics?: {
+    min: number;
+    max: number;
+    average: number;
+    count: number;
+  };
+}
+
+export function ElevationHeatmapLayer({ id, points, statistics }: ElevationHeatmapLayerProps) {
+  const { map } = useMap()
+  const [mapboxgl, setMapboxgl] = useState<any>(null)
+
+  useEffect(() => {
+    import('mapbox-gl').then(mod => {
+      setMapboxgl(mod.default)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!map || !points || points.length === 0 || !mapboxgl) return
+
+    const sourceId = `elevation-heatmap-source-${id}`
+    const heatmapLayerId = `elevation-heatmap-layer-${id}`
+    const pointsLayerId = `elevation-points-layer-${id}`
+
+    const geojson: any = {
+      type: 'FeatureCollection',
+      features: points.map(point => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [point.lng, point.lat]
+        },
+        properties: {
+          elevation: point.elevation,
+          intensity: statistics && statistics.max !== statistics.min
+            ? (point.elevation - statistics.min) / (statistics.max - statistics.min)
+            : 0.5
+        }
+      }))
+    }
+
+    const onMapLoad = () => {
+      if (!map.getSource(sourceId)) {
+        map.addSource(sourceId, {
+          type: 'geojson',
+          data: geojson
+        })
+
+        map.addLayer({
+          id: heatmapLayerId,
+          type: 'heatmap',
+          source: sourceId,
+          paint: {
+            'heatmap-weight': ['interpolate', ['linear'], ['get', 'intensity'], 0, 0, 1, 1],
+            'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 15, 3],
+            '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)'
+            ],
+            'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 15, 20],
+            'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0.7, 15, 0.5]
+          }
+        })
+
+        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]
+          }
+        })
+
+        const clickHandler = (e: any) => {
+          if (!e.features || e.features.length === 0) return
+          const elevation = e.features[0].properties?.elevation
+          if (elevation !== undefined) {
+            new mapboxgl.Popup()
+              .setLngLat(e.lngLat)
+              .setHTML(`<strong>Elevation:</strong> ${elevation}m`)
+              .addTo(map)
+          }
+        }
+
+        map.on('click', pointsLayerId, clickHandler)
+        map.on('mouseenter', pointsLayerId, () => { map.getCanvas().style.cursor = 'pointer' })
+        map.on('mouseleave', pointsLayerId, () => { map.getCanvas().style.cursor = '' })
+      }
+    }
+
+    if (map.isStyleLoaded()) {
+      onMapLoad()
+    } else {
+      map.once('load', onMapLoad)
+    }
+
+    return () => {
+      if (map) {
+        if (map.getLayer(pointsLayerId)) map.removeLayer(pointsLayerId)
+        if (map.getLayer(heatmapLayerId)) map.removeLayer(heatmapLayerId)
+        if (map.getSource(sourceId)) map.removeSource(sourceId)
+      }
+    }
+  }, [map, id, points, statistics, mapboxgl])
+
+  return null
+}