agviewermap-react 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -0
- package/dist/agviewermap-react.js +65394 -0
- package/dist/agviewermap-react.umd.cjs +984 -0
- package/dist/style.css +1 -0
- package/dist/vite.svg +1 -0
- package/package.json +87 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Geospatial Data Visualization Tool
|
|
2
|
+
|
|
3
|
+
A tool designed to visualize geospatial data on a map, integrating custom layers fetched from a REST API, and displaying relevant time-series data. This project is built using React, with `react-map-gl` for map integration.
|
|
4
|
+
|
|
5
|
+
## Project Setup
|
|
6
|
+
|
|
7
|
+
To run this project locally, you'll need the following:
|
|
8
|
+
|
|
9
|
+
1. **MapTiler API Key** for basemap style
|
|
10
|
+
2. **Sentinel Hub Client ID and Secret** for fetching data and imagery from sentinel hubs
|
|
11
|
+
|
|
12
|
+
the following environment variables are required:
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
VITE_MAPTILER_ACCESS_KEY=your-maptiler-key
|
|
16
|
+
VITE_SENTINAL_HUB_CLIENT_ID=your-sentinal-hub-api-key
|
|
17
|
+
VITE_SENTINAL_HUB_CLIENT_SECRET=your-sentinal-hub-client-secret
|
|
18
|
+
VITE_SENTINAL_HUB_WMTS_ID=sentinal-hub-wmts-layer-id
|
|
19
|
+
VITE_AGV_API_USERNAME=your_username
|
|
20
|
+
VITE_AGV_API_PASSWORD=your_password
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Steps to Setup:
|
|
24
|
+
|
|
25
|
+
1. **Rename `env.example` to `.env`.**
|
|
26
|
+
2. **Paste the API keys and credentials into the `.env` file.**
|
|
27
|
+
3. in the project directory, run `yarn install` in order to install required packages
|
|
28
|
+
4. run `yarn dev` to start the development server
|
|
29
|
+
5. goto `localhost:3000` and you shall see the app running.
|
|
30
|
+
|
|
31
|
+
### USage example
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
<AgvMap
|
|
35
|
+
configs={{
|
|
36
|
+
VITE_MAPTILER_ACCESS_KEY: your-value,
|
|
37
|
+
VITE_SENTINAL_HUB_CLIENT_ID: your-value,
|
|
38
|
+
VITE_SENTINAL_HUB_CLIENT_SECRET: your-value,
|
|
39
|
+
VITE_SENTINAL_HUB_WMTS_ID: your-value,
|
|
40
|
+
}}
|
|
41
|
+
|
|
42
|
+
requestHeaders={{
|
|
43
|
+
Authentication: your-value
|
|
44
|
+
}}
|
|
45
|
+
|
|
46
|
+
>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Project Goal
|
|
50
|
+
|
|
51
|
+
Implement a map component with custom layers fetched from a REST API, to be integrated into a dashboard for visualization and analysis.
|
|
52
|
+
|
|
53
|
+
## Observations
|
|
54
|
+
|
|
55
|
+
- A marker may belong to a farm, and a farm can have multiple markers.
|
|
56
|
+
- a farm can have many plots
|
|
57
|
+
|
|
58
|
+
## FAQs
|
|
59
|
+
|
|
60
|
+
- **Why does the backend throw a CORS error?**
|
|
61
|
+
- Only port 3000 is allowed on the backend.
|
|
62
|
+
- **What is the difference between forecast markers and station markers?**
|
|
63
|
+
- If a marker is associated with a device, it represents a station marker. Forecast markers, on the other hand, are not associated with devices, and their data is fetched from a third-party service.
|