Demo · 8 September 2026

Settlements UI

A frontend GIS for settlement and territory boundaries. MapLibre renders the map, while React and MobX connect the list, detail card, geometry editor and import flow. The public in-memory adapter reproduces the backend contract with synthetic data and complete validation in both import modes.

Demo ↗Documentation →The source repository is private
Repository history: since February 2025. Public demo: 7 September 2026.Version 5c5466fa16 interface screenshots

Vladimir: detailed city outline and record

01 / The task

Polygon editor with GeoJSON import

The task was to preserve the original GIS interface while removing corporate endpoints and data and providing a safe public workflow. The demo supports viewing, editing, export, bulk import and import scoped to the selected territory.

Use case: Editing city, district and other territorial boundaries.

Work done

  • Object records, map layers and geometry editing.
  • React/MobX integration with MapLibre and Mapbox Draw. Geometry import and export.
  • Added a demo adapter in place of the corporate API. Removed production data and private registry dependencies.
  • Deployment, layout fixes, bulk import checks and an OpenStreetMap boundary dataset.

02 / Implementation

What sets the implementation apart

Bulk mode reads OKTMO from each feature with a contextual fallback. Settlement mode forces the opened card OKTMO and keeps a separate file list. Polygon and MultiPolygon pass CRS, size, vertex and topology checks; invalid geometry can be edited or skipped, and reapplying a file does not duplicate objects.

Screenshots

Screens, forms, errors

Screenshots, diagrams and source evidence retain their original language; captions and descriptions are translated.

03 / Technology

Stack

React / TypeScript 46.3%GeoJSON import / TypeScript 31.7%MapLibre / TypeScript 17.5%MobX / data adapters 4.5%

Shares use Git application-file bytes at pinned revisions. Each file belongs to one subsystem under scripts/generate-stack-share.mjs rules; tests, assets, dependencies and generated files are excluded. Rounded to 0.1%. This describes code composition, not proficiency.

React / MobX

Original screens, state and import

MapLibre / Mapbox Draw

Map basemap, layers and geometry editing

GeoJSON / WKB

Validation, upload and export

04 / Decisions

How the project works

  • The original sppi-dark theme: dark background, yellow controls and original status colors.
  • MapLibre loads standard OpenStreetMap tiles. Attribution is included; bulk map downloads and offline caching are not implemented.
  • The original FilesScreen → PolygonsScreen → PolygonEditScreen flow runs through a local adapter for OData and geo-import contracts.
  • Imports are validated and previewed first. Applying an import transfers only valid polygons to the main editor; applying it again does not duplicate the same importId.
  • Standalone styles share the .sppi-dark scope: original colors, consistent SVG icons, 40 px actions and responsive file cards. ResizeObserver keeps MapLibre in sync with panel and viewport changes.
  • OpenStreetMap outlines are simplified with topology preserved: 54 territories, 21,421 vertices and 7 MultiPolygons. Regions, districts and cities have different opacity; original control and status colors are preserved.
Components and integration boundaries
Components and integration boundaries

05 / Verification

Demo workflows

  1. Find Vladimir, Suzdal, Nizhny Novgorod, Suzdalsky District or Vladimir Oblast; open its record and zoom to the outline.
  2. Download the 54-territory dataset, upload it through bulk import and validate all geometries.
  3. Open a file: polygon list, statuses, filters and a map of the combined boundaries.
  4. Open a polygon: edit it, restore the original geometry, explicitly skip it and save.
  5. Fix or skip errors, select “Apply import”, close the module and export the result from the main editor.
  6. Reset the example; check that another tab did not receive the imported files.

Check results

  • The static build is served by shared Nginx; GIS has no separate backend process on the VPS.
  • 54 objects; 21,421 vertices after simplification, 76–926 per object, up to 480 per ring. These describe the dataset, not boundary accuracy.
  • In one Chromium check of the published version: first list 1.80 s, import of 54 territories 0.66 s. This measures the interface on the test machine; it is not a load test or an SLA.

Limitations

  • Only the backend is replaced with tab memory. The server-side OData/PostGIS service is not connected; the original repository remains private.
  • Adapter limits: 20 files, 500 polygons per file, 1,000 per session; file text up to 5 MB. Polygon/MultiPolygon and EPSG:4326/3857 are supported.
  • Imported data disappears after reloading. GeoJSON export lets you save the result locally.
  • OpenStreetMap tiles load from an external server. The basemap needs that server to be available.
  • OSM boundaries are simplified for editing and are not cadastral data. Cities use place=city/town outlines; districts and regions use boundary=administrative. OKTMO codes are for demonstration. The source and ODbL license are stated in the demo and downloadable GeoJSON.

Technical notes

Modules, API, data model, setup and check results.

Documentation →Materials ↓