Start Mapping & More

frontend/.env.sample

@@ -1,46 +1,111 @@
-VITE_BASE_API_URL = 'http://localhost:8000/api/v1/' # backend api url
+# The backend api endpoint url.
+# Data type: String (e.g., http://localhost:8000/api/v1/).
+# Default value: http://localhost:8000/api/v1/.
+# Note: Ensure CORs is enabled in the backend and access if given to your port.
+VITE_BASE_API_URL = 'http://localhost:8000/api/v1/'
+
+# The matomo application ID.
+# Data type: Positive Integer (e.g., 0).
+# Default value: 0.
 VITE_MATOMO_ID = 0 
+
+# The matomo application domain.
+# Data type: String (e.g., subdomain.hotosm.org).
+# Default value: subdomain.hotosm.org.
 VITE_MATOMO_APP_DOMAIN = "subdomain.hotosm.org"
 
-# The maximum allowed area size (in square meters) for training areas.
-# Data type: Positive Integer e.g 500000
-MAX_TRAINING_AREA_SIZE = 
+# The cache duration for polling the backend for updated statistics, in seconds.
+# Data type: Positive Integer (e.g., 900).
+# Default value: 900 seconds (15 minutes).
+# Note: If this value changes on the backend, please update it here to avoid unnecessary polling.
+VITE_KPI_STATS_CACHE_TIME = 900
 
-# The minimum allowed area size (in square meters) for training areas.
-# Data type: Positive Integer e.g 500000
-MIN_TRAINING_AREA_SIZE =
+# The maximum allowed area size for training areas, measured in square meters.
+# Data type: Positive Integer (e.g., 5000000).
+# Default value: 5000000 square meters (5 square kilometers).
+VITE_MAX_TRAINING_AREA_SIZE = 5000000
 
-# The maximum file size (in bytes) allowed for training area upload.
-# Data type: Positive Integer e.g 500000
-MAX_TRAINING_AREA_UPLOAD_FILE_SIZE =
+# The minumum allowed area size for training areas, measured in square meters.
+# Data type: Positive Integer (e.g., 5797).
+# Default value: 5797 square meters.
+VITE_MIN_TRAINING_AREA_SIZE = 5797
+
+# The maximum file size allowed for training area upload, measure in bytes.
+# Data type: Positive Integer (e.g., 500000).
+# Default value: 5242880 bytes (5 MB).
+VITE_MAX_TRAINING_AREA_UPLOAD_FILE_SIZE = 5242880
 
 # The current version of the application.
 # This is used in the OSM redirect callback when a training area is opened in OSM.
-# Data type: String e.g 'v1.1'
-FAIR_VERSION = 
-
-# Comma separated hashtags to add to the OSM ID Editor redirection
-# Data type: String e.g '#HOT-fAIr, #AI-Assited-Mapping'
-OSM_HASHTAGS = 
+# Data type: String (e.g., v1.1).
+# Default value: "v0.1".
+VITE_FAIR_VERSION =  "v0.1"
 
+# Comma separated hashtags to add to the OSM ID Editor redirection.
+# Data type: String (e.g., '#HOT-fAIr, #AI-Assited-Mapping').
+# Default value: `FAIR_VERSION`.
+VITE_OSM_HASHTAGS = 
 
 # The maximum zoom level for the map.
-# Data type: Positive Integer e.g 22. Must be between 0 - 24
-MAX_ZOOM_LEVEL = 
-
-# The minimum zoom level to show the training area labels.
-# Data type: Positive Integer e.g 18. Must be between 0 - 24
-TRAINING_LABELS_MIN_ZOOM_LEVEL =
-
-# Training area and labels styles.
-# Opacities are between 0 and 1 . E.g 0.5
-# Widths must be Positive Integers e.g 1, 2 etc.
-# Colors must be hex codes or valid colors. E.g 'red', 'green', '#fff'
-TRAINING_AREAS_AOI_FILL_COLOR =
-TRAINING_AREAS_AOI_OUTLINE_COLOR =
-TRAINING_AREAS_AOI_OUTLINE_WIDTH =
-TRAINING_AREAS_AOI_FILL_OPACITY =
-TRAINING_AREAS_AOI_LABELS_FILL_OPACITY =
-TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH =
-TRAINING_AREAS_AOI_LABELS_FILL_COLOR =
-TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR =
+# Data type: Positive Integer (e.g., 22).
+# Note: Value must be between 0 - 24.
+# Default value: 22.
+VITE_MAX_ZOOM_LEVEL = 22
+
+# The minimum zoom level before enabling the prediction button and other functionalities in the start mapping page.
+# Data type: Positive Integer (e.g., 22).
+# Note: Value must be between 0 - 24.
+# Default value: 19.
+VITE_MIN_ZOOM_LEVEL_FOR_START_MAPPING_PREDICTION = 19
+
+# The minimum zoom level before enabling the training area labels in the training area map.
+# Data type: Positive Integer (e.g., 22).
+# Note: Value must be between 0 - 24.
+# Default value: 18.
+VITE_MIN_ZOOM_LEVEL_FOR_TRAINING_AREA_LABELS = 18
+
+# The fill color for the training area AOI rectangles.
+# Data type: String (e.g., "#247DCACC").
+# Note: Colors must be hex codes or valid colors. e.g 'red', 'green', '#fff'.
+# Default value: #247DCACC.
+VITE_TRAINING_AREAS_AOI_FILL_COLOR = "#247DCACC"
+
+# The outline color for the training area AOI rectangles.
+# Data type: String (e.g., "#247DCACC").
+# Note: Colors must be hex codes or valid colors. e.g 'red', 'green', '#fff'.
+# Default value: #247DCACC.
+VITE_TRAINING_AREAS_AOI_OUTLINE_COLOR = "#247DCACC"
+
+# The outline width for the training area AOI rectangles.
+# Data type: Positive Integer (e.g., 3).
+# Default value: 4.
+VITE_TRAINING_AREAS_AOI_OUTLINE_WIDTH = 4
+
+# The fill opacity for the training area AOI rectangles.
+# Data type: Float (e.g., 0.4).
+# Note: Value must be between 0 and 1.
+# Default value: 0.4.
+VITE_TRAINING_AREAS_AOI_FILL_OPACITY = 0.4
+
+# The fill opacity for the training area AOI labels.
+# Data type: Float (e.g., 0.4).
+# Note: Value must be between 0 and 1.
+# Default value: 0.3.
+VITE_TRAINING_AREAS_AOI_LABELS_FILL_OPACITY = 0.3
+
+# The outline width for the training area AOI labels.
+# Data type: Positive Integer (e.g., 3).
+# Default value: 2.
+VITE_TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH = 2
+
+# The fill color for the training area AOI labels.
+# Data type: String (e.g., "#247DCACC").
+# Note: Colors must be hex codes or valid colors. e.g 'red', 'green', '#fff'.
+# Default value: #D73434.
+VITE_TRAINING_AREAS_AOI_LABELS_FILL_COLOR = "#D73434"
+
+# The outline color for the training area AOI labels.
+# Data type: String (e.g., "#247DCACC").
+# Note: Colors must be hex codes or valid colors. e.g 'red', 'green', '#fff'.
+# Default value: #D73434.
+VITE_TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR = "#D73434"

frontend/package.json

@@ -17,22 +17,26 @@
     "@terraformer/wkt": "^2.2.1",
     "@turf/area": "^7.1.0",
     "@turf/bbox": "^7.1.0",
+    "@turf/boolean-intersects": "^7.1.0",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.4",
     "geojson": "^0.5.0",
     "maplibre-gl": "^4.7.1",
+    "pmtiles": "^4.1.0",
     "react": "^18.3.1",
     "react-confetti-explosion": "^2.1.2",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.10",
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.5",
     "react-markdown": "^9.0.1",
+    "react-medium-image-zoom": "^5.2.11",
     "react-router-dom": "^6.26.2",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.5.2",
-    "terra-draw": "1.0.0-beta.8"
+    "terra-draw": "1.0.0-beta.8",
+    "xmlbuilder2": "^3.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
@@ -57,5 +61,11 @@
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1",
     "vite-tsconfig-paths": "^5.0.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5",
+      "@eslint/plugin-kit@<0.2.3": ">=0.2.3"
+    }
   }
 }