diff --git a/client/src/App.tsx b/client/src/App.tsx index 2ed5ed27..60272a82 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -133,6 +133,12 @@ const ChamaGroupLending = lazy(() => import("./pages/ChamaGroupLending")); const DistributorNetwork = lazy(() => import("./pages/DistributorNetwork")); const DistributorMap = lazy(() => import("./pages/DistributorMap")); const DistributorOnboarding = lazy(() => import("./pages/DistributorOnboarding")); +const GISWorkspace = lazy(() => import("./pages/GISWorkspace")); +const SpatialFieldCollection = lazy(() => import("./pages/SpatialFieldCollection")); +const SpatialSpectralIndex = lazy(() => import("./pages/SpatialSpectralIndex")); +const SpatialH3Analysis = lazy(() => import("./pages/SpatialH3Analysis")); +const SpatialVectorAnalysis = lazy(() => import("./pages/SpatialVectorAnalysis")); +const SpatialTileCache = lazy(() => import("./pages/SpatialTileCache")); const ColdChainMonitoring = lazy(() => import("./pages/ColdChainMonitoring")); const PriceAlertsDashboard = lazy(() => import("./pages/PriceAlertsDashboard")); const SubscriptionBoxes = lazy(() => import("./pages/SubscriptionBoxes")); @@ -285,6 +291,12 @@ function Router() { + + + + + + diff --git a/client/src/components/CategoryHub.tsx b/client/src/components/CategoryHub.tsx index ec4bb0ca..0967a5ad 100644 --- a/client/src/components/CategoryHub.tsx +++ b/client/src/components/CategoryHub.tsx @@ -95,6 +95,12 @@ const categoryFeatures: Record = { { href: "/land-suitability", label: "Land Suitability", icon: Leaf, description: "Soil assessment" }, { href: "/crop-yield", label: "Crop Yield", icon: BarChart3, description: "Yield analytics" }, { href: "/crops/dashboard", label: "Crop Dashboard", icon: Sprout, description: "Crop overview" }, + { href: "/gis-workspace", label: "GIS Workspace", icon: Globe, description: "GeoLibre spatial tools", badge: "NEW" }, + { href: "/spatial-field-collection", label: "Field Collection", icon: MapPin, description: "GPS farm capture", badge: "NEW" }, + { href: "/spatial-spectral-index", label: "Spectral Index", icon: Satellite, description: "NDVI crop health", badge: "NEW" }, + { href: "/spatial-h3-analysis", label: "H3 Grid", icon: Target, description: "Hex coverage analysis", badge: "NEW" }, + { href: "/spatial-vector-analysis", label: "Vector Analysis", icon: Leaf, description: "Buffer, clip, dissolve", badge: "NEW" }, + { href: "/spatial-tile-cache", label: "Offline Tiles", icon: WifiOff, description: "Cache for offline", badge: "NEW" }, ], }, { diff --git a/client/src/lib/geolibre/duckdb-spatial.ts b/client/src/lib/geolibre/duckdb-spatial.ts new file mode 100644 index 00000000..7b980013 --- /dev/null +++ b/client/src/lib/geolibre/duckdb-spatial.ts @@ -0,0 +1,238 @@ +/** + * DuckDB-WASM Spatial Engine + * + * In-browser spatial SQL engine for offline-capable geospatial queries. + * Inspired by GeoLibre's DuckDB-WASM integration. + * Supports GeoJSON ingestion, spatial queries (ST_Distance, ST_Contains, + * ST_Buffer, ST_Area), and result export — all without server round-trips. + */ + +let dbInstance: unknown | null = null; +let connInstance: unknown | null = null; + +const VALID_TABLE_NAME = /^[a-zA-Z_][a-zA-Z0-9_]{0,62}$/; + +function sanitizeTableName(name: string): string { + if (!VALID_TABLE_NAME.test(name)) { + throw new Error(`Invalid table name: ${name}`); + } + return name; +} + +function escapeString(value: string): string { + return value.replace(/'/g, "''").replace(/\\/g, "\\\\"); +} + +interface DuckDBModule { + selectBundle: (config: Record) => Promise<{ mainModule: string; mainWorker: string }>; + ConsoleLogger: new () => unknown; + AsyncDuckDB: new (logger: unknown, worker: Worker) => DuckDB; + createWorker: (url: string) => Worker; +} + +interface DuckDB { + instantiate: (mainModule: string, pthreadWorker?: null) => Promise; + open: (config: Record) => Promise; + connect: () => Promise; +} + +interface DuckDBConnection { + query: (sql: string) => Promise; + close: () => Promise; +} + +interface DuckDBResult { + toArray: () => Array>; + numRows: number; + numCols: number; +} + +export interface SpatialQueryResult { + rows: Array>; + rowCount: number; + columnCount: number; + executionTimeMs: number; +} + +export interface GeoJSONFeatureCollection { + type: "FeatureCollection"; + features: Array<{ + type: "Feature"; + geometry: { type: string; coordinates: unknown }; + properties: Record; + }>; +} + +/** + * Initialize the DuckDB-WASM engine with spatial extensions. + * Lazy-loads on first use; subsequent calls return cached instance. + */ +export async function initDuckDBSpatial(): Promise<{ db: DuckDB; conn: DuckDBConnection }> { + if (dbInstance && connInstance) { + return { db: dbInstance as DuckDB, conn: connInstance as DuckDBConnection }; + } + + // Attempt dynamic DuckDB-WASM load (optional dependency) + try { + // Dynamic import — @duckdb/duckdb-wasm is an optional peer dependency. + // Using variable to bypass static module resolution (package may not be installed). + const DUCKDB_PKG = "@duckdb/duckdb-wasm"; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const duckdbModule: any = await import(/* @vite-ignore */ DUCKDB_PKG); + const allBundles = await duckdbModule.selectBundle(duckdbModule.getJsDelivrBundles()); + const loggerInstance = new duckdbModule.ConsoleLogger(); + const worker = await duckdbModule.createWorker(allBundles.mainWorker); + const db = new duckdbModule.AsyncDuckDB(loggerInstance, worker); + await db.instantiate(allBundles.mainModule, allBundles.pthreadWorker); + await db.open({}); + const conn = await db.connect(); + await conn.query("INSTALL spatial; LOAD spatial;"); + dbInstance = db; + connInstance = conn as DuckDBConnection; + console.info("[DuckDB-WASM] Spatial engine initialized"); + return { db: db as DuckDB, conn: conn as DuckDBConnection }; + } catch { + console.warn("[DuckDB-WASM] Not available, using in-memory fallback. Install @duckdb/duckdb-wasm for full spatial SQL."); + const fallbackConn = createFallbackConnection(); + connInstance = fallbackConn; + return { db: {} as DuckDB, conn: fallbackConn }; + } +} + +/** + * Execute a spatial SQL query against loaded data. + */ +export async function executeSpatialQuery(sql: string): Promise { + const { conn } = await initDuckDBSpatial(); + const start = performance.now(); + const result = await conn.query(sql); + const executionTimeMs = performance.now() - start; + + return { + rows: result.toArray(), + rowCount: result.numRows, + columnCount: result.numCols, + executionTimeMs, + }; +} + +/** + * Load GeoJSON data into a DuckDB table for querying. + */ +export async function loadGeoJSONTable( + tableName: string, + geojson: GeoJSONFeatureCollection +): Promise { + const { conn } = await initDuckDBSpatial(); + + // Create table from GeoJSON features + const columns = new Set(); + geojson.features.forEach(f => { + Object.keys(f.properties).forEach(k => columns.add(k)); + }); + + // Build CREATE TABLE and INSERT statements + const safeTable = sanitizeTableName(tableName); + await conn.query(`DROP TABLE IF EXISTS ${safeTable}`); + + const rows = geojson.features.map(f => { + const geom = JSON.stringify(f.geometry); + const props = Object.fromEntries( + Array.from(columns).map(col => [col, f.properties[col] ?? null]) + ); + return { geom, ...props }; + }); + + if (rows.length === 0) return; + + // Create table with geometry column — column names sanitized + const safeCols = Array.from(columns).map(c => sanitizeTableName(c)); + const colDefs = safeCols.map(c => `"${c}" VARCHAR`).join(", "); + await conn.query(`CREATE TABLE ${safeTable} (geom GEOMETRY, ${colDefs})`); + + // Insert rows with escaped values + for (const row of rows) { + const vals = safeCols.map(c => { + const v = (row as Record)[c]; + return v === null || v === undefined ? "NULL" : `'${escapeString(String(v))}'`; + }); + await conn.query( + `INSERT INTO ${safeTable} VALUES (ST_GeomFromGeoJSON('${escapeString(row.geom)}'), ${vals.join(", ")})` + ); + } +} + +/** + * Find features within a given distance (meters) of a point. + */ +export async function findNearby( + tableName: string, + lat: number, + lng: number, + radiusMeters: number +): Promise { + const safeTable = sanitizeTableName(tableName); + return executeSpatialQuery(` + SELECT *, ST_Distance( + geom, + ST_Point(${Number(lng)}, ${Number(lat)}) + ) * 111319.9 AS distance_m + FROM ${safeTable} + WHERE ST_Distance(geom, ST_Point(${Number(lng)}, ${Number(lat)})) * 111319.9 < ${Number(radiusMeters)} + ORDER BY distance_m + `); +} + +/** + * Calculate area of polygon features in square meters. + */ +export async function calculateAreas(tableName: string): Promise { + const safeTable = sanitizeTableName(tableName); + return executeSpatialQuery(` + SELECT *, ST_Area(geom) * 12321000000 AS area_sq_m + FROM ${safeTable} + WHERE ST_GeometryType(geom) IN ('POLYGON', 'MULTIPOLYGON') + `); +} + +/** + * Preset spatial queries for agricultural use cases. + */ +export const FARM_SPATIAL_QUERIES = { + farmsByRegion: (region: string) => ` + SELECT * FROM farms WHERE state = '${escapeString(region)}' ORDER BY area_sq_m DESC + `, + distributorCoverage: (radiusKm: number) => ` + SELECT d.*, ST_Buffer(d.geom, ${Number(radiusKm) / 111.32}) AS coverage_area + FROM distributors d WHERE d.status = 'approved' + `, + nearestDistributor: (lat: number, lng: number) => ` + SELECT *, ST_Distance(geom, ST_Point(${Number(lng)}, ${Number(lat)})) * 111.32 AS distance_km + FROM distributors ORDER BY distance_km LIMIT 5 + `, + cropDensityGrid: () => ` + SELECT ST_SnapToGrid(geom, 0.1) AS cell, + COUNT(*) AS farm_count, + SUM(CAST(area_hectares AS DOUBLE)) AS total_hectares + FROM farms + GROUP BY cell + `, +}; + +function createFallbackConnection(): DuckDBConnection { + const tables: Record>> = {}; + return { + query: async (sql: string): Promise => { + // Simple SELECT * fallback + const match = sql.match(/FROM\s+(\w+)/i); + const tableName = match ? match[1] : ""; + const rows = tables[tableName] || []; + return { + toArray: () => rows, + numRows: rows.length, + numCols: rows.length > 0 ? Object.keys(rows[0]).length : 0, + }; + }, + close: async () => {}, + }; +} diff --git a/client/src/lib/geolibre/field-collection.ts b/client/src/lib/geolibre/field-collection.ts new file mode 100644 index 00000000..272a0e79 --- /dev/null +++ b/client/src/lib/geolibre/field-collection.ts @@ -0,0 +1,280 @@ +/** + * Field Collection Engine + * + * GPS/map-tap capture for farm boundaries, crop observations, and field photos. + * Inspired by GeoLibre's Field Collection tool. + * Works offline — stores collected features in IndexedDB and syncs when online. + */ + +export type GeometryType = "Point" | "LineString" | "Polygon"; + +export interface FieldFormSchema { + id: string; + name: string; + fields: FieldDefinition[]; +} + +export interface FieldDefinition { + name: string; + type: "text" | "number" | "date" | "choice" | "photo"; + label: string; + required: boolean; + choices?: string[]; +} + +export interface CollectedFeature { + id: string; + type: "Feature"; + geometry: { + type: GeometryType; + coordinates: number[] | number[][] | number[][][]; + }; + properties: Record; + metadata: { + collectedAt: string; + collectedBy: string; + accuracy: number | null; + altitude: number | null; + formId: string; + synced: boolean; + photos: string[]; + }; +} + +export interface FieldCollection { + id: string; + name: string; + formSchema: FieldFormSchema; + features: CollectedFeature[]; + createdAt: string; + updatedAt: string; +} + +const DB_NAME = "farmconnect_field_collection"; +const DB_VERSION = 1; +const STORE_NAME = "collections"; + +function openDB(): Promise { + return new Promise((resolve, reject) => { + const request = indexedDB.open(DB_NAME, DB_VERSION); + request.onerror = () => reject(request.error); + request.onsuccess = () => resolve(request.result); + request.onupgradeneeded = () => { + const db = request.result; + if (!db.objectStoreNames.contains(STORE_NAME)) { + db.createObjectStore(STORE_NAME, { keyPath: "id" }); + } + }; + }); +} + +/** + * Capture current GPS position with accuracy metadata. + */ +export function captureGPSPosition(): Promise { + return new Promise((resolve, reject) => { + if (!navigator.geolocation) { + reject(new Error("Geolocation not supported")); + return; + } + navigator.geolocation.getCurrentPosition(resolve, reject, { + enableHighAccuracy: true, + timeout: 15000, + maximumAge: 0, + }); + }); +} + +/** + * Create a point feature from GPS coordinates. + */ +export async function capturePointFromGPS( + formId: string, + userId: string, + properties: Record +): Promise { + const position = await captureGPSPosition(); + return { + id: crypto.randomUUID(), + type: "Feature", + geometry: { + type: "Point", + coordinates: [position.coords.longitude, position.coords.latitude], + }, + properties, + metadata: { + collectedAt: new Date().toISOString(), + collectedBy: userId, + accuracy: position.coords.accuracy, + altitude: position.coords.altitude, + formId, + synced: false, + photos: [], + }, + }; +} + +/** + * Create a point feature from map tap (manual placement). + */ +export function capturePointFromMapTap( + lng: number, + lat: number, + formId: string, + userId: string, + properties: Record +): CollectedFeature { + return { + id: crypto.randomUUID(), + type: "Feature", + geometry: { + type: "Point", + coordinates: [lng, lat], + }, + properties, + metadata: { + collectedAt: new Date().toISOString(), + collectedBy: userId, + accuracy: null, + altitude: null, + formId, + synced: false, + photos: [], + }, + }; +} + +/** + * Build a polygon from a series of GPS points (walk-the-boundary). + */ +export function buildPolygonFromPoints( + points: Array<[number, number]>, + formId: string, + userId: string, + properties: Record +): CollectedFeature { + // Close the polygon ring + const ring = [...points]; + if (ring.length > 0 && (ring[0][0] !== ring[ring.length - 1][0] || ring[0][1] !== ring[ring.length - 1][1])) { + ring.push(ring[0]); + } + + return { + id: crypto.randomUUID(), + type: "Feature", + geometry: { + type: "Polygon", + coordinates: [ring], + }, + properties, + metadata: { + collectedAt: new Date().toISOString(), + collectedBy: userId, + accuracy: null, + altitude: null, + formId, + synced: false, + photos: [], + }, + }; +} + +/** + * Save a collection to IndexedDB for offline persistence. + */ +export async function saveCollection(collection: FieldCollection): Promise { + const db = await openDB(); + return new Promise((resolve, reject) => { + const tx = db.transaction(STORE_NAME, "readwrite"); + tx.objectStore(STORE_NAME).put(collection); + tx.oncomplete = () => resolve(); + tx.onerror = () => reject(tx.error); + }); +} + +/** + * Load all collections from IndexedDB. + */ +export async function loadCollections(): Promise { + const db = await openDB(); + return new Promise((resolve, reject) => { + const tx = db.transaction(STORE_NAME, "readonly"); + const request = tx.objectStore(STORE_NAME).getAll(); + request.onsuccess = () => resolve(request.result); + request.onerror = () => reject(request.error); + }); +} + +/** + * Export a collection as GeoJSON FeatureCollection. + */ +export function exportAsGeoJSON(collection: FieldCollection): string { + const fc = { + type: "FeatureCollection" as const, + features: collection.features.map(f => ({ + type: "Feature" as const, + geometry: f.geometry, + properties: { + ...f.properties, + _collectedAt: f.metadata.collectedAt, + _collectedBy: f.metadata.collectedBy, + _accuracy: f.metadata.accuracy, + }, + })), + }; + return JSON.stringify(fc, null, 2); +} + +/** + * Get unsynced features count across all collections. + */ +export async function getUnsyncedCount(): Promise { + const collections = await loadCollections(); + return collections.reduce( + (sum, c) => sum + c.features.filter(f => !f.metadata.synced).length, + 0 + ); +} + +/** + * Pre-built form schemas for common agricultural field collection. + */ +export const FARM_FORM_SCHEMAS: FieldFormSchema[] = [ + { + id: "farm-boundary", + name: "Farm Boundary", + fields: [ + { name: "farm_name", type: "text", label: "Farm Name", required: true }, + { name: "farmer_id", type: "text", label: "Farmer ID", required: true }, + { name: "area_hectares", type: "number", label: "Estimated Area (ha)", required: false }, + { name: "primary_crop", type: "choice", label: "Primary Crop", required: true, choices: ["Maize", "Rice", "Cassava", "Cocoa", "Groundnuts", "Millet", "Sorghum", "Yam", "Tomatoes", "Other"] }, + { name: "soil_type", type: "choice", label: "Soil Type", required: false, choices: ["Clay", "Sandy", "Loam", "Silt", "Laterite"] }, + { name: "photo", type: "photo", label: "Farm Photo", required: false }, + ], + }, + { + id: "crop-observation", + name: "Crop Observation", + fields: [ + { name: "crop_type", type: "choice", label: "Crop", required: true, choices: ["Maize", "Rice", "Cassava", "Cocoa", "Groundnuts", "Millet", "Tomatoes", "Other"] }, + { name: "growth_stage", type: "choice", label: "Growth Stage", required: true, choices: ["Seedling", "Vegetative", "Flowering", "Fruiting", "Mature", "Harvest Ready"] }, + { name: "health_status", type: "choice", label: "Health", required: true, choices: ["Healthy", "Mild Stress", "Moderate Stress", "Severe Stress", "Dead"] }, + { name: "pest_observed", type: "text", label: "Pest/Disease Observed", required: false }, + { name: "notes", type: "text", label: "Notes", required: false }, + { name: "photo", type: "photo", label: "Photo", required: false }, + ], + }, + { + id: "warehouse-inspection", + name: "Warehouse Inspection", + fields: [ + { name: "warehouse_name", type: "text", label: "Warehouse Name", required: true }, + { name: "capacity_tons", type: "number", label: "Capacity (tons)", required: true }, + { name: "current_stock_tons", type: "number", label: "Current Stock (tons)", required: false }, + { name: "condition", type: "choice", label: "Condition", required: true, choices: ["Excellent", "Good", "Fair", "Poor", "Condemned"] }, + { name: "cold_chain", type: "choice", label: "Cold Chain Available", required: true, choices: ["Yes", "No"] }, + { name: "date_inspected", type: "date", label: "Inspection Date", required: true }, + { name: "photo", type: "photo", label: "Photo", required: false }, + ], + }, +]; diff --git a/client/src/lib/geolibre/h3-grid.ts b/client/src/lib/geolibre/h3-grid.ts new file mode 100644 index 00000000..06f04214 --- /dev/null +++ b/client/src/lib/geolibre/h3-grid.ts @@ -0,0 +1,238 @@ +/** + * H3 Hexagonal Grid Tools + * + * Spatial binning for demand/supply heatmaps, distributor coverage analysis, + * and crop density mapping using Uber's H3 geospatial indexing system. + * Inspired by GeoLibre's H3 tools. + */ + +import * as h3 from "h3-js"; + +export interface H3Cell { + h3Index: string; + center: [number, number]; // [lat, lng] + boundary: Array<[number, number]>; // [[lat, lng], ...] + resolution: number; +} + +export interface H3AggregatedCell extends H3Cell { + count: number; + value: number; + features: Array<{ id: string | number; properties: Record }>; +} + +export interface H3GridResult { + cells: H3AggregatedCell[]; + resolution: number; + totalFeatures: number; + bounds: { north: number; south: number; east: number; west: number }; + stats: { + minCount: number; + maxCount: number; + meanCount: number; + minValue: number; + maxValue: number; + meanValue: number; + }; +} + +/** + * Generate an H3 grid covering a bounding box. + */ +export function generateH3Grid( + bounds: { north: number; south: number; east: number; west: number }, + resolution: number +): H3Cell[] { + const polygon: [number, number][] = [ + [bounds.north, bounds.west], + [bounds.north, bounds.east], + [bounds.south, bounds.east], + [bounds.south, bounds.west], + [bounds.north, bounds.west], + ]; + + const hexagons = h3.polygonToCells(polygon, resolution, true); + + return hexagons.map(idx => ({ + h3Index: idx, + center: h3.cellToLatLng(idx) as [number, number], + boundary: h3.cellToBoundary(idx) as Array<[number, number]>, + resolution, + })); +} + +/** + * Bin point features into H3 hexagonal cells. + */ +export function binPointsToH3( + points: Array<{ lat: number; lng: number; id: string | number; value?: number; properties?: Record }>, + resolution: number +): H3GridResult { + const cellMap = new Map(); + + let north = -Infinity, south = Infinity, east = -Infinity, west = Infinity; + + for (const point of points) { + const h3Index = h3.latLngToCell(point.lat, point.lng, resolution); + + if (!cellMap.has(h3Index)) { + cellMap.set(h3Index, { + h3Index, + center: h3.cellToLatLng(h3Index) as [number, number], + boundary: h3.cellToBoundary(h3Index) as Array<[number, number]>, + resolution, + count: 0, + value: 0, + features: [], + }); + } + + const cell = cellMap.get(h3Index)!; + cell.count++; + cell.value += point.value ?? 1; + cell.features.push({ id: point.id, properties: point.properties ?? {} }); + + if (point.lat > north) north = point.lat; + if (point.lat < south) south = point.lat; + if (point.lng > east) east = point.lng; + if (point.lng < west) west = point.lng; + } + + const cells = Array.from(cellMap.values()); + const counts = cells.map(c => c.count); + const values = cells.map(c => c.value); + + return { + cells, + resolution, + totalFeatures: points.length, + bounds: { north, south, east, west }, + stats: { + minCount: Math.min(...counts, 0), + maxCount: Math.max(...counts, 0), + meanCount: counts.length > 0 ? counts.reduce((a, b) => a + b, 0) / counts.length : 0, + minValue: Math.min(...values, 0), + maxValue: Math.max(...values, 0), + meanValue: values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0, + }, + }; +} + +/** + * Convert H3 grid result to GeoJSON for MapLibre rendering. + */ +export function h3GridToGeoJSON(result: H3GridResult): GeoJSON.FeatureCollection { + return { + type: "FeatureCollection", + features: result.cells.map(cell => ({ + type: "Feature" as const, + geometry: { + type: "Polygon" as const, + coordinates: [ + [...cell.boundary.map(([lat, lng]) => [lng, lat]), [cell.boundary[0][1], cell.boundary[0][0]]], + ], + }, + properties: { + h3Index: cell.h3Index, + count: cell.count, + value: cell.value, + centerLat: cell.center[0], + centerLng: cell.center[1], + }, + })), + }; +} + +/** + * Get the optimal H3 resolution for a given map zoom level. + */ +export function zoomToH3Resolution(mapZoom: number): number { + if (mapZoom <= 3) return 1; + if (mapZoom <= 5) return 2; + if (mapZoom <= 7) return 3; + if (mapZoom <= 8) return 4; + if (mapZoom <= 9) return 5; + if (mapZoom <= 10) return 6; + if (mapZoom <= 12) return 7; + if (mapZoom <= 14) return 8; + if (mapZoom <= 16) return 9; + return 10; +} + +/** + * Analyze distributor coverage using H3 cells. + * Returns cells with and without distributor coverage. + */ +export function analyzeDistributorCoverage( + distributors: Array<{ lat: number; lng: number; id: string | number; coverageRadiusKm: number }>, + demandPoints: Array<{ lat: number; lng: number; id: string | number; value?: number }>, + resolution: number +): { + coveredCells: H3AggregatedCell[]; + uncoveredCells: H3AggregatedCell[]; + coveragePercent: number; + gapAreas: Array<{ center: [number, number]; demandCount: number }>; +} { + // Get covered H3 cells (within distributor radius) + const coveredSet = new Set(); + for (const dist of distributors) { + const centerH3 = h3.latLngToCell(dist.lat, dist.lng, resolution); + const ring = h3.gridDisk(centerH3, Math.ceil(dist.coverageRadiusKm / (h3.getHexagonEdgeLengthAvg(resolution, "km") * 2))); + ring.forEach(idx => coveredSet.add(idx)); + } + + // Bin demand points + const demandGrid = binPointsToH3(demandPoints, resolution); + + const coveredCells: H3AggregatedCell[] = []; + const uncoveredCells: H3AggregatedCell[] = []; + + for (const cell of demandGrid.cells) { + if (coveredSet.has(cell.h3Index)) { + coveredCells.push(cell); + } else { + uncoveredCells.push(cell); + } + } + + const totalDemand = demandGrid.cells.length; + const coveragePercent = totalDemand > 0 ? Math.round((coveredCells.length / totalDemand) * 100) : 0; + + // Identify gap areas (uncovered cells with high demand) + const gapAreas = uncoveredCells + .sort((a, b) => b.count - a.count) + .slice(0, 10) + .map(cell => ({ + center: cell.center, + demandCount: cell.count, + })); + + return { coveredCells, uncoveredCells, coveragePercent, gapAreas }; +} + +/** + * Generate a color for an H3 cell based on its value relative to min/max. + */ +export function h3ValueToColor( + value: number, + min: number, + max: number, + colorRamp: "heat" | "green" | "blue" = "heat" +): string { + const t = max === min ? 0.5 : (value - min) / (max - min); + + switch (colorRamp) { + case "heat": + // Yellow → Orange → Red + if (t < 0.5) return `rgba(255, ${Math.round(255 - t * 200)}, 0, 0.7)`; + return `rgba(255, ${Math.round(155 - (t - 0.5) * 310)}, 0, 0.7)`; + case "green": + // Light green → Dark green + return `rgba(${Math.round(200 - t * 170)}, ${Math.round(230 - t * 50)}, ${Math.round(200 - t * 170)}, 0.7)`; + case "blue": + // Light blue → Dark blue + return `rgba(${Math.round(200 - t * 170)}, ${Math.round(200 - t * 100)}, ${Math.round(230 + t * 25)}, 0.7)`; + default: + return `rgba(255, ${Math.round(255 * (1 - t))}, 0, 0.7)`; + } +} diff --git a/client/src/lib/geolibre/index.ts b/client/src/lib/geolibre/index.ts new file mode 100644 index 00000000..41ad0172 --- /dev/null +++ b/client/src/lib/geolibre/index.ts @@ -0,0 +1,13 @@ +/** + * GeoLibre Integration — Barrel Export + * + * Re-exports all GeoLibre-inspired spatial analysis capabilities. + */ + +export * from "./duckdb-spatial"; +export * from "./field-collection"; +export * from "./spectral-index"; +export * from "./tile-cache"; +export * from "./h3-grid"; +export * from "./vector-analysis"; +export * from "./raster-analysis"; diff --git a/client/src/lib/geolibre/raster-analysis.ts b/client/src/lib/geolibre/raster-analysis.ts new file mode 100644 index 00000000..d2bc922c --- /dev/null +++ b/client/src/lib/geolibre/raster-analysis.ts @@ -0,0 +1,415 @@ +/** + * Raster Analysis Tools + * + * Client-side raster processing for terrain analysis, slope/aspect, + * hillshade, contour generation, and zonal statistics. + * Inspired by GeoLibre's Raster menu. + */ + +import { fromUrl } from "geotiff"; + +export interface RasterData { + data: Float32Array; + width: number; + height: number; + bbox: [number, number, number, number]; + noDataValue: number; + resolution: { x: number; y: number }; +} + +export interface ZonalStats { + zoneId: string | number; + count: number; + min: number; + max: number; + mean: number; + sum: number; + stdDev: number; +} + +/** + * Load a single-band raster from a COG URL. + */ +export async function loadRaster(url: string, bandIndex: number = 0): Promise { + const tiff = await fromUrl(url); + const image = await tiff.getImage(); + const width = image.getWidth(); + const height = image.getHeight(); + const bbox = image.getBoundingBox() as [number, number, number, number]; + const rasters = await image.readRasters({ samples: [bandIndex] }); + const data = new Float32Array(rasters[0] as ArrayLike); + + const fileDir = image.fileDirectory as unknown as Record; + const gdalNoData = fileDir["GDAL_NODATA"]; + const noDataValue = gdalNoData ? parseFloat(String(gdalNoData)) : -9999; + + return { + data, + width, + height, + bbox, + noDataValue, + resolution: { + x: (bbox[2] - bbox[0]) / width, + y: (bbox[3] - bbox[1]) / height, + }, + }; +} + +/** + * Calculate hillshade from a DEM raster. + * Azimuth: sun direction in degrees (0=N, 90=E, 180=S, 270=W) + * Altitude: sun angle above horizon in degrees (0-90) + */ +export function calculateHillshade( + dem: RasterData, + azimuth: number = 315, + altitude: number = 45 +): RasterData { + const { width, height, data, noDataValue } = dem; + const result = new Float32Array(width * height); + + const azRad = (azimuth * Math.PI) / 180; + const altRad = (altitude * Math.PI) / 180; + const cellSize = dem.resolution.x * 111319.9; // degrees → meters + + for (let y = 1; y < height - 1; y++) { + for (let x = 1; x < width - 1; x++) { + const idx = y * width + x; + const z = data[idx]; + if (z === noDataValue) { + result[idx] = noDataValue; + continue; + } + + // 3x3 neighborhood + const a = data[(y - 1) * width + (x - 1)]; + const b = data[(y - 1) * width + x]; + const c = data[(y - 1) * width + (x + 1)]; + const d = data[y * width + (x - 1)]; + const f = data[y * width + (x + 1)]; + const g = data[(y + 1) * width + (x - 1)]; + const h = data[(y + 1) * width + x]; + const ii = data[(y + 1) * width + (x + 1)]; + + // Slope components (Horn's method) + const dzdx = ((c + 2 * f + ii) - (a + 2 * d + g)) / (8 * cellSize); + const dzdy = ((g + 2 * h + ii) - (a + 2 * b + c)) / (8 * cellSize); + + const slopeRad = Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy)); + const aspectRad = Math.atan2(dzdy, -dzdx); + + result[idx] = Math.max(0, Math.min(255, + 255 * ( + Math.cos(altRad) * Math.cos(slopeRad) + + Math.sin(altRad) * Math.sin(slopeRad) * Math.cos(azRad - aspectRad) + ) + )); + } + } + + return { ...dem, data: result }; +} + +/** + * Calculate slope from a DEM raster (in degrees). + */ +export function calculateSlope(dem: RasterData): RasterData { + const { width, height, data, noDataValue } = dem; + const result = new Float32Array(width * height); + const cellSize = dem.resolution.x * 111319.9; + + for (let y = 1; y < height - 1; y++) { + for (let x = 1; x < width - 1; x++) { + const idx = y * width + x; + if (data[idx] === noDataValue) { + result[idx] = noDataValue; + continue; + } + + const a = data[(y - 1) * width + (x - 1)]; + const b = data[(y - 1) * width + x]; + const c = data[(y - 1) * width + (x + 1)]; + const d = data[y * width + (x - 1)]; + const f = data[y * width + (x + 1)]; + const g = data[(y + 1) * width + (x - 1)]; + const h = data[(y + 1) * width + x]; + const ii = data[(y + 1) * width + (x + 1)]; + + const dzdx = ((c + 2 * f + ii) - (a + 2 * d + g)) / (8 * cellSize); + const dzdy = ((g + 2 * h + ii) - (a + 2 * b + c)) / (8 * cellSize); + + result[idx] = Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy)) * (180 / Math.PI); + } + } + + return { ...dem, data: result }; +} + +/** + * Calculate aspect from a DEM raster (compass direction of slope, in degrees). + */ +export function calculateAspect(dem: RasterData): RasterData { + const { width, height, data, noDataValue } = dem; + const result = new Float32Array(width * height); + + for (let y = 1; y < height - 1; y++) { + for (let x = 1; x < width - 1; x++) { + const idx = y * width + x; + if (data[idx] === noDataValue) { + result[idx] = noDataValue; + continue; + } + + const a = data[(y - 1) * width + (x - 1)]; + const b = data[(y - 1) * width + x]; + const c = data[(y - 1) * width + (x + 1)]; + const d = data[y * width + (x - 1)]; + const f = data[y * width + (x + 1)]; + const g = data[(y + 1) * width + (x - 1)]; + const h = data[(y + 1) * width + x]; + const ii = data[(y + 1) * width + (x + 1)]; + + const dzdx = ((c + 2 * f + ii) - (a + 2 * d + g)) / 8; + const dzdy = ((g + 2 * h + ii) - (a + 2 * b + c)) / 8; + + let aspect = Math.atan2(dzdy, -dzdx) * (180 / Math.PI); + if (aspect < 0) aspect += 360; + + result[idx] = aspect; + } + } + + return { ...dem, data: result }; +} + +/** + * Generate contour lines from a DEM raster. + * Returns GeoJSON LineStrings at the specified interval. + */ +export function generateContours( + dem: RasterData, + interval: number = 50 +): GeoJSON.FeatureCollection { + const { width, height, data, bbox, noDataValue } = dem; + const features: GeoJSON.Feature[] = []; + + // Find min/max elevation + let minElev = Infinity; + let maxElev = -Infinity; + for (let i = 0; i < data.length; i++) { + if (data[i] !== noDataValue && isFinite(data[i])) { + if (data[i] < minElev) minElev = data[i]; + if (data[i] > maxElev) maxElev = data[i]; + } + } + + const startElev = Math.ceil(minElev / interval) * interval; + const pixelToLng = (x: number) => bbox[0] + (x / width) * (bbox[2] - bbox[0]); + const pixelToLat = (y: number) => bbox[3] - (y / height) * (bbox[3] - bbox[1]); + + // March through each contour level using marching squares + for (let elev = startElev; elev <= maxElev; elev += interval) { + const segments: Array<[[number, number], [number, number]]> = []; + + for (let y = 0; y < height - 1; y++) { + for (let x = 0; x < width - 1; x++) { + const tl = data[y * width + x]; + const tr = data[y * width + x + 1]; + const bl = data[(y + 1) * width + x]; + const br = data[(y + 1) * width + x + 1]; + + if ([tl, tr, bl, br].some(v => v === noDataValue || !isFinite(v))) continue; + + // Marching squares case + let caseIndex = 0; + if (tl >= elev) caseIndex |= 8; + if (tr >= elev) caseIndex |= 4; + if (br >= elev) caseIndex |= 2; + if (bl >= elev) caseIndex |= 1; + + if (caseIndex === 0 || caseIndex === 15) continue; + + // Linear interpolation along edges + const lerp = (v1: number, v2: number) => { + if (v1 === v2) return 0.5; + return (elev - v1) / (v2 - v1); + }; + + const top: [number, number] = [pixelToLng(x + lerp(tl, tr)), pixelToLat(y)]; + const right: [number, number] = [pixelToLng(x + 1), pixelToLat(y + lerp(tr, br))]; + const bottom: [number, number] = [pixelToLng(x + lerp(bl, br)), pixelToLat(y + 1)]; + const left: [number, number] = [pixelToLng(x), pixelToLat(y + lerp(tl, bl))]; + + // Generate segments based on case + switch (caseIndex) { + case 1: case 14: segments.push([left, bottom]); break; + case 2: case 13: segments.push([bottom, right]); break; + case 3: case 12: segments.push([left, right]); break; + case 4: case 11: segments.push([top, right]); break; + case 6: case 9: segments.push([top, bottom]); break; + case 7: case 8: segments.push([top, left]); break; + case 5: + segments.push([left, top]); + segments.push([bottom, right]); + break; + case 10: + segments.push([top, right]); + segments.push([left, bottom]); + break; + } + } + } + + if (segments.length > 0) { + // Group connected segments into lines + const lines = groupSegmentsIntoLines(segments); + for (const line of lines) { + features.push({ + type: "Feature", + geometry: { type: "LineString", coordinates: line }, + properties: { elevation: elev }, + }); + } + } + } + + return { type: "FeatureCollection", features }; +} + +function groupSegmentsIntoLines( + segments: Array<[[number, number], [number, number]]> +): Array> { + const lines: Array> = []; + const used = new Set(); + const EPS = 1e-8; + + const close = (a: [number, number], b: [number, number]) => + Math.abs(a[0] - b[0]) < EPS && Math.abs(a[1] - b[1]) < EPS; + + for (let i = 0; i < segments.length; i++) { + if (used.has(i)) continue; + used.add(i); + const line: Array<[number, number]> = [segments[i][0], segments[i][1]]; + + let extended = true; + while (extended) { + extended = false; + for (let j = 0; j < segments.length; j++) { + if (used.has(j)) continue; + if (close(line[line.length - 1], segments[j][0])) { + line.push(segments[j][1]); + used.add(j); + extended = true; + } else if (close(line[line.length - 1], segments[j][1])) { + line.push(segments[j][0]); + used.add(j); + extended = true; + } + } + } + + if (line.length >= 2) lines.push(line); + } + + return lines; +} + +/** + * Calculate zonal statistics for raster values within polygon zones. + */ +export function calculateZonalStats( + raster: RasterData, + zones: GeoJSON.FeatureCollection, + zoneIdField: string = "id" +): ZonalStats[] { + const results: ZonalStats[] = []; + const { width, height, data, bbox, noDataValue } = raster; + const pixelWidth = (bbox[2] - bbox[0]) / width; + const pixelHeight = (bbox[3] - bbox[1]) / height; + + for (const zone of zones.features) { + const zoneId = zone.properties?.[zoneIdField] ?? "unknown"; + const zoneBbox = getBBox(zone); + const values: number[] = []; + + // Sample raster pixels within zone + const xStart = Math.max(0, Math.floor((zoneBbox[0] - bbox[0]) / pixelWidth)); + const xEnd = Math.min(width - 1, Math.ceil((zoneBbox[2] - bbox[0]) / pixelWidth)); + const yStart = Math.max(0, Math.floor((bbox[3] - zoneBbox[3]) / pixelHeight)); + const yEnd = Math.min(height - 1, Math.ceil((bbox[3] - zoneBbox[1]) / pixelHeight)); + + for (let y = yStart; y <= yEnd; y++) { + for (let x = xStart; x <= xEnd; x++) { + const lng = bbox[0] + x * pixelWidth + pixelWidth / 2; + const lat = bbox[3] - y * pixelHeight - pixelHeight / 2; + const val = data[y * width + x]; + + if (val === noDataValue || !isFinite(val)) continue; + + // Point-in-polygon check + if (isPointInPolygon(lng, lat, zone.geometry.coordinates[0] as Array<[number, number]>)) { + values.push(val); + } + } + } + + if (values.length > 0) { + const sum = values.reduce((a, b) => a + b, 0); + const mean = sum / values.length; + const variance = values.reduce((s, v) => s + (v - mean) ** 2, 0) / values.length; + + results.push({ + zoneId, + count: values.length, + min: Math.min(...values), + max: Math.max(...values), + mean, + sum, + stdDev: Math.sqrt(variance), + }); + } + } + + return results; +} + +function getBBox(feature: GeoJSON.Feature): [number, number, number, number] { + let minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity; + const coords = (feature.geometry as GeoJSON.Polygon).coordinates[0]; + for (const [lng, lat] of coords as Array<[number, number]>) { + if (lng < minLng) minLng = lng; + if (lng > maxLng) maxLng = lng; + if (lat < minLat) minLat = lat; + if (lat > maxLat) maxLat = lat; + } + return [minLng, minLat, maxLng, maxLat]; +} + +function isPointInPolygon(x: number, y: number, polygon: Array<[number, number]>): boolean { + let inside = false; + for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { + const xi = polygon[i][0], yi = polygon[i][1]; + const xj = polygon[j][0], yj = polygon[j][1]; + if ((yi > y) !== (yj > y) && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) { + inside = !inside; + } + } + return inside; +} + +/** + * Classify slope for land suitability assessment. + */ +export function classifySlopeForFarming(slopeDegrees: number): { + label: string; + color: string; + suitability: string; +} { + if (slopeDegrees < 2) return { label: "Flat (0-2°)", color: "#4CAF50", suitability: "Excellent — all crops" }; + if (slopeDegrees < 5) return { label: "Gentle (2-5°)", color: "#8BC34A", suitability: "Good — most crops, minimal erosion risk" }; + if (slopeDegrees < 10) return { label: "Moderate (5-10°)", color: "#CDDC39", suitability: "Fair — terracing recommended" }; + if (slopeDegrees < 15) return { label: "Steep (10-15°)", color: "#FF9800", suitability: "Marginal — tree crops, contour farming" }; + if (slopeDegrees < 25) return { label: "Very Steep (15-25°)", color: "#F44336", suitability: "Poor — forestry or pasture only" }; + return { label: "Extreme (>25°)", color: "#B71C1C", suitability: "Unsuitable — conservation land" }; +} diff --git a/client/src/lib/geolibre/spectral-index.ts b/client/src/lib/geolibre/spectral-index.ts new file mode 100644 index 00000000..26e049a9 --- /dev/null +++ b/client/src/lib/geolibre/spectral-index.ts @@ -0,0 +1,275 @@ +/** + * Spectral Index Calculator + * + * Client-side calculation of vegetation and crop health indices + * from satellite imagery (Sentinel-2, Landsat 8/9, NAIP). + * Inspired by GeoLibre's spectral index toolbox. + */ + +import GeoTIFF, { fromUrl } from "geotiff"; + +export type SpectralIndex = "NDVI" | "NDWI" | "EVI" | "SAVI" | "NDMI" | "NDBI" | "NBR" | "GNDVI"; + +export interface BandLayout { + name: string; + red: number; // band index (0-based) + green: number; + blue: number; + nir: number; + swir1?: number; + swir2?: number; + redEdge?: number; +} + +export interface SpectralResult { + index: SpectralIndex; + width: number; + height: number; + data: Float32Array; + min: number; + max: number; + mean: number; + noDataCount: number; + bbox: [number, number, number, number] | null; +} + +export const BAND_LAYOUTS: Record = { + sentinel2: { + name: "Sentinel-2", + red: 3, // B4 (665nm) + green: 2, // B3 (560nm) + blue: 1, // B2 (490nm) + nir: 7, // B8 (842nm) + swir1: 10, // B11 (1610nm) + swir2: 11, // B12 (2190nm) + redEdge: 4, // B5 (705nm) + }, + landsat89: { + name: "Landsat 8/9", + red: 3, // B4 + green: 2, // B3 + blue: 1, // B2 + nir: 4, // B5 + swir1: 5, // B6 + swir2: 6, // B7 + }, + naip: { + name: "NAIP", + red: 0, + green: 1, + blue: 2, + nir: 3, + }, +}; + +/** + * Calculate a spectral index from band arrays. + */ +export function calculateIndex( + index: SpectralIndex, + bands: Record, + width: number, + height: number +): SpectralResult { + const size = width * height; + const result = new Float32Array(size); + let min = Infinity; + let max = -Infinity; + let sum = 0; + let validCount = 0; + let noDataCount = 0; + + for (let i = 0; i < size; i++) { + const red = bands.red?.[i] ?? 0; + const green = bands.green?.[i] ?? 0; + const nir = bands.nir?.[i] ?? 0; + const swir1 = bands.swir1?.[i] ?? 0; + const swir2 = bands.swir2?.[i] ?? 0; + const blue = bands.blue?.[i] ?? 0; + + let value: number; + + switch (index) { + case "NDVI": + // Normalized Difference Vegetation Index + value = nir + red === 0 ? 0 : (nir - red) / (nir + red); + break; + case "NDWI": + // Normalized Difference Water Index + value = green + nir === 0 ? 0 : (green - nir) / (green + nir); + break; + case "EVI": + // Enhanced Vegetation Index + value = nir + 6 * red - 7.5 * blue + 1 === 0 + ? 0 + : 2.5 * ((nir - red) / (nir + 6 * red - 7.5 * blue + 1)); + break; + case "SAVI": { + // Soil Adjusted Vegetation Index (L=0.5) + const L = 0.5; + value = nir + red + L === 0 ? 0 : ((nir - red) / (nir + red + L)) * (1 + L); + break; + } + case "NDMI": + // Normalized Difference Moisture Index + value = nir + swir1 === 0 ? 0 : (nir - swir1) / (nir + swir1); + break; + case "NDBI": + // Normalized Difference Built-up Index + value = swir1 + nir === 0 ? 0 : (swir1 - nir) / (swir1 + nir); + break; + case "NBR": + // Normalized Burn Ratio + value = nir + swir2 === 0 ? 0 : (nir - swir2) / (nir + swir2); + break; + case "GNDVI": + // Green NDVI + value = nir + green === 0 ? 0 : (nir - green) / (nir + green); + break; + default: + value = 0; + } + + if (isNaN(value) || !isFinite(value)) { + result[i] = NaN; + noDataCount++; + } else { + result[i] = value; + if (value < min) min = value; + if (value > max) max = value; + sum += value; + validCount++; + } + } + + return { + index, + width, + height, + data: result, + min: validCount > 0 ? min : 0, + max: validCount > 0 ? max : 0, + mean: validCount > 0 ? sum / validCount : 0, + noDataCount, + bbox: null, + }; +} + +/** + * Load a COG/GeoTIFF from URL and extract bands. + */ +export async function loadRasterBands( + url: string, + bandIndices: number[] +): Promise<{ bands: Record; width: number; height: number; bbox: [number, number, number, number] }> { + const tiff = await fromUrl(url); + const image = await tiff.getImage(); + const width = image.getWidth(); + const height = image.getHeight(); + const bbox = image.getBoundingBox() as [number, number, number, number]; + + const bands: Record = {}; + for (const idx of bandIndices) { + const rasters = await image.readRasters({ samples: [idx] }); + bands[idx] = rasters[0] as Float32Array | Float64Array; + } + + return { bands, width, height, bbox }; +} + +/** + * Calculate a spectral index from a COG URL. + */ +export async function calculateIndexFromCOG( + url: string, + index: SpectralIndex, + layout: BandLayout +): Promise { + const bandIndices = new Set(); + bandIndices.add(layout.red); + bandIndices.add(layout.green); + bandIndices.add(layout.blue); + bandIndices.add(layout.nir); + if (layout.swir1 !== undefined) bandIndices.add(layout.swir1); + if (layout.swir2 !== undefined) bandIndices.add(layout.swir2); + + const { bands: rawBands, width, height, bbox } = await loadRasterBands(url, Array.from(bandIndices)); + + const bands: Record = { + red: rawBands[layout.red], + green: rawBands[layout.green], + blue: rawBands[layout.blue], + nir: rawBands[layout.nir], + }; + if (layout.swir1 !== undefined && rawBands[layout.swir1]) bands.swir1 = rawBands[layout.swir1]; + if (layout.swir2 !== undefined && rawBands[layout.swir2]) bands.swir2 = rawBands[layout.swir2]; + + const result = calculateIndex(index, bands, width, height); + result.bbox = bbox; + return result; +} + +/** + * Classify an NDVI result into crop health categories. + */ +export function classifyNDVI(value: number): { label: string; color: string; description: string } { + if (value < 0) return { label: "Water/Cloud", color: "#2196F3", description: "Water body or cloud shadow" }; + if (value < 0.1) return { label: "Bare Soil", color: "#795548", description: "Bare soil or fallow land" }; + if (value < 0.2) return { label: "Sparse Vegetation", color: "#FF9800", description: "Very sparse vegetation or stressed crops" }; + if (value < 0.4) return { label: "Moderate", color: "#CDDC39", description: "Moderate vegetation — early growth or mild stress" }; + if (value < 0.6) return { label: "Healthy", color: "#8BC34A", description: "Healthy vegetation — good crop condition" }; + if (value < 0.8) return { label: "Very Healthy", color: "#4CAF50", description: "Dense, vigorous vegetation — excellent condition" }; + return { label: "Peak Health", color: "#1B5E20", description: "Peak vegetation density — optimal growth" }; +} + +/** + * Generate an NDVI color ramp for map rendering. + */ +export function ndviColorRamp(value: number): [number, number, number, number] { + // Brown → Yellow → Light Green → Dark Green + if (value < 0) return [33, 150, 243, 200]; // Water blue + if (value < 0.1) return [121, 85, 72, 200]; // Brown + if (value < 0.2) return [255, 152, 0, 200]; // Orange + if (value < 0.3) return [205, 220, 57, 200]; // Yellow-green + if (value < 0.5) return [139, 195, 74, 200]; // Light green + if (value < 0.7) return [76, 175, 80, 200]; // Green + return [27, 94, 32, 200]; // Dark green +} + +/** + * Generate summary statistics for a spectral result. + */ +export function summarizeSpectralResult(result: SpectralResult): { + index: SpectralIndex; + min: number; + max: number; + mean: number; + stdDev: number; + healthDistribution: Record; +} { + const validValues = Array.from(result.data).filter(v => !isNaN(v) && isFinite(v)); + const mean = validValues.reduce((a, b) => a + b, 0) / validValues.length; + const variance = validValues.reduce((sum, v) => sum + (v - mean) ** 2, 0) / validValues.length; + + const healthDistribution: Record = {}; + if (result.index === "NDVI") { + for (const v of validValues) { + const { label } = classifyNDVI(v); + healthDistribution[label] = (healthDistribution[label] || 0) + 1; + } + // Convert to percentages + const total = validValues.length; + for (const key of Object.keys(healthDistribution)) { + healthDistribution[key] = Math.round((healthDistribution[key] / total) * 100 * 10) / 10; + } + } + + return { + index: result.index, + min: result.min, + max: result.max, + mean, + stdDev: Math.sqrt(variance), + healthDistribution, + }; +} diff --git a/client/src/lib/geolibre/tile-cache.ts b/client/src/lib/geolibre/tile-cache.ts new file mode 100644 index 00000000..35f3b967 --- /dev/null +++ b/client/src/lib/geolibre/tile-cache.ts @@ -0,0 +1,285 @@ +/** + * Offline Tile Cache Manager + * + * Pre-cache basemap tiles for offline use in rural areas with poor connectivity. + * Inspired by GeoLibre's "Download Offline Area" tool. + * Uses Cache API for persistent tile storage. + */ + +const TILE_CACHE_NAME = "farmconnect-tile-cache-v1"; +const METADATA_CACHE_NAME = "farmconnect-tile-meta-v1"; +const OSM_SUBDOMAINS = ["a", "b", "c"]; +let tileUrlTemplate = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; + +/** + * Configure the tile server URL template. Use `{s}` for subdomain rotation, + * `{z}`, `{x}`, `{y}` for tile coordinates. + */ +export function setTileUrlTemplate(template: string): void { + tileUrlTemplate = template; +} + +function getTileUrl(z: number, x: number, y: number): string { + const subdomain = OSM_SUBDOMAINS[(x + y) % OSM_SUBDOMAINS.length]; + return tileUrlTemplate + .replace("{s}", subdomain) + .replace("{z}", String(z)) + .replace("{x}", String(x)) + .replace("{y}", String(y)); +} + +export interface CachedArea { + id: string; + name: string; + bounds: { north: number; south: number; east: number; west: number }; + minZoom: number; + maxZoom: number; + tileCount: number; + downloadedCount: number; + sizeBytes: number; + createdAt: string; + expiresAt: string; + status: "downloading" | "complete" | "partial" | "expired"; +} + +export interface DownloadProgress { + areaId: string; + totalTiles: number; + downloadedTiles: number; + failedTiles: number; + bytesDownloaded: number; + percent: number; + estimatedTimeRemainingMs: number; +} + +type ProgressCallback = (progress: DownloadProgress) => void; + +/** + * Calculate tile coordinates for a bounding box at a given zoom level. + */ +function getTilesInBounds( + bounds: { north: number; south: number; east: number; west: number }, + zoom: number +): Array<{ x: number; y: number; z: number }> { + const tiles: Array<{ x: number; y: number; z: number }> = []; + const n = 2 ** zoom; + + const xMin = Math.floor(((bounds.west + 180) / 360) * n); + const xMax = Math.floor(((bounds.east + 180) / 360) * n); + const yMin = Math.floor( + ((1 - Math.log(Math.tan((bounds.north * Math.PI) / 180) + 1 / Math.cos((bounds.north * Math.PI) / 180)) / Math.PI) / 2) * n + ); + const yMax = Math.floor( + ((1 - Math.log(Math.tan((bounds.south * Math.PI) / 180) + 1 / Math.cos((bounds.south * Math.PI) / 180)) / Math.PI) / 2) * n + ); + + for (let x = Math.max(0, xMin); x <= Math.min(n - 1, xMax); x++) { + for (let y = Math.max(0, yMin); y <= Math.min(n - 1, yMax); y++) { + tiles.push({ x, y, z: zoom }); + } + } + + return tiles; +} + +/** + * Estimate total tile count for a download area. + */ +export function estimateTileCount( + bounds: { north: number; south: number; east: number; west: number }, + minZoom: number, + maxZoom: number +): { totalTiles: number; estimatedSizeMB: number } { + let totalTiles = 0; + for (let z = minZoom; z <= maxZoom; z++) { + totalTiles += getTilesInBounds(bounds, z).length; + } + // Average OSM tile is ~15KB + const estimatedSizeMB = Math.round((totalTiles * 15) / 1024 * 10) / 10; + return { totalTiles, estimatedSizeMB }; +} + +/** + * Download and cache tiles for an offline area. + */ +export async function downloadOfflineArea( + name: string, + bounds: { north: number; south: number; east: number; west: number }, + minZoom: number, + maxZoom: number, + onProgress?: ProgressCallback +): Promise { + const cache = await caches.open(TILE_CACHE_NAME); + const areaId = `area-${Date.now()}`; + + // Calculate all tiles needed + const allTiles: Array<{ x: number; y: number; z: number }> = []; + for (let z = minZoom; z <= maxZoom; z++) { + allTiles.push(...getTilesInBounds(bounds, z)); + } + + const area: CachedArea = { + id: areaId, + name, + bounds, + minZoom, + maxZoom, + tileCount: allTiles.length, + downloadedCount: 0, + sizeBytes: 0, + createdAt: new Date().toISOString(), + expiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(), // 30 days + status: "downloading", + }; + + let downloadedTiles = 0; + let failedTiles = 0; + let bytesDownloaded = 0; + const startTime = Date.now(); + const BATCH_SIZE = 6; // parallel downloads + + for (let i = 0; i < allTiles.length; i += BATCH_SIZE) { + const batch = allTiles.slice(i, i + BATCH_SIZE); + const results = await Promise.allSettled( + batch.map(async (tile) => { + const url = getTileUrl(tile.z, tile.x, tile.y); + try { + const response = await fetch(url); + if (response.ok) { + const blob = await response.blob(); + bytesDownloaded += blob.size; + await cache.put(url, new Response(blob, { + headers: { + "Content-Type": "image/png", + "X-Area-Id": areaId, + "X-Cached-At": new Date().toISOString(), + }, + })); + downloadedTiles++; + } else { + failedTiles++; + } + } catch { + failedTiles++; + } + }) + ); + + if (onProgress) { + const elapsed = Date.now() - startTime; + const rate = downloadedTiles / (elapsed / 1000); + const remaining = allTiles.length - downloadedTiles - failedTiles; + onProgress({ + areaId, + totalTiles: allTiles.length, + downloadedTiles, + failedTiles, + bytesDownloaded, + percent: Math.round(((downloadedTiles + failedTiles) / allTiles.length) * 100), + estimatedTimeRemainingMs: rate > 0 ? (remaining / rate) * 1000 : 0, + }); + } + } + + area.downloadedCount = downloadedTiles; + area.sizeBytes = bytesDownloaded; + area.status = failedTiles === 0 ? "complete" : "partial"; + + // Save metadata + await saveAreaMetadata(area); + + return area; +} + +/** + * Save area metadata to the metadata cache. + */ +async function saveAreaMetadata(area: CachedArea): Promise { + const metaCache = await caches.open(METADATA_CACHE_NAME); + const existing = await loadAllAreas(); + const updated = existing.filter(a => a.id !== area.id); + updated.push(area); + await metaCache.put( + "areas-metadata", + new Response(JSON.stringify(updated), { headers: { "Content-Type": "application/json" } }) + ); +} + +/** + * Load all cached area metadata. + */ +export async function loadAllAreas(): Promise { + try { + const metaCache = await caches.open(METADATA_CACHE_NAME); + const response = await metaCache.match("areas-metadata"); + if (!response) return []; + return await response.json(); + } catch { + return []; + } +} + +/** + * Delete a cached offline area and its tiles. + */ +export async function deleteOfflineArea(areaId: string): Promise { + const areas = await loadAllAreas(); + const area = areas.find(a => a.id === areaId); + if (!area) return; + + const cache = await caches.open(TILE_CACHE_NAME); + const keys = await cache.keys(); + + // Delete tiles belonging to this area + await Promise.all( + keys.map(async (request) => { + const response = await cache.match(request); + if (response?.headers.get("X-Area-Id") === areaId) { + await cache.delete(request); + } + }) + ); + + // Update metadata + const metaCache = await caches.open(METADATA_CACHE_NAME); + const remaining = areas.filter(a => a.id !== areaId); + await metaCache.put( + "areas-metadata", + new Response(JSON.stringify(remaining), { headers: { "Content-Type": "application/json" } }) + ); +} + +/** + * Get total cache size across all offline areas. + */ +export async function getCacheStats(): Promise<{ + totalAreas: number; + totalTiles: number; + totalSizeMB: number; + oldestArea: string | null; + newestArea: string | null; +}> { + const areas = await loadAllAreas(); + const totalSizeBytes = areas.reduce((sum, a) => sum + a.sizeBytes, 0); + const sorted = [...areas].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()); + + return { + totalAreas: areas.length, + totalTiles: areas.reduce((sum, a) => sum + a.downloadedCount, 0), + totalSizeMB: Math.round((totalSizeBytes / (1024 * 1024)) * 10) / 10, + oldestArea: sorted[0]?.name ?? null, + newestArea: sorted[sorted.length - 1]?.name ?? null, + }; +} + +/** + * Pre-defined offline areas for common Nigerian agricultural regions. + */ +export const NIGERIAN_FARM_REGIONS = [ + { name: "Kano (Groundnuts Belt)", bounds: { north: 12.2, south: 11.8, east: 8.7, west: 8.3 }, defaultZoom: { min: 8, max: 14 } }, + { name: "Benue (Food Basket)", bounds: { north: 7.9, south: 7.3, east: 9.0, west: 8.2 }, defaultZoom: { min: 8, max: 14 } }, + { name: "Ogun (Cocoa Belt)", bounds: { north: 7.3, south: 6.8, east: 3.6, west: 3.0 }, defaultZoom: { min: 8, max: 14 } }, + { name: "Niger (Rice Belt)", bounds: { north: 10.0, south: 9.0, east: 6.5, west: 5.5 }, defaultZoom: { min: 8, max: 14 } }, + { name: "Kaduna (Maize Corridor)", bounds: { north: 10.8, south: 10.2, east: 7.6, west: 7.0 }, defaultZoom: { min: 8, max: 14 } }, + { name: "Lagos (Urban Markets)", bounds: { north: 6.7, south: 6.3, east: 3.6, west: 3.1 }, defaultZoom: { min: 10, max: 16 } }, +]; diff --git a/client/src/lib/geolibre/vector-analysis.ts b/client/src/lib/geolibre/vector-analysis.ts new file mode 100644 index 00000000..3782891d --- /dev/null +++ b/client/src/lib/geolibre/vector-analysis.ts @@ -0,0 +1,341 @@ +/** + * Vector Analysis Tools + * + * Client-side spatial analysis using Turf.js — buffer, spatial join, clip, + * dissolve, centroid, convex hull, bounding box, simplify, and more. + * Inspired by GeoLibre's Vector menu. + * All operations run in-browser without server dependencies. + */ + +import * as turf from "@turf/turf"; + +export type VectorOperation = + | "buffer" + | "centroid" + | "convexHull" + | "bbox" + | "dissolve" + | "simplify" + | "clip" + | "intersection" + | "difference" + | "union" + | "spatialJoin" + | "pointsInPolygon" + | "voronoi" + | "tin"; + +export interface VectorAnalysisResult { + operation: VectorOperation; + input: GeoJSON.FeatureCollection; + output: GeoJSON.FeatureCollection; + stats: { + inputFeatureCount: number; + outputFeatureCount: number; + executionTimeMs: number; + }; +} + +/** + * Buffer features by a given distance. + */ +export function bufferFeatures( + fc: GeoJSON.FeatureCollection, + distance: number, + units: "kilometers" | "meters" | "miles" = "kilometers" +): VectorAnalysisResult { + const start = performance.now(); + const buffered = turf.buffer(fc, distance, { units }); + const output = buffered ?? turf.featureCollection([]); + return { + operation: "buffer", + input: fc, + output: output as GeoJSON.FeatureCollection, + stats: { + inputFeatureCount: fc.features.length, + outputFeatureCount: (output as GeoJSON.FeatureCollection).features?.length ?? 0, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Calculate centroids of all features. + */ +export function calculateCentroids(fc: GeoJSON.FeatureCollection): VectorAnalysisResult { + const start = performance.now(); + const centroids = turf.featureCollection( + fc.features.map(f => { + const c = turf.centroid(f); + c.properties = { ...f.properties }; + return c; + }) + ); + return { + operation: "centroid", + input: fc, + output: centroids, + stats: { + inputFeatureCount: fc.features.length, + outputFeatureCount: centroids.features.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Calculate convex hull of a feature collection. + */ +export function convexHull(fc: GeoJSON.FeatureCollection): VectorAnalysisResult { + const start = performance.now(); + const hull = turf.convex(fc); + const output = hull ? turf.featureCollection([hull]) : turf.featureCollection([]); + return { + operation: "convexHull", + input: fc, + output, + stats: { + inputFeatureCount: fc.features.length, + outputFeatureCount: output.features.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Calculate bounding box of a feature collection. + */ +export function boundingBox(fc: GeoJSON.FeatureCollection): VectorAnalysisResult { + const start = performance.now(); + const envelope = turf.bboxPolygon(turf.bbox(fc)); + const output = turf.featureCollection([envelope]); + return { + operation: "bbox", + input: fc, + output, + stats: { + inputFeatureCount: fc.features.length, + outputFeatureCount: 1, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Dissolve overlapping polygons. + */ +export function dissolveFeatures( + fc: GeoJSON.FeatureCollection, + propertyName?: string +): VectorAnalysisResult { + const start = performance.now(); + const dissolved = propertyName + ? turf.dissolve(fc as GeoJSON.FeatureCollection, { propertyName }) + : turf.dissolve(fc as GeoJSON.FeatureCollection); + return { + operation: "dissolve", + input: fc, + output: dissolved, + stats: { + inputFeatureCount: fc.features.length, + outputFeatureCount: dissolved.features.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Simplify geometries using Douglas-Peucker algorithm. + */ +export function simplifyFeatures( + fc: GeoJSON.FeatureCollection, + tolerance: number = 0.01, + highQuality: boolean = true +): VectorAnalysisResult { + const start = performance.now(); + const simplified = turf.simplify(fc, { tolerance, highQuality }); + return { + operation: "simplify", + input: fc, + output: simplified as GeoJSON.FeatureCollection, + stats: { + inputFeatureCount: fc.features.length, + outputFeatureCount: (simplified as GeoJSON.FeatureCollection).features.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Clip features to a polygon boundary. + */ +export function clipFeatures( + fc: GeoJSON.FeatureCollection, + clipPolygon: GeoJSON.Feature +): VectorAnalysisResult { + const start = performance.now(); + const clipped: GeoJSON.Feature[] = []; + + for (const feature of fc.features) { + try { + const geomType = feature.geometry.type; + if (geomType === "Polygon" || geomType === "MultiPolygon") { + const result = turf.intersect( + turf.featureCollection([feature as GeoJSON.Feature, clipPolygon]) + ); + if (result) { + result.properties = { ...feature.properties }; + clipped.push(result); + } + } else if (geomType === "Point") { + if (turf.booleanPointInPolygon(feature as GeoJSON.Feature, clipPolygon)) { + clipped.push(feature); + } + } else if (geomType === "LineString" || geomType === "MultiLineString") { + // Line clipping — keep the feature if it intersects + const line = feature as GeoJSON.Feature; + const bbox = turf.bbox(clipPolygon); + const lineBbox = turf.bbox(line); + if (lineBbox[0] <= bbox[2] && lineBbox[2] >= bbox[0] && lineBbox[1] <= bbox[3] && lineBbox[3] >= bbox[1]) { + clipped.push(feature); + } + } + } catch { + // Skip invalid geometries + } + } + + const output = turf.featureCollection(clipped); + return { + operation: "clip", + input: fc, + output, + stats: { + inputFeatureCount: fc.features.length, + outputFeatureCount: clipped.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Spatial join — attach properties from polygon layer to point layer. + */ +export function spatialJoin( + points: GeoJSON.FeatureCollection, + polygons: GeoJSON.FeatureCollection +): VectorAnalysisResult { + const start = performance.now(); + const joined = turf.tag(points, polygons, "joined_id", "joined_id"); + return { + operation: "spatialJoin", + input: points, + output: joined, + stats: { + inputFeatureCount: points.features.length, + outputFeatureCount: joined.features.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Count points within each polygon. + */ +export function pointsInPolygon( + points: GeoJSON.FeatureCollection, + polygons: GeoJSON.FeatureCollection +): VectorAnalysisResult { + const start = performance.now(); + const result = turf.collect(polygons, points, "value", "collectedValues"); + // Add count property + for (const feature of result.features) { + const collected = feature.properties?.collectedValues as unknown[]; + feature.properties = { + ...feature.properties, + pointCount: collected?.length ?? 0, + }; + } + return { + operation: "pointsInPolygon", + input: points, + output: result as unknown as GeoJSON.FeatureCollection, + stats: { + inputFeatureCount: points.features.length, + outputFeatureCount: result.features.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Generate Voronoi polygons from points (Thiessen polygons for coverage areas). + */ +export function voronoiDiagram( + points: GeoJSON.FeatureCollection, + clipBbox?: [number, number, number, number] +): VectorAnalysisResult { + const start = performance.now(); + const bbox = clipBbox ?? turf.bbox(points) as [number, number, number, number]; + // Add margin to bbox + const margin = 0.1; + const expandedBbox: [number, number, number, number] = [ + bbox[0] - margin, bbox[1] - margin, bbox[2] + margin, bbox[3] + margin + ]; + const voronoi = turf.voronoi(points, { bbox: expandedBbox }); + return { + operation: "voronoi", + input: points, + output: voronoi as GeoJSON.FeatureCollection, + stats: { + inputFeatureCount: points.features.length, + outputFeatureCount: voronoi.features.length, + executionTimeMs: performance.now() - start, + }, + }; +} + +/** + * Calculate area statistics for polygon features. + */ +export function calculateAreaStats( + fc: GeoJSON.FeatureCollection +): { totalAreaHa: number; avgAreaHa: number; minAreaHa: number; maxAreaHa: number; features: Array<{ id: unknown; areaHa: number }> } { + const areas = fc.features + .filter(f => f.geometry.type === "Polygon" || f.geometry.type === "MultiPolygon") + .map(f => ({ + id: f.properties?.id ?? f.id, + areaHa: turf.area(f) / 10000, // m² → hectares + })); + + const areaValues = areas.map(a => a.areaHa); + return { + totalAreaHa: areaValues.reduce((a, b) => a + b, 0), + avgAreaHa: areaValues.length > 0 ? areaValues.reduce((a, b) => a + b, 0) / areaValues.length : 0, + minAreaHa: Math.min(...areaValues, 0), + maxAreaHa: Math.max(...areaValues, 0), + features: areas, + }; +} + +/** + * Calculate distance matrix between two sets of points. + */ +export function distanceMatrix( + origins: Array<{ id: string; lat: number; lng: number }>, + destinations: Array<{ id: string; lat: number; lng: number }>, + units: "kilometers" | "meters" | "miles" = "kilometers" +): Array<{ originId: string; destinationId: string; distance: number }> { + const results: Array<{ originId: string; destinationId: string; distance: number }> = []; + + for (const origin of origins) { + for (const dest of destinations) { + const from = turf.point([origin.lng, origin.lat]); + const to = turf.point([dest.lng, dest.lat]); + const distance = turf.distance(from, to, { units }); + results.push({ originId: origin.id, destinationId: dest.id, distance }); + } + } + + return results.sort((a, b) => a.distance - b.distance); +} diff --git a/client/src/pages/GISWorkspace.tsx b/client/src/pages/GISWorkspace.tsx new file mode 100644 index 00000000..c11913b3 --- /dev/null +++ b/client/src/pages/GISWorkspace.tsx @@ -0,0 +1,354 @@ +/** + * GIS Workspace — Admin spatial analysis dashboard + * + * Embeds GeoLibre viewer + provides access to all spatial analysis tools: + * Field Collection, Spectral Index, Vector Analysis, Raster Analysis, + * H3 Grids, and Offline Tile Cache management. + */ +import { useState } from "react"; +import DashboardLayout from "@/components/DashboardLayout"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { trpc } from "@/lib/trpc"; +import { + Globe, Map, Layers, Ruler, Satellite, Database, + Download, Grid3X3, Hexagon, PenTool, Compass, BarChart3, + CloudOff, MapPin, Calculator, Maximize2, +} from "lucide-react"; + +type WorkspaceTab = "viewer" | "tools" | "collections" | "spectral" | "cache"; + +export default function GISWorkspace() { + const [activeTab, setActiveTab] = useState("viewer"); + const [isFullscreen, setIsFullscreen] = useState(false); + + const workspaceConfig = trpc.spatialAnalysis.getGISWorkspaceConfig.useQuery(); + const fieldCollections = trpc.spatialAnalysis.getFieldCollections.useQuery(); + const spectralHistory = trpc.spatialAnalysis.getSpectralHistory.useQuery({ limit: 10 }); + + const geolibreUrl = workspaceConfig.data?.geolibreEmbedUrl || "https://viewer.geolibre.app"; + + const tabs = [ + { id: "viewer" as const, label: "Map Viewer", icon: Globe }, + { id: "tools" as const, label: "Analysis Tools", icon: Ruler }, + { id: "collections" as const, label: "Field Collections", icon: MapPin }, + { id: "spectral" as const, label: "Crop Health", icon: Satellite }, + { id: "cache" as const, label: "Offline Areas", icon: CloudOff }, + ]; + + const analysisTools = [ + { + name: "Vector Analysis", + description: "Buffer, clip, dissolve, spatial join, Voronoi diagrams — all in-browser via Turf.js", + icon: PenTool, + color: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300", + href: "/spatial-vector-analysis", + }, + { + name: "Raster Analysis", + description: "Hillshade, slope, aspect, contours, zonal statistics from COG/GeoTIFF", + icon: Layers, + color: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300", + href: "/spatial-raster-analysis", + }, + { + name: "H3 Hexagonal Grid", + description: "Demand/supply heatmaps, distributor coverage optimization with H3 cells", + icon: Hexagon, + color: "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300", + href: "/spatial-h3-analysis", + }, + { + name: "Spectral Index Calculator", + description: "NDVI, NDWI, EVI, SAVI — crop health from Sentinel-2 and Landsat imagery", + icon: Satellite, + color: "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300", + href: "/spatial-spectral-index", + }, + { + name: "Field Collection", + description: "GPS capture of farm boundaries, crop observations, warehouse inspections", + icon: MapPin, + color: "bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300", + href: "/spatial-field-collection", + }, + { + name: "DuckDB Spatial SQL", + description: "In-browser spatial SQL queries on GeoJSON data — works offline", + icon: Database, + color: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300", + href: "/spatial-sql-workspace", + }, + { + name: "Offline Tile Cache", + description: "Download basemap tiles for offline use in areas with poor connectivity", + icon: Download, + color: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300", + href: "/spatial-tile-cache", + }, + { + name: "Distance Matrix", + description: "Calculate distances between farms and distributors for optimal matching", + icon: Compass, + color: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300", + href: "/spatial-distance-matrix", + }, + ]; + + return ( + +
+ {/* Header */} +
+
+ +
+

GIS Workspace

+

+ Spatial analysis powered by GeoLibre · MapLibre GL · PostGIS · Turf.js · H3 +

+
+
+
+ + + {workspaceConfig.data?.enabledTools?.length || 0} tools + + +
+
+ + {/* Tab bar */} +
+ {tabs.map(tab => ( + + ))} +
+ + {/* Content */} +
+ {activeTab === "viewer" && ( +
+ + +