fix(mapper): better distinguish create project layer colours (#1936)

* fix(main): shift osmStyle to baselayers constant

* fix(layer-switcher): user added layer vanish issue on switching to initial selected layer issue solve

* fix(newDefineAreaMap): layer style color change to distinguish different layers

* fix(newDefineAreaMap): update layer styles

* fix(layerSwitcher): add url contains project-submissions then hide ol-controls

* feat(mapControlComponent): map control component add to submissionInstanceMap

src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js

@@ -204,7 +204,8 @@ const LayerSwitcherControl = ({ map, visible = 'osm', pmTileLayerUrl = null }) =
       location.pathname.includes('upload-area') ||
       location.pathname.includes('upload-survey') ||
       location.pathname.includes('map-features') ||
-      location.pathname.includes('split-tasks')
+      location.pathname.includes('split-tasks') ||
+      location.pathname.includes('project-submissions')
     ) {
       const olZoom = document.querySelector('.ol-zoom');
       if (olZoom) {

src/frontend/src/components/SubmissionMap/MapControlComponent.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import AssetModules from '@/shared/AssetModules';
+import VectorLayer from 'ol/layer/Vector';
+import * as olExtent from 'ol/extent';
+
+const MapControlComponent = ({ map }) => {
+  const btnList = [
+    {
+      id: 'Add',
+      icon: <AssetModules.AddIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+    {
+      id: 'Minus',
+      icon: <AssetModules.RemoveIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+    {
+      id: 'Zoom To Layer',
+      icon: <AssetModules.CropFreeIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+  ];
+
+  const handleOnClick = (btnId) => {
+    if (btnId === 'Add') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom + 1);
+    } else if (btnId === 'Minus') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom - 1);
+    } else if (btnId === 'Zoom To Layer') {
+      const extent = olExtent.createEmpty();
+      const layers = map?.getLayers();
+
+      layers?.forEach((layer) => {
+        if (layer instanceof VectorLayer) {
+          olExtent.extend(extent, layer.getSource().getExtent());
+        }
+      });
+      map?.getView()?.fit(extent, {
+        padding: [50, 50, 50, 50],
+        duration: 900,
+      });
+    }
+  };
+
+  return (
+    <div className="fmtm-absolute fmtm-top-[20px] fmtm-left-3 fmtm-z-50 fmtm-bg-white fmtm-rounded-md fmtm-p-[2px] fmtm-shadow-xl fmtm-flex fmtm-flex-col fmtm-gap-[2px]">
+      {btnList.map((btn) => {
+        return (
+          <div key={btn.id} title={btn.id}>
+            <div
+              className={`fmtm-p-1 fmtm-rounded-md fmtm-duration-200 fmtm-cursor-pointer hover:fmtm-bg-red-50`}
+              onClick={() => handleOnClick(btn.id)}
+            >
+              {btn.icon}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MapControlComponent;

src/frontend/src/components/SubmissionMap/SubmissionInstanceMap.tsx

@@ -11,6 +11,7 @@ import { Stroke } from 'ol/style';
 import { hexToRgba } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
 import { Fill } from 'ol/style';
 import { geojsonType } from '@/store/types/ISubmissions';
+import MapControlComponent from '@/components/SubmissionMap/MapControlComponent';
 
 type submissionInstanceMapPropType = {
   featureGeojson: { vectorLayerGeojson: geojsonType; clusterLayerGeojson: geojsonType };
@@ -61,6 +62,7 @@ const SubmissionInstanceMap = ({ featureGeojson }: submissionInstanceMapPropType
         <div className="fmtm-absolute fmtm-right-2 fmtm-top-2 fmtm-z-20">
           <LayerSwitchMenu map={map} />
         </div>
+        <MapControlComponent map={map} />
         <LayerSwitcherControl visible={'osm'} />
         {featureGeojson?.vectorLayerGeojson?.type && (
           <VectorLayer

src/frontend/src/views/NewDefineAreaMap.tsx

@@ -6,6 +6,7 @@ import { VectorLayer } from '@/components/MapComponent/OpenLayersComponent/Layer
 import { DrawnGeojsonTypes, GeoJSONFeatureTypes } from '@/store/types/ICreateProject';
 import MapControlComponent from '@/components/createnewproject/MapControlComponent';
 import LayerSwitchMenu from '@/components/MapComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu';
+import { defaultStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
 
 type NewDefineAreaMapProps = {
   drawToggle?: boolean;
@@ -65,6 +66,7 @@ const NewDefineAreaMap = ({
               duration: 500,
             }}
             onModify={onModify}
+            style={{ ...defaultStyles, lineColor: '#0fffff', lineThickness: 2, fillOpacity: 10, fillColor: '#000000' }}
           />
         )}
         {isDrawOrGeojsonFile && !splittedGeojson && (
@@ -80,6 +82,7 @@ const NewDefineAreaMap = ({
             onModify={onModify}
             zoomToLayer
             getAOIArea={getAOIArea}
+            style={{ ...defaultStyles, lineColor: '#0fffff', lineThickness: 2, fillOpacity: 10, fillColor: '#000000' }}
           />
         )}
 
@@ -93,6 +96,7 @@ const NewDefineAreaMap = ({
               duration: 500,
             }}
             zoomToLayer
+            style={{ ...defaultStyles, lineColor: '#D73F37', lineThickness: 1.5, fillColor: '#D73F37' }}
           />
         )}
         {buildingExtractedGeojson && (
@@ -105,6 +109,7 @@ const NewDefineAreaMap = ({
               duration: 500,
             }}
             zoomToLayer
+            style={{ ...defaultStyles, lineColor: '#1a2fa2', fillOpacity: 30, lineOpacity: 50 }}
           />
         )}
         {lineExtractedGeojson && (