Frontend & Dashboards
Build a custom UI on top of the platform — a farmer-facing dashboard, an advisory console, a public-facing map.
What you need
- An OpenID Connect client registered with the platform — see Signing in apps.
- A map library — MapLibre GL JS, Leaflet, or OpenLayers.
- A familiarity with Spatio-Temporal API and the digital farm API.
API building blocks
| You want… | Use… |
|---|---|
| A basemap raster tile layer | GET /api/v2/collections/{id}/tiles/WebMercatorQuad/{z}/{x}/{y} — PNG |
| TileJSON for the client | GET /api/v2/collections/{id}/tiles/WebMercatorQuad/tilejson.json?layers=NDVI |
| A vector layer (farms, fields, samples) | GET /api/v2/collections/{id}/tiles/WebMercatorQuad-Vector/{z}/{x}/{y} — MVT |
| A queryable feature list | GET /api/v2/collections/{id}/items — bbox, datetime, CQL2 filter, sortby, facetby |
| A raster overlay (NDVI, soil parameter) | A Zarr layer rendered as tiles — see TileJSON above |
| A live time-series chart | Sensor Things API observations — REST or MQTT |
| A time-series chart over an area | /api/v2/collections/{id}/aggregate/time-series |
| A summary statistic over an area | /api/v2/collections/{id}/aggregate/summary |
| A STAC browser | GET /api/v2/stac/ |
| An audit trail of operations | /audit-logs and /activities of the digital farm API |
Recommended client libraries
- MapLibre GL — the platform auto-generates a MapLibre style per
collection (
GET /collections/{id}/style). Drop the TileJSON in as a source and you're done. - Leaflet with
leaflet-vector-tile-layer(MVT) or the raw raster TileJSON URL. - pystac-client or stac-browser for STAC.
- chart.js / uPlot for the time-series response from the aggregations endpoints.
Auth in the browser
Use the authorization code flow with PKCE, and keep tokens out of the browser where you can: a backend that holds the session and gives the browser only a cookie is the safest pattern (see Signing in apps). Tokens are short-lived; refresh them on the server. Each service says in its reference which audience its tokens must name.
Reference implementation
The GeoAI Decision Support System (Telangana) is the canonical example: state-level NDVI overview → mandal-level parameter detail → individual field detail, with a pin tool, timeline, and AI-output overlays.