Model Creation & Edit, Banner and Start Mapping Layout

frontend/.env.sample

@@ -1,3 +1,46 @@
 VITE_BASE_API_URL = 'http://localhost:8000/api/v1/' # backend api url
-VITE_MATOMO_ID= 0 
-VITE_MATOMO_APP_DOMAIN = "subdomain.hotosm.org"
+VITE_MATOMO_ID = 0 
+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 minimum allowed area size (in square meters) for training areas.
+# Data type: Positive Integer e.g 500000
+MIN_TRAINING_AREA_SIZE =
+
+# 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 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 = 
+
+
+# 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 =

frontend/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+tsconfig.app.tsbuildinfo
+tsconfig.node.tsbuildinfo

frontend/package.json

@@ -14,22 +14,34 @@
     "@tanstack/react-query": "^5.59.0",
     "@tanstack/react-query-devtools": "^5.59.0",
     "@tanstack/react-table": "^8.20.5",
+    "@terraformer/wkt": "^2.2.1",
+    "@turf/area": "^7.1.0",
+    "@turf/bbox": "^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",
     "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-router-dom": "^6.26.2",
-    "tailwind-merge": "^2.5.2"
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.5.2",
+    "terra-draw": "1.0.0-beta.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/eslint-plugin-query": "^5.58.1",
+    "@types/geojson": "^7946.0.14",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/terraformer__wkt": "^2.0.3",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",