Skip to content

Latest commit

 

History

History
151 lines (130 loc) · 3.69 KB

README.md

File metadata and controls

151 lines (130 loc) · 3.69 KB
Raw

Interactive Map

  1. Features
  2. Technologies and libraries used
  3. Project structure
  4. Start project
  5. ENV variables

Features

Area Map Page

  • creation area
  • show pop-up with zone selection
  • save or cancel the created area
  • deleting area
  • editing area

Area Identification Page

  • entering longitude and latitude
  • output of found areas

Grid Map Page

  • creation grid
  • displaying a popup with the title input, the number of columns and the number of lines
  • save or cancel the created grid
  • deleting grid

Grid Identification Page

  • entering longitude and latitude
  • output of found grid cell

Server

  • create area
  • update area
  • delete area
  • get area list
  • get zone list
  • search area by coordinates
  • create grid
  • delete grid
  • search grid cell by coordinates

Technologies and libraries used

  • React
  • Leaflet
  • Turf
  • Axios
  • Leaflet geoman
  • Express
  • MySQL

Project structure

├── src/                            # Client
|   ├── api/                        # Services for API interactions
|   ├── components/                 # React components
|   ├── map-controls/               # Leaflet controls
|   ├── pages/                      # Pages
|   ├── utils/                      # Utils
|   ├── App.js                      # Main component
|   ├── index.js                    # Enter component
|   └── index.scss                  # Styles css
└── server/                         # Server
    ├── components/                 # App components
    |   ├── area/
    |   ├── zone/
    |   └── grid/
    ├── config/                     # App config
    ├── middlewares/                # App middlewares
    ├── routes/                     # App routes
    └── db.js                       # Database connection

Start project

  1. Rename the file .env.example to .env and enter all the necessary variables in it, the list below
  2. Install all dependencies npm i

Npm scripts:
npm run dev - Run project in development mode
npm run production - Run project in production mode
npm run build - Build project

ENV variables

name type required default description
SERVER_PORT Number false 5000
REACT_APP_MAPBOX_TOKEN String true Mapbox token, required for map tiles (https://docs.mapbox.com/help/how-mapbox-works/access-tokens/)
DB_HOST String true Database host
DB_USER String true Database user
DB_PASSWORD String true Database password
DB_NAME String true Database name
DB_PORT Number false 3306 Database port