Skip to content

Admin UI

Sanson includes a web administration interface built with React, Tailwind CSS, and MapLibre GL JS. It runs on port 5173 in development and can be served by the API in production.

Dashboard

The dashboard provides an overview of your Sanson instance:

  • Total workspaces, collections, and features
  • PostgreSQL / PostGIS connection status
  • Recent import jobs with their status

Workspaces

Manage workspaces to organize your collections by theme or project:

  • Create, rename, and delete workspaces
  • Collection count per workspace (clickable to navigate to collections filtered by workspace)
  • A default workspace is always available

Collections

Browse and manage your geographic collections:

  • List all collections with feature count, geometry type, and bounding box
  • Click a collection to access its detail view

Collection detail

The collection detail page has seven tabs, in order: Map, Data, Schema, Style, Settings, API, History.

Map — interactive map powered by MapLibre GL JS with vector tile rendering. Features:

  • Opens directly on the configured Map default view (Settings → Map defaults) when one is set; otherwise auto-zooms to the collection extent (fitBounds)
  • Fit bounds button (top-left) to re-center the map on the collection extent
  • Basemap switcher (top-left) with three options: Light (CartoDB grayscale, default), OSM (OpenStreetMap), Satellite (Esri World Imagery)
  • Feature inspection on click (popup with all properties)
  • Legend overlay when a style is configured

Data — tabular browser with live filters and a built-in exporter:

  • CQL2 filter and bounding box inputs (WGS84 lon/lat) applied together; the table updates to show what matches
  • "Showing X of Y features" counter, with a — filtered hint when filters are active
  • Export dropdown (top-right): choose GeoJSON or CSV format and an optional limit, then download. The export reuses the active CQL2 + bbox filters, so what you see is what you export.
  • Pagination through the matched features

Schema — lists all columns in the collection's data table with their PostgreSQL types and basic statistics (distinct values, null count).

Style — configure how the collection is rendered on the map:

  • Single — one color for all features, with color picker and opacity slider
  • Categorized — map unique values of a column to colors (auto-classify from data)
  • Graduated — map numeric ranges to a color ramp (quantile or equal interval, configurable number of classes)
  • Color palette selector (blues, greens, reds, oranges, purples, spectral, qualitative)
  • Per-entry color override and optional labels
  • Stroke controls — toggle border visibility, set color and width (0.5–5px)
  • Fill opacity slider
  • Live map preview alongside the editor

Settings — collection metadata and API behaviour. The tab has a left sidebar with three sections, each with its own Save button:

  • General — Workspace (move the collection), Description, Attribution, Datetime column (the column that drives the OGC ?datetime= filter)
  • Fields — choose which columns are exposed in the OGC API, with optional aliases. See Exposed Fields.
  • Map defaults — pick a default center and zoom level for the Map and Style tabs. The interactive map plus the Capture current view button records the camera; clear the three values to fall back to fitBounds.

API — copy-paste curl examples for every endpoint of the collection (metadata, queryables, items, single feature, vector tile), with placeholders pre-filled for this collection. Buttons to export the full set as a Postman or Bruno collection.

History — import history for the collection: date, source file, status, progress, feature count, duration.

Data Import

The import page handles file uploads and shows real-time progress:

  1. Select a GeoJSON, CSV, or Shapefile (.zip) file
  2. A preview panel appears alongside the form showing:
    • Metadata badges (format, feature count, geometry type, SRID, CSV separator/geo columns)
    • Mini-map with sample features (first 100, powered by MapLibre GL)
    • Sample data table (first 5 rows with column types)
    • Form fields are auto-filled from the preview (SRID for shapefiles, separator/geo columns for CSV)
  3. Choose the workspace and set the collection name
  4. Optionally adjust SRID and format-specific options (CSV separator, geo columns)
  5. Click Import — the file is uploaded and a background job is queued
  6. The progress view shows status, progress bar, feature count, and live logs
  7. On success, click View collection to explore the imported data

The bottom of the page shows the full import history across all collections, filterable by status.

API Explorer

An interactive API documentation page powered by Scalar. It displays the OpenAPI 3.0 specification auto-generated by Fastify, and allows testing any endpoint directly from the browser.

Running the admin UI

In development:

bash
pnpm --filter @sanson/admin dev

The Vite dev server on port 5173 proxies API calls (/api, /collections, /conformance, /health) to the backend on port 3000.

Released under the MIT License.