Map components should consume OGC API - Features endpoints

[kbighorse]

Summary

Refactor OcotilloUI map components to consume the new OGC API - Features endpoints from NMSampleLocations instead of the current /geospatial endpoint. This enables a single, standard API for both web (OcotilloUI) and desktop (QGIS) GIS clients.

Related Issue

• API should expose OGC API - Features endpoints for QGIS integration OcotilloAPI#333 - API should expose OGC API - Features endpoints for QGIS integration

Current Implementation

// pages/ocotillo/map/list.tsx
const useLayer = (thing_type: string, label: string, color: string) => {
  const { data, isLoading } = useOne({
    dataProviderName: 'ocotillo',
    resource: 'geospatial',
    id: null,
    meta: {
      requestConfig: {
        params: {
          thing_type: thing_type,  // Custom param
          format: 'geojson',
        },
      },
    },
  })
  return { sourceProps: { type: 'geojson', data: data?.data }, ... }
}

Endpoint: GET /geospatial?thing_type=water+well&format=geojson

Proposed Implementation

const useOgcLayer = (collection: string, label: string, color: string) => {
  const { data, isLoading } = useOne({
    dataProviderName: 'ocotillo',
    resource: `ogc/collections/${collection}/items`,
    id: null,
    meta: {
      requestConfig: {
        params: {
          limit: 10000,
          // bbox: mapBounds  // Enable viewport-based loading
        },
      },
    },
  })
  return { sourceProps: { type: 'geojson', data: data?.data }, ... }
}

// Usage
const defaultLayers = {
  'water-wells': useOgcLayer('wells', 'Water Wells', '#9cd0ab'),
  'springs': useOgcLayer('springs', 'Springs', '#f0c0a0'),
  'ephemeral-streams': useOgcLayer('ephemeral-streams', 'Ephemeral Streams', '#f5df73'),
  // ...
}

Endpoint: GET /ogc/collections/wells/items?limit=10000

Benefits

Benefit	Description
Single API	One endpoint for both QGIS and OcotilloUI
Standard interface	OGC API - Features is an open standard
Viewport loading	bbox param enables load-as-you-pan
Pagination	Handle large datasets without timeout
Less maintenance	Deprecate custom /geospatial endpoint

Files to Modify

• src/pages/ocotillo/map/list.tsx - Main map view
• src/pages/amp/locations/show.tsx - Location detail map
• src/pages/amp/querybuilder/index.tsx - Query builder map
• src/components/form/location/CreateEditLocation.tsx - Location form map
• src/components/form/group/CreateEditGroup.tsx - Group form map

Optional Enhancement: OGC Client Library

Could use @ogcapi-js/features for standardized OGC API consumption:

import { Features } from '@ogcapi-js/features'

const ogcClient = new Features(settings.ocotillo_api_url + '/ogc')

const useOgcLayer = (collection: string) => {
  const [data, setData] = useState<FeatureCollection | null>(null)
  const mapBounds = useMapBounds()
  
  useEffect(() => {
    ogcClient.getFeatures(collection, { 
      bbox: mapBounds,
      limit: 1000 
    }).then(fc => setData(fc))
  }, [collection, mapBounds])
  
  return { data, isLoading: !data }
}

Acceptance Criteria

• Map view loads features from /ogc/collections/{type}/items
• All existing layer types work (wells, springs, streams, etc.)
• Pagination works for large datasets
• Optional: Viewport-based loading with bbox parameter
• /geospatial endpoint deprecated (after migration complete)

Dependencies

• NMSampleLocations#333 must be completed first (OGC API implementation)

Estimate

~1 day (after OGC API is available)