Skip to content

Map components should consume OGC API - Features endpoints #161

Description

@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

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions