Update README.md
This commit is contained in:
parent
3dceaa35e8
commit
bf82eeded0
1 changed files with 255 additions and 43 deletions
298
README.md
298
README.md
|
|
@ -1,54 +1,266 @@
|
||||||
# React + TypeScript + Vite
|
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
A lightweight React + GeoJSON based mapping interface designed to visualize, explore, and interact with geospatial datasets using modern web technologies.
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
## Problem
|
||||||
|
|
||||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
Geospatial datasets are often difficult to visualize without specialized GIS software. Analysts, developers, and researchers need a simpler, browser-based tool that can:
|
||||||
|
|
||||||
```js
|
* Load and display GeoJSON layers dynamically
|
||||||
export default tseslint.config({
|
* Visualize markers, regions, and polygons interactively
|
||||||
extends: [
|
* Switch between different map layers and base tiles
|
||||||
// Remove ...tseslint.configs.recommended and replace with this
|
* Integrate custom APIs for external data (e.g., legislation, statistics)
|
||||||
...tseslint.configs.recommendedTypeChecked,
|
* Provide an intuitive UI that works seamlessly without GIS expertise
|
||||||
// Alternatively, use this for stricter rules
|
|
||||||
...tseslint.configs.strictTypeChecked,
|
Traditional tools are either too heavy, too costly, or lack customization options for developers looking to embed maps in their applications.
|
||||||
// Optionally, add this for stylistic rules
|
|
||||||
...tseslint.configs.stylisticTypeChecked,
|
---
|
||||||
],
|
|
||||||
languageOptions: {
|
## Solution
|
||||||
// other options...
|
|
||||||
parserOptions: {
|
MapLayer provides an extensible React-based mapping application built using OpenLayers, capable of:
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
* Rendering GeoJSON datasets directly inside the browser
|
||||||
},
|
* Displaying multiple layers with controls for toggling visibility
|
||||||
},
|
* Adding marker overlays with custom interactivity
|
||||||
})
|
* Integrating external APIs (e.g., LegiScan API)
|
||||||
|
* Offering a clean UI for switching maps, searching, and navigating
|
||||||
|
* Deploying at scale using Docker, Jenkins, and containerized workflows
|
||||||
|
|
||||||
|
It enables quick visualization and experimentation with spatial datasets while staying lightweight and developer-friendly.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
### Core Features
|
||||||
|
|
||||||
|
* Load and visualize GeoJSON datasets with OpenLayers
|
||||||
|
* Multiple layer rendering (base maps, vector layers, custom overlays)
|
||||||
|
* Marker placement with custom interaction logic
|
||||||
|
* Search bar for querying map elements
|
||||||
|
* Modular component structure for easy extension
|
||||||
|
* Integration-ready API layer
|
||||||
|
|
||||||
|
### UI/UX Features
|
||||||
|
|
||||||
|
* Landing page and project-specific information pages
|
||||||
|
* Clean interactive mapping interface
|
||||||
|
* Dock-style UI elements for layer controls
|
||||||
|
* Responsive layouts using modern React patterns
|
||||||
|
|
||||||
|
### DevOps Features
|
||||||
|
|
||||||
|
* Dockerized build for consistent deployments
|
||||||
|
* Docker Compose support
|
||||||
|
* CI/CD automation using Jenkins pipelines
|
||||||
|
* Production-ready Vite bundling
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **Images**
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<img src="./frontend/screenshots/homepage.png" width="600" />
|
||||||
|
<img src="./frontend/screenshots/mainpage.png" width="600" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
## Folder Structure
|
||||||
|
|
||||||
|
```plaintext
|
||||||
|
maplayer/
|
||||||
|
└── frontend
|
||||||
|
└── public
|
||||||
|
├── vite.svg
|
||||||
|
└── src
|
||||||
|
└── assets
|
||||||
|
├── Address_Points.geojson
|
||||||
|
├── react.svg
|
||||||
|
└── components
|
||||||
|
└── Methods
|
||||||
|
├── GeoJson_Load.tsx
|
||||||
|
├── Layers.tsx
|
||||||
|
├── Marker.tsx
|
||||||
|
└── UI
|
||||||
|
├── another.tsx
|
||||||
|
├── Dock.css
|
||||||
|
├── Dock.tsx
|
||||||
|
├── Map_page.css
|
||||||
|
├── Map_page.tsx
|
||||||
|
├── LandingPage.tsx
|
||||||
|
├── LegiScanAPI.tsx
|
||||||
|
├── OpenLayerEsri.tsx
|
||||||
|
├── OpenLayerMap.tsx
|
||||||
|
├── Projectpage.tsx
|
||||||
|
├── SearchBar.tsx
|
||||||
|
├── App.css
|
||||||
|
├── App.tsx
|
||||||
|
├── index.css
|
||||||
|
├── main.tsx
|
||||||
|
├── vite-env.d.ts
|
||||||
|
├── .gitignore
|
||||||
|
├── Dockerfile
|
||||||
|
├── eslint.config.js
|
||||||
|
├── index.html
|
||||||
|
├── Jenkinsfile
|
||||||
|
├── package-lock.json
|
||||||
|
├── package.json
|
||||||
|
├── README.md
|
||||||
|
├── tsconfig.app.json
|
||||||
|
├── tsconfig.json
|
||||||
|
├── tsconfig.node.json
|
||||||
|
├── vite.config.ts
|
||||||
|
├── .gitattributes
|
||||||
|
├── docker-compose.yaml
|
||||||
|
├── package-lock.json
|
||||||
|
└── package.json
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
---
|
||||||
|
|
||||||
```js
|
## Tech Stack
|
||||||
// eslint.config.js
|
|
||||||
import reactX from 'eslint-plugin-react-x'
|
|
||||||
import reactDom from 'eslint-plugin-react-dom'
|
|
||||||
|
|
||||||
export default tseslint.config({
|
### Frontend
|
||||||
plugins: {
|
|
||||||
// Add the react-x and react-dom plugins
|
* React (TypeScript)
|
||||||
'react-x': reactX,
|
* Vite bundler
|
||||||
'react-dom': reactDom,
|
* OpenLayers for map rendering
|
||||||
},
|
* GeoJSON for dataset representation
|
||||||
rules: {
|
* Custom CSS for UI components
|
||||||
// other rules...
|
|
||||||
// Enable its recommended typescript rules
|
### DevOps & Deployment
|
||||||
...reactX.configs['recommended-typescript'].rules,
|
|
||||||
...reactDom.configs.recommended.rules,
|
* Docker for containerization
|
||||||
},
|
* Docker Compose for local orchestration
|
||||||
})
|
* Jenkins CI/CD pipeline
|
||||||
|
* Nginx (optional, for serving static builds)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Frontend (React + GeoJSON)
|
||||||
|
|
||||||
|
The frontend is built with Vite + React and organized into functional modules:
|
||||||
|
|
||||||
|
### Methods
|
||||||
|
|
||||||
|
* **GeoJson_Load.tsx**
|
||||||
|
Handles loading and parsing of GeoJSON datasets, converting them into OpenLayers vector sources.
|
||||||
|
|
||||||
|
* **Layers.tsx**
|
||||||
|
Manages creation, toggling, and rendering of OpenLayers map layers.
|
||||||
|
|
||||||
|
* **Marker.tsx**
|
||||||
|
Adds interactive marker overlays with custom styles.
|
||||||
|
|
||||||
|
### Mapping Components
|
||||||
|
|
||||||
|
* **OpenLayerMap.tsx**
|
||||||
|
Main OpenLayers implementation with map initialization, view configuration, and layer attachment.
|
||||||
|
|
||||||
|
* **OpenLayerEsri.tsx**
|
||||||
|
Optional integration for ESRI tiles/basemaps.
|
||||||
|
|
||||||
|
### UI Components
|
||||||
|
|
||||||
|
* **Dock.tsx**
|
||||||
|
UI menu for layer switching and actions.
|
||||||
|
|
||||||
|
* **Map_page.tsx**
|
||||||
|
Primary mapping interface.
|
||||||
|
|
||||||
|
* **SearchBar.tsx**
|
||||||
|
Search functionality (e.g., filter markers, search dataset, API queries).
|
||||||
|
|
||||||
|
### Supporting Pages
|
||||||
|
|
||||||
|
* Landing page
|
||||||
|
* Project information page
|
||||||
|
* LegiScan API integration page
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## DevOps & Deployment
|
||||||
|
|
||||||
|
MapLayer is designed to be production-ready with minimal configuration.
|
||||||
|
|
||||||
|
### Dockerfile
|
||||||
|
|
||||||
|
Defines a lightweight Node + Nginx pipeline for building and serving the application.
|
||||||
|
|
||||||
|
### docker-compose.yaml
|
||||||
|
|
||||||
|
Orchestrates services required to run the project locally, including:
|
||||||
|
|
||||||
|
* Frontend container
|
||||||
|
* Optional reverse proxy container
|
||||||
|
|
||||||
|
|
||||||
|
## Frontend Architecture
|
||||||
|
|
||||||
|
MapLayer follows a modular, scalable architecture:
|
||||||
|
|
||||||
|
1. **UI Layer**
|
||||||
|
Presentation components (Dock, Map Page, Search Bar).
|
||||||
|
|
||||||
|
2. **Map Logic Layer**
|
||||||
|
OpenLayers configuration (map object, layers, markers).
|
||||||
|
|
||||||
|
3. **Data Access Layer**
|
||||||
|
GeoJSON loader, external API services (LegiScan API).
|
||||||
|
|
||||||
|
4. **Asset Layer**
|
||||||
|
GeoJSON files, icons, static resources.
|
||||||
|
|
||||||
|
5. **Configuration Layer**
|
||||||
|
Vite and TypeScript configs.
|
||||||
|
|
||||||
|
This separation makes the project easy to scale and adapt to new features.
|
||||||
|
|
||||||
|
|
||||||
|
## High-Level Architecture Diagram
|
||||||
|
|
||||||
|
```plaintext
|
||||||
|
+-------------------------+
|
||||||
|
| Client (UI) |
|
||||||
|
| React + OpenLayers |
|
||||||
|
+-----------+-------------+
|
||||||
|
|
|
||||||
|
v
|
||||||
|
+-------------------------+
|
||||||
|
| Mapping Engine |
|
||||||
|
| OpenLayers Logic |
|
||||||
|
+-----------+-------------+
|
||||||
|
|
|
||||||
|
v
|
||||||
|
+-------------------------+
|
||||||
|
| GeoJSON Data Layer |
|
||||||
|
| Local assets or APIs |
|
||||||
|
+-----------+-------------+
|
||||||
|
|
|
||||||
|
v
|
||||||
|
+-------------------------+
|
||||||
|
| External Services |
|
||||||
|
| Example: LegiScan API |
|
||||||
|
+-------------------------+
|
||||||
|
|
||||||
|
+-------------------------+
|
||||||
|
| Deployment Layer |
|
||||||
|
| Docker + Jenkins + Nginx|
|
||||||
|
+-------------------------+
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Key Advantages
|
||||||
|
|
||||||
|
* Lightweight and fast due to React + Vite
|
||||||
|
* Highly customizable OpenLayers engine
|
||||||
|
* Easy to integrate external APIs
|
||||||
|
* Full support for GeoJSON datasets
|
||||||
|
* Completely containerized for reliable deployments
|
||||||
|
* Modular structure suitable for scaling into a full GIS dashboard
|
||||||
|
* Developer-friendly with TypeScript, linting, and formatted code
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue