Merge branch 'development' of https://github.com/hotosm/fmtm into dev…

…elopment

src/frontend/src/components/GenerateBasemap.jsx

@@ -100,46 +100,6 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
         </CoreModules.Grid>
 
         <CoreModules.Grid container spacing={2} className="fmtm-px-4 fmtm-mb-4">
-          {/* Output Format Dropdown */}
-          <CoreModules.Grid item xs={12} sm={6} md={4}>
-            <CoreModules.FormControl fullWidth>
-              <CoreModules.InputLabel
-                id="output-format"
-                sx={{
-                  '&.Mui-focused': {
-                    color: defaultTheme.palette.black,
-                  },
-                }}
-              >
-                Select Output Format
-              </CoreModules.InputLabel>
-              <CoreModules.Select
-                labelId="output-format"
-                id="output_format"
-                value={selectedOutputFormat}
-                label="Select Output Format"
-                fullWidth
-                sx={{
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    border: '2px solid black',
-                  },
-                }}
-                onChange={(e) => {
-                  setSelectedOutputFormat(e.target.value);
-                }}
-              >
-                {environment.tileOutputFormats?.map((form) => (
-                  <CoreModules.MenuItem key={form.value} value={form.value}>
-                    {form.label}
-                  </CoreModules.MenuItem>
-                ))}
-              </CoreModules.Select>
-            </CoreModules.FormControl>
-            {error.includes('selectedOutputFormat') && (
-              <p className="fmtm-text-sm fmtm-text-red-500">Output Format is Required.</p>
-            )}
-          </CoreModules.Grid>
-
           {/* Tile Source Dropdown or TMS URL Input */}
           <CoreModules.Grid item xs={12} sm={6} md={4}>
             <CoreModules.FormControl fullWidth>
@@ -178,14 +138,14 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
             )}
           </CoreModules.Grid>
           {selectedTileSource === 'tms' && (
-            <CoreModules.Grid item xs={12} sm={12} md={4}>
+            <CoreModules.Grid item xs={12} sm={6} md={4}>
               <CoreModules.FormControl fullWidth>
                 <CoreModules.TextField
                   // labelId="tms_url-label"
                   id="tms_url"
                   variant="outlined"
                   value={tmsUrl}
-                  label="Enter Tile Source"
+                  label="Enter TMS URL"
                   fullWidth
                   color="black"
                   sx={{
@@ -201,10 +161,54 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
                   onChange={handleTmsUrlChange}
                 />
               </CoreModules.FormControl>
-              {error.includes('tmsUrl') && <p className="fmtm-text-sm fmtm-text-red-500">Tile Source is Required.</p>}
+              {error.includes('tmsUrl') && <p className="fmtm-text-sm fmtm-text-red-500">TMS URL is Required.</p>}
             </CoreModules.Grid>
           )}
-          <CoreModules.Grid item xs={12} sm={12} md={selectedTileSource === 'tms' ? 12 : 4}>
+          {/* Output Format Dropdown */}
+          <CoreModules.Grid item xs={12} sm={6} md={4}>
+            <CoreModules.FormControl fullWidth>
+              <CoreModules.InputLabel
+                id="output-format"
+                sx={{
+                  '&.Mui-focused': {
+                    color: defaultTheme.palette.black,
+                  },
+                }}
+              >
+                Select Output Format
+              </CoreModules.InputLabel>
+              <CoreModules.Select
+                labelId="output-format"
+                id="output_format"
+                value={selectedOutputFormat}
+                label="Select Output Format"
+                fullWidth
+                sx={{
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    border: '2px solid black',
+                  },
+                }}
+                onChange={(e) => {
+                  setSelectedOutputFormat(e.target.value);
+                }}
+              >
+                {environment.tileOutputFormats?.map((form) => (
+                  <CoreModules.MenuItem key={form.value} value={form.value}>
+                    {form.label}
+                  </CoreModules.MenuItem>
+                ))}
+              </CoreModules.Select>
+            </CoreModules.FormControl>
+            {error.includes('selectedOutputFormat') && (
+              <p className="fmtm-text-sm fmtm-text-red-500">Output Format is Required.</p>
+            )}
+          </CoreModules.Grid>
+          <CoreModules.Grid
+            item
+            xs={12}
+            sm={selectedTileSource === 'tms' ? 6 : 12}
+            md={selectedTileSource === 'tms' ? 12 : 4}
+          >
             <div className="fmtm-w-full fmtm-flex fmtm-items-center fmtm-justify-center sm:fmtm-justify-end fmtm-mr-4 fmtm-gap-4 fmtm-h-full">
               {/* Generate Button */}
               <div>

src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js

@@ -4,16 +4,16 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'ol/proj';
-import Style from 'ol/style/Style';
-import Stroke from 'ol/style/Stroke';
+import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
 import GeoJSON from 'ol/format/GeoJSON';
 import { Vector as VectorSource } from 'ol/source';
 import OLVectorLayer from 'ol/layer/Vector';
 import { defaultStyles, getStyles } from '../helpers/styleUtils';
 import { isExtentValid } from '../helpers/layerUtils';
-import { Draw, Modify, Select, defaults as defaultInteractions } from 'ol/interaction.js';
+import { Draw, Modify, Snap, Select, defaults as defaultInteractions } from 'ol/interaction.js';
 import { getArea } from 'ol/sphere';
 import { valid } from 'geojson-validation';
+import MultiPoint from 'ol/geom/MultiPoint.js';
 
 const selectElement = 'singleselect';
 
@@ -95,7 +95,7 @@ const VectorLayer = ({
     }
     return output;
   };
-  // Modify Feature
+  // Draw Feature
   useEffect(() => {
     if (!map) return;
     // if(!vectorLayer) return;
@@ -105,10 +105,12 @@ const VectorLayer = ({
     const vector = new OLVectorLayer({
       source: source,
     });
+
     const draw = new Draw({
       source: source,
       type: 'Polygon',
     });
+
     draw.on('drawend', function (e) {
       const feature = e.feature;
       const geojsonFormat = new GeoJSON();
@@ -122,16 +124,14 @@ const VectorLayer = ({
 
       // Call your function here with the GeoJSON as an argument
       onDraw(newGeojson, area);
-      // var geoJSONFormat = new GeoJSON();
 
       // var geoJSONString = geoJSONFormat.writeFeatures(vectorLayer.getSource().getFeatures(),{ dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'});
       // console.log(geoJSONString,'geojsonString');
       // onDraw(geoJSONString);
     });
     map.addInteraction(draw);
-
     return () => {
-      map.removeInteraction(draw);
+      // map.removeInteraction(snap);
     };
   }, [map, vectorLayer, onDraw]);
 
@@ -191,7 +191,22 @@ const VectorLayer = ({
 
   useEffect(() => {
     if (!vectorLayer || !style.visibleOnMap) return;
-    vectorLayer.setStyle((feature, resolution) => getStyles({ style, feature, resolution }));
+    vectorLayer.setStyle((feature, resolution) => [
+      new Style({
+        image: new CircleStyle({
+          radius: 5,
+          fill: new Fill({
+            color: 'orange',
+          }),
+        }),
+        geometry: function (feature) {
+          // return the coordinates of the first ring of the polygon
+          const coordinates = feature.getGeometry().getCoordinates()[0];
+          return new MultiPoint(coordinates);
+        },
+      }),
+      getStyles({ style, feature, resolution }),
+    ]);
   }, [vectorLayer, style]);
 
   useEffect(() => {

src/frontend/src/components/createnewproject/UploadArea.tsx

@@ -260,6 +260,12 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
                 dispatch(CreateProjectActions.SetTotalAreaSelection(area));
                 setGeojsonFile(null);
               }}
+              onModify={(geojson, area) => {
+                handleCustomChange('drawnGeojson', geojson);
+                dispatch(CreateProjectActions.SetDrawnGeojson(JSON.parse(geojson)));
+                dispatch(CreateProjectActions.SetTotalAreaSelection(area));
+                setGeojsonFile(null);
+              }}
             />
           </div>
         </div>

src/frontend/src/views/NewDefineAreaMap.tsx

@@ -20,6 +20,7 @@ const NewDefineAreaMap = ({
   buildingExtractedGeojson,
   lineExtractedGeojson,
   onDraw,
+  onModify,
 }: NewDefineAreaMapProps) => {
   const { mapRef, map } = useOLMap({
     // center: fromLonLat([85.3, 27.7]),
@@ -63,6 +64,7 @@ const NewDefineAreaMap = ({
               duration: 500,
             }}
             onDraw={onDraw}
+            onModify={onModify}
             zoomToLayer
           />
         )}