refactor : change colors

src/components/Methods/Layers.tsx

@@ -19,76 +19,76 @@ const baseConfigs: Omit<LayerConfig, 'getUrl'>[] = [
     radius: 1,
     topic: 'Parcels',
     style: new Style({
-      stroke: new Stroke({ color: 'green', width: 1.5 }),
+      stroke: new Stroke({ color: '#00D9FF', width: 5.5 }),
-      fill: new Fill({ color: 'rgba(0, 255, 0, 0.1)' }),
+      fill: new Fill({ color: 'rgba(0, 217, 255, 0.1)' }),
     }),
   },
   {
     radius: 100,
     topic: 'Sewer_Main_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'purple', width: 2 }),
+      stroke: new Stroke({ color: '#FF00FF', width: 2 }),
     }),
   },
   {
     radius: 50,
     topic: 'Zoning_Base_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'red', width: 1 }),
+      stroke: new Stroke({ color: '#FF3333', width: 1 }),
     }),
   },
   {
     radius: 50,
     topic: 'Water_Main_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'blue', width: 5 }),
+      stroke: new Stroke({ color: '#0066FF', width: 5 }),
     }),
   },
   {
     radius: 1000,
     topic: 'Sustainable_Development_Areas',
     style: new Style({
-      stroke: new Stroke({ color: 'green', width: 3 }),
+      stroke: new Stroke({ color: '#00FF66', width: 3 }),
     }),
   },
   {
     radius: 1000,
     topic: 'Housing_Solution_Areas',
     style: new Style({
-      stroke: new Stroke({ color: 'black', width: 2.5 }),
+      stroke: new Stroke({ color: '#FFD700', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(255, 200, 0, 0.1)' }),
+      fill: new Fill({ color: 'rgba(255, 215, 0, 0.1)' }),
     }),
   },
   {
     radius: 100000,
     topic: 'Promise_Zones_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'black', width: 2.5 }),
+      stroke: new Stroke({ color: '#9933FF', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(153, 51, 255, 0.1)' }),
     }),
   },
   {
     radius: 100000,
     topic: 'MHPA_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'orange', width: 2.5 }),
+      stroke: new Stroke({ color: '#FF6B6B', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(255, 107, 107, 0.1)' }),
     }),
   },
   {
     radius: 100000,
     topic: 'Coastal_Zones',
     style: new Style({
-      stroke: new Stroke({ color: 'skin', width: 2.5 }),
+      stroke: new Stroke({ color: '#FF9966', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(255, 153, 102, 0.1)' }),
     }),
   },
   {
     radius: 100000,
     topic: 'Community_Plan_Implementation_Overlay_Zone_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'darkblue', width: 2.5 }),
+      stroke: new Stroke({ color: '#4169E1', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(65, 105, 225, 0.1)' }),
     }),
 
   },
@@ -96,8 +96,8 @@ const baseConfigs: Omit<LayerConfig, 'getUrl'>[] = [
     radius: 100000,
     topic: 'Airport_Influence_Area',
     style: new Style({
-      stroke: new Stroke({ color: 'darkyellow', width: 2.5 }),
+      stroke: new Stroke({ color: '#FFBB00', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(255, 187, 0, 0.1)' }),
     }),
 
   },
@@ -105,8 +105,8 @@ const baseConfigs: Omit<LayerConfig, 'getUrl'>[] = [
     radius: 100000,
     topic: 'Historic_Districts_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'white', width: 2.5 }),
+      stroke: new Stroke({ color: '#C0C0C0', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(192, 192, 192, 0.1)' }),
     }),
 
   },
@@ -114,8 +114,8 @@ const baseConfigs: Omit<LayerConfig, 'getUrl'>[] = [
     radius: 100000,
     topic: 'HRB_Designated_Resources_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'darkgreen', width: 2.5 }),
+      stroke: new Stroke({ color: '#00CC66', width: 2.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(0, 204, 102, 0.1)' }),
     }),
 
   },
@@ -123,8 +123,8 @@ const baseConfigs: Omit<LayerConfig, 'getUrl'>[] = [
     radius: 100000,
     topic: 'Fire_Hazard_Severity_Zones_SD',
     style: new Style({
-      stroke: new Stroke({ color: 'yellow', width: 1.5 }),
+      stroke: new Stroke({ color: '#FF6600', width: 1.5 }),
-      fill: new Fill({ color: 'rgba(116, 3, 255, 0.1)' }),
+      fill: new Fill({ color: 'rgba(255, 102, 0, 0.1)' }),
     }),
 
   },

src/components/OpenLayerMap.tsx

@@ -52,16 +52,13 @@ const scrollbarStyles = `
 `;
 
 const extractColorFromStyle = (style: any): string => {
-  let color: any = '#888888';
+  if (style.getStroke() && style.getStroke().getColor()) {
-  if (style.getStroke() && style.getStroke().getColor()) color = style.getStroke().getColor();
+    return style.getStroke().getColor();
-  else if (style.getFill() && style.getFill().getColor()) color = style.getFill().getColor();
+  }
-
+  if (style.getFill() && style.getFill().getColor()) {
-  const colorMap: Record<string, string> = {
+    return style.getFill().getColor();
-    'skin': '#FFCBA4', 'darkyellow': '#FCC200', 'darkblue': '#00008B',
+  }
-    'darkgreen': '#006400', 'purple': '#800080', 'orange': '#FFA500',
+  return '#888888';
-    'green': '#00FF00', 'blue': '#0000FF', 'red': '#FF0000', 'black': '#888888',
-  };
-  return colorMap[color] || color;
 };
 
 interface MapViewProps {