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