POC_GIS

POC_GIS is a static browser-based GIS proof-of-concept for viewing, drawing, editing, exporting, and analyzing GeoJSON data.

Current stack:

• Vite
• TypeScript
• MapLibre GL JS
• Terra Draw
• OpenFreeMap
• GitHub Pages

The project does not require a Google Maps API key.

---

Features

Viewer

• Import local GeoJSON/JSON files.
• Load the bundled sample map.
• Render points, lines, polygons, and multi-geometries.
• Use a label-free basemap so imported GIS layers stay visually clear.
• Center imported data with moderate zoom and explain focused viewport behavior.
• Render GeoJSON styles from properties such as fillColor, fill, strokeColor, stroke, fillOpacity, strokeOpacity, and strokeWidth.
• Build, import, edit, apply, and download chart JSON.
• Link popup charts by GeoJSON properties.name and chart charts[].country_name.
• Use per-feature chart unit, caption, and max value.
• Print the map view.

Drawer

• Draw points, open lines, closed polyline regions, polygons, rectangles, and freehand areas.
• Select and edit features where supported by Terra Draw.
• Import existing GeoJSON into the drawing workspace.
• Flatten Multi* geometries into editable simple features with clear user warning.
• Edit selected-feature properties using fixed standard fields and validated custom metadata.
• Edit marker labels through normal form fields.
• Show a live advanced JSON preview.
• Export clean GeoJSON without internal drawing metadata.
• Add, move, scale, rotate, and adjust image overlays.
• Use app-level undo/redo for completed editing actions.
• Fit the map to current features and copy GeoJSON output.

Tools

• Build a GeoJSON point from latitude/longitude.
• Parse coordinate lines.
• Inspect GeoJSON files for feature counts, geometry types, property keys, feature names, unnamed features, bounds, and viewport behavior.
• Export feature names as CSV.
• Generate starter chart JSON from feature names.

---

Project structure

src/app              App shell and hash router
src/config           Environment and map style configuration
src/core             Shared types, constants, utilities
src/features/map     MapLibre map, GeoJSON layers, image overlays
src/features/drawing Terra Draw integration and draw-mode services
src/features/geojson GeoJSON parsing, loading, bounds, exporting
src/features/charts  In-app chart model, builder, and popup rendering
src/features/coordinates Coordinate helpers
src/pages            Viewer, drawer, tools, docs pages
src/styles           Application CSS
docs                 Usage documentation
public               Static GeoJSON, JSON, icons, favicon

---

Requirements

• Node.js 20+ recommended
• npm
• Modern browser with WebGL support

---

Install

npm install

---

Run locally

npm run dev

Open the local URL shown by Vite, then use:

/#viewer
/#drawer
/#tools
/#docs

---

Optional map style configuration

Copy the sample environment file:

cp .env.example .env

Default style:

VITE_MAP_STYLE_URL=https://tiles.openfreemap.org/styles/liberty

Other OpenFreeMap styles can be used, for example:

VITE_MAP_STYLE_URL=https://tiles.openfreemap.org/styles/positron
VITE_MAP_STYLE_URL=https://tiles.openfreemap.org/styles/bright
VITE_MAP_STYLE_URL=https://tiles.openfreemap.org/styles/dark

The app hides basemap label layers after the style loads so imported GIS layers remain visually dominant. Status messages remain visible until manually closed.

---

Test and validate

npm run typecheck
npm test
npm run validate
npm run build

The automated checks cover project structure, data parsing, required source conditions, configuration, and documentation presence. Browser drawing interactions still require manual testing.

---

Build

npm run build

Output:

dist/

---

GitHub Pages deployment

The project is configured for the repository path:

/POC_GIS/

Expected GitHub Pages URL:

https://talmurshidi.github.io/POC_GIS/

In GitHub:

Repository → Settings → Pages → Build and deployment → Source → GitHub Actions

Then push to main. The workflow at .github/workflows/deploy.yml builds and deploys the app.

---

Documentation

• PROJECT_REQUIREMENTS.md — current project requirements.
• REQUIREMENTS_AUDIT.md — detailed requirements audit for the current version.
• DATA_SCHEMA_AUDIT.md — detailed data schema, properties, chart model, and import/export audit.
• TEST_REPORT.md — test commands, results, limitations, and manual checklist.
• docs/USAGE_GUIDE.md — user-facing guide for Viewer, Drawer, Tools, and Docs.

---

Notes

• This is a static app. It does not save drawings to a server.
• Exported GeoJSON is downloaded locally in the browser.
• Image overlays are temporary tracing/reference layers and are not exported to GeoJSON.
• For heavy production traffic, review your tile provider's usage policy or self-host map tiles.

Viewer chart windows

The Viewer supports multiple draggable SVG chart windows. Use Close All Charts to clear them, and use the Chart Display panel to control captions, legends, values, axes, grid, tooltips, and whether new charts replace existing ones. These preferences are retained in local storage. The map legend can be resized and scrolled; printing uses a landscape layout with the legend below the map.