- Simple password protected
- Europe map divided into transport zones
- On hover zone highlighted on the map
- On hover zone show popup with information about companies
- On click zone show detail information in side card
- Getting information about companies from google sheet
- React
- Mapbox
- Turf
- TableTop
└── src/ # Main folder
├── api/ # Services for API interactions
├── assets/ # App assets (geojson, fonts)
├── components/ # React components
├── controls/ # Mapbox controls
├── layers/ # Mapbox layers
└── popup/ # Mapbox popup
App.tsx # Main component
index.scss # Styles css
| variable | description |
|---|---|
| REACT_APP_MAPBOX_TOKEN | Mapbox token (https://docs.mapbox.com/help/how-mapbox-works/access-tokens/) |
| REACT_APP_PASSWORD | App enter password |
| REACT_APP_GOOGLE_SHEET_URL | Google sheet url |
We have 3 sheets:
- Zones
- Carriers
- Utils
IMPORTANT! DO NOT CHANGE THIS LIST
List of zone codes. Used to connect table and application data.
IMPORTANT! Do not change fields marked in gray
The first column is auxiliary code, taken from the utils table.
For each zone, you can add the required characteristic and the transport company for it. To do this, you need to add a column. In the first line, you need to indicate the name of the characteristic (for example, 1 - 30kg). It is very important that the characteristic on the first line is unique. If you need to add several companies for one characteristic, use different names for example (> 2500 kg 1, > 2500 kg 2). Indicate the transport company for the desired zone. It is very important that the company name coincides with the name in the carriers tab, for this a drop-down list has been made.
IMPORTANT! Change the fields marked in gray with care, the carrier's name must match the name in the zone table
Carrier information for the zone is taken from this table. You can edit all information about a carrier, add and remove carriers.