datastake-daf 0.6.99 → 0.6.100

package/src/@daf/core/components/Dashboard/Map/helper.js

@@ -1,13 +1,14 @@
 import {
-	AimOutlined,
-	DownOutlined,
-	MinusOutlined,
-	PlusOutlined,
-	UpOutlined,
+  AimOutlined,
+  DownOutlined,
+  MinusOutlined,
+  PlusOutlined,
+  UpOutlined,
 } from "@ant-design/icons";
 import L from "leaflet";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
+import { getEventMarkerStyle } from "../../../../../helpers/Map";
 import { SET_VIEW_DEFAULT_ZOOM } from "../../../../hooks/useMapHelper";
 import { renderTooltipJsx as renderTooltipHtml } from "../../../../utils/tooltip";
 import ChainIcon from "./ChainIcon";
@@ -15,147 +16,144 @@ import { isExtraSmallMarker, isSmallMarker } from "./ChainIcon/utils";
 import StakeholderIcon from "./StakeholderIcon";
 
 // Event type color constants
-const EVENT_COLORS = {
-	MAJOR: "#cf1322", // Red for major incidents
-	MODERATE: "#fa8c16", // Orange for moderate incidents
-	MINOR: "#fadb14", // Yellow for minor incidents
-	CORRECTIVE: "#12b76a", // Green for corrective actions
-};
+// const EVENT_COLORS = {
+//   MAJOR: "#cf1322", // Red for major incidents
+//   MODERATE: "#fa8c16", // Orange for moderate incidents
+//   MINOR: "#fadb14", // Yellow for minor incidents
+//   CORRECTIVE: "#12b76a", // Green for corrective actions
+// };
 
 export function useMapHelper({
-	type,
-	mapRef,
-	mapCenter,
-	allData,
-	renderTooltip,
-	onClickLink,
-	link,
-	tooltipAsText,
-	renderMarker,
-	zoom,
-	selectedMarkersId,
-	handleSelectMarker,
-	openPopupIdRef,
+  type,
+  mapRef,
+  mapCenter,
+  allData,
+  renderTooltip,
+  onClickLink,
+  link,
+  tooltipAsText,
+  renderMarker,
+  zoom,
+  selectedMarkersId,
+  handleSelectMarker,
+  openPopupIdRef,
 }) {
-	const [mapMarkers, setMapMarkers] = useState([]);
-	const [activeMarker, setActiveMarker] = useState(null);
-	const getZoom = useCallback(
-		(mapRef) =>
-			mapRef.getZoom() > SET_VIEW_DEFAULT_ZOOM ? mapRef.getZoom() : SET_VIEW_DEFAULT_ZOOM,
-		[],
-	);
-	const roots = useRef([]);
-	const polylinesRef = useRef([]);
-	const mappedActiveMarker = useMemo(
-		() => mapMarkers.find((m) => m.id === activeMarker),
-		[mapMarkers, activeMarker],
-	);
-	const [activeStakeholder, setActiveStakeholder] = useState(null);
-
-	// Recenter Map
-	const recenterMap = useCallback(() => {
-		if (mapRef) {
-			if (allData && allData.length) {
-				const pos = allData.map((m) =>
-					Array.isArray(m.area)
-						? m.area
-						: [Number(m.marker?.lat ?? 0), Number(m.marker?.lng ?? 0)],
-				);
-				const bounds = new L.LatLngBounds(pos);
-				mapRef.fitBounds(bounds);
-			} else {
-				mapRef.setView(mapCenter, SET_VIEW_DEFAULT_ZOOM);
-			}
-		}
-	}, [mapRef, mapCenter, allData]);
-
-	// Actions to do when active marker is changed
-	useEffect(() => {
-		if (mapRef) {
-			if (activeMarker) {
-				mapRef.eachLayer((layer) => {
-					if (layer.options.icon) {
-						if (layer._leaflet_id === activeMarker) {
-							layer.openPopup();
-							layer.off("popupclose");
-							layer.on("popupclose", () => {
-								setActiveMarker(null);
-							});
-						} else {
-							layer.off("click");
-							layer.on("click", () => {
-								setActiveMarker(layer._leaflet_id);
-							});
-						}
-					}
-				});
-			} else {
-				mapRef.eachLayer((layer) => {
-					if (layer.options.icon) {
-						const icon = layer.options.icon;
-						layer.off("click");
-						layer.on("click", () => {
-							setActiveMarker(layer._leaflet_id);
-						});
-						layer.setIcon(icon);
-
-						if (layer.getPopup() && layer.getPopup().isOpen()) {
-							layer.closePopup();
-						}
-					}
-				});
-			}
-		}
-	}, [activeMarker, mapRef]);
-
-	// Draws the marker in the map
-	const addIconToMap = useCallback(
-		(coordinates, className, data, name, iconSize, html) => {
-			if (mapRef) {
-				const marker =
-					typeof renderMarker === "function"
-						? renderMarker(L, coordinates, data).addTo(mapRef)
-						: L.marker(coordinates, {
-								icon: L.divIcon({
-									html,
-									className: `map-marker ${className}`,
-									iconSize,
-								}),
-								zIndexOffset: parseInt(iconSize[0]),
-						  }).addTo(mapRef);
-
-				if (name) {
-					marker.bindPopup(name);
-				}
-
-				marker.on("click", () => {
-					setActiveMarker(marker._leaflet_id);
-				});
-				return marker;
-			}
-			return null;
-		},
-		[mapRef, renderMarker],
-	);
-
-	// console.log({
-	// 	activeMarker,
-	// 	mapMarkers,
-	// });
-
-	// Draws the marker in the map and saves it in mapMarkers state
-	const addIconToMapInitialy = useCallback(
-		(coordinates, groupName, markerName, data, maxTotal = 0, i = 0) => {
-			if (mapRef) {
-				let marker;
-				let iconClassName = "";
-				let innerHtml = "";
-				let iconSize = [25, 25];
-
-				if (type === "event") {
-					iconClassName = "incident rounded";
-
-					const incidents = data?.data || [];
+  const [mapMarkers, setMapMarkers] = useState([]);
+  const [activeMarker, setActiveMarker] = useState(null);
+  const getZoom = useCallback(
+    (mapRef) =>
+      mapRef.getZoom() > SET_VIEW_DEFAULT_ZOOM
+        ? mapRef.getZoom()
+        : SET_VIEW_DEFAULT_ZOOM,
+    []
+  );
+  const roots = useRef([]);
+  const polylinesRef = useRef([]);
+  const mappedActiveMarker = useMemo(
+    () => mapMarkers.find((m) => m.id === activeMarker),
+    [mapMarkers, activeMarker]
+  );
+  const [activeStakeholder, setActiveStakeholder] = useState(null);
+
+  // Recenter Map
+  const recenterMap = useCallback(() => {
+    if (mapRef) {
+      if (allData && allData.length) {
+        const pos = allData.map((m) =>
+          Array.isArray(m.area)
+            ? m.area
+            : [Number(m.marker?.lat ?? 0), Number(m.marker?.lng ?? 0)]
+        );
+        const bounds = new L.LatLngBounds(pos);
+        mapRef.fitBounds(bounds);
+      } else {
+        mapRef.setView(mapCenter, SET_VIEW_DEFAULT_ZOOM);
+      }
+    }
+  }, [mapRef, mapCenter, allData]);
+
+  // Actions to do when active marker is changed
+  useEffect(() => {
+    if (mapRef) {
+      if (activeMarker) {
+        mapRef.eachLayer((layer) => {
+          if (layer.options.icon) {
+            if (layer._leaflet_id === activeMarker) {
+              layer.openPopup();
+              layer.off("popupclose");
+              layer.on("popupclose", () => {
+                setActiveMarker(null);
+              });
+            } else {
+              layer.off("click");
+              layer.on("click", () => {
+                setActiveMarker(layer._leaflet_id);
+              });
+            }
+          }
+        });
+      } else {
+        mapRef.eachLayer((layer) => {
+          if (layer.options.icon) {
+            const icon = layer.options.icon;
+            layer.off("click");
+            layer.on("click", () => {
+              setActiveMarker(layer._leaflet_id);
+            });
+            layer.setIcon(icon);
+
+            if (layer.getPopup() && layer.getPopup().isOpen()) {
+              layer.closePopup();
+            }
+          }
+        });
+      }
+    }
+  }, [activeMarker, mapRef]);
+
+  // Draws the marker in the map
+  const addIconToMap = useCallback(
+    (coordinates, className, data, name, iconSize, html) => {
+      if (mapRef) {
+        const marker =
+          typeof renderMarker === "function"
+            ? renderMarker(L, coordinates, data).addTo(mapRef)
+            : L.marker(coordinates, {
+                icon: L.divIcon({
+                  html,
+                  className: `map-marker ${className}`,
+                  iconSize,
+                }),
+                zIndexOffset: parseInt(iconSize[0]),
+              }).addTo(mapRef);
+
+        if (name) {
+          marker.bindPopup(name);
+        }
+
+        marker.on("click", () => {
+          setActiveMarker(marker._leaflet_id);
+        });
+        return marker;
+      }
+      return null;
+    },
+    [mapRef, renderMarker]
+  );
+
+  // Draws the marker in the map and saves it in mapMarkers state
+  const addIconToMapInitialy = useCallback(
+    (coordinates, groupName, markerName, data, maxTotal = 0, i = 0) => {
+      if (mapRef) {
+        let marker;
+        let iconClassName = "";
+        let innerHtml = "";
+        let iconSize = [25, 25];
+
+        if (type === "event") {
+          iconClassName = "incident rounded";
+
+          /* 					const incidents = data?.data || [];
 					const totals = {
 						major: incidents.filter((d) => d.type === "major_incident").length,
 						minor: incidents.filter((d) => d.type === "minor_incident").length,
@@ -168,7 +166,6 @@ export function useMapHelper({
 					let background = "#f1f1f1";
 
 					if (total > 0) {
-						// Build a dynamic array of categories with colors & percentages
 						const categories = [
 							{ key: "major", value: totals.major, color: EVENT_COLORS.MAJOR },
 							{
@@ -211,104 +208,106 @@ export function useMapHelper({
 					} else {
 						radius = 40;
 					}
+ */
 
-					innerHtml = `
+          const { background, radius, totals } = getEventMarkerStyle(data);
+          innerHtml = `
     <div class="main" style="background: ${background}; border: 2px solid white; width: ${radius}px; height: ${radius}px;">
       <span>${data.total || 0}</span>
     </div>`;
 
-					const div = document.createElement("div");
-					const root = createRoot(div);
-
-					root.render(
-						<>
-							{renderTooltipHtml({
-								title: data.name,
-								subTitle: data.type,
-								items: renderTooltip({ ...data, totals }),
-								link,
-								total: data.sources,
-								onClickLink: () => onClickLink(data),
-							})}
-						</>,
-					);
-
-					roots.current.push(root);
-
-					const base = 30;
-					const mp = 1.3;
-					const perc = (data.total / (maxTotal || 1)) * mp;
-					const size = 50 * perc;
-					iconSize = size > base ? [size, size] : [base, base];
-
-					marker = addIconToMap(
-						coordinates,
-						iconClassName,
-						data,
-						tooltipAsText ? data.name : div,
-						iconSize,
-						innerHtml,
-					);
-				} else if (type === "territory") {
-					marker = L.polygon(data.area, {
-						color: data.color,
-						opacity: 0.4,
-					}).addTo(mapRef);
-					const div = document.createElement("div");
-					const root = createRoot(div);
-
-					root.render(
-						<>
-							{renderTooltipHtml({
-								title: data.name,
-								items: renderTooltip(data),
-								link,
-								total: data.sources,
-								onClickLink: () => onClickLink(data),
-							})}
-						</>,
-					);
-
-					roots.current.push(root);
-
-					marker.bindPopup(div);
-
-					marker.on("popupopen", function () {
-						this.setStyle({ fillOpacity: 0.7 });
-					});
-
-					marker.on("popupclose", function () {
-						this.setStyle({ fillOpacity: 0.4 });
-					});
-				} else if (type === "stakeholder") {
-					marker = L.marker(coordinates, {
-						icon: L.divIcon({
-							html: `<div id="${i}"></div>`,
-							className: "marker-stakeholder",
-							iconSize,
-						}),
-						zIndexOffset: parseInt(iconSize[0]),
-					}).addTo(mapRef);
-
-					const div = document.getElementById(i);
-					const root = createRoot(div);
-
-					root.render(
-						<StakeholderIcon
-							data={data}
-							title={data.name}
-							renderTooltip={renderTooltip}
-							link={link}
-							onClickLink={onClickLink}
-							activeStakeholder={activeStakeholder}
-							setActiveStakeholder={setActiveStakeholder}
-						/>,
-					);
-
-					roots.current.push(root);
-				} else if (type === "location") {
-					iconClassName = "";
-					innerHtml = `
+          const div = document.createElement("div");
+          const root = createRoot(div);
+
+          root.render(
+            <>
+              {renderTooltipHtml({
+                title: data.name,
+                subTitle: data.type,
+                items: renderTooltip({ ...data, totals }),
+                link,
+                total: data.sources,
+                onClickLink: () => onClickLink(data),
+              })}
+            </>
+          );
+
+          roots.current.push(root);
+
+          const base = 30;
+          const mp = 1.3;
+          const perc = (data.total / (maxTotal || 1)) * mp;
+          const size = 50 * perc;
+          iconSize = size > base ? [size, size] : [base, base];
+
+          marker = addIconToMap(
+            coordinates,
+            iconClassName,
+            data,
+            tooltipAsText ? data.name : div,
+            iconSize,
+            innerHtml
+          );
+        } else if (type === "territory") {
+          marker = L.polygon(data.area, {
+            color: data.color,
+            opacity: 0.4,
+          }).addTo(mapRef);
+          const div = document.createElement("div");
+          const root = createRoot(div);
+
+          root.render(
+            <>
+              {renderTooltipHtml({
+                title: data.name,
+                items: renderTooltip(data),
+                link,
+                total: data.sources,
+                onClickLink: () => onClickLink(data),
+              })}
+            </>
+          );
+
+          roots.current.push(root);
+
+          marker.bindPopup(div);
+
+          marker.on("popupopen", function () {
+            this.setStyle({ fillOpacity: 0.7 });
+          });
+
+          marker.on("popupclose", function () {
+            this.setStyle({ fillOpacity: 0.4 });
+          });
+        } else if (type === "stakeholder") {
+          marker = L.marker(coordinates, {
+            icon: L.divIcon({
+              html: `<div id="${i}"></div>`,
+              className: "marker-stakeholder",
+              iconSize,
+            }),
+            zIndexOffset: parseInt(iconSize[0]),
+          }).addTo(mapRef);
+
+          const div = document.getElementById(i);
+          const root = createRoot(div);
+
+          root.render(
+            <StakeholderIcon
+              data={data}
+              title={data.name}
+              renderTooltip={renderTooltip}
+              link={link}
+              onClickLink={onClickLink}
+              activeStakeholder={activeStakeholder}
+              setActiveStakeholder={setActiveStakeholder}
+            />
+          );
+
+          roots.current.push(root);
+        } else if (type === "location") {
+          iconClassName = "";
+          innerHtml = `
 					
 						<svg
 							width="28"
@@ -326,201 +325,207 @@ export function useMapHelper({
 						
 						`;
 
-					const svg = document.createElement("svg");
-					const root = createRoot(svg);
-
-					root.render(
-						<>
-							{renderTooltipHtml({
-								title: data.name,
-								subTitle: data?.subTitle,
-								total: data.sources,
-								link,
-								onClickLink: () => onClickLink(data),
-								items: renderTooltip(data),
-							})}
-						</>,
-					);
-
-					roots.current.push(root);
-
-					marker = addIconToMap(
-						coordinates,
-						iconClassName,
-						data,
-						tooltipAsText ? data.name : svg,
-						iconSize,
-						innerHtml,
-					);
-				} else if (type === "chain") {
-					marker = L.marker(coordinates, {
-						icon: L.divIcon({
-							html: `<div id="${i}"></div>`,
-							className: "marker-chain",
-							iconSize:
-								isSmallMarker(zoom) || isExtraSmallMarker(zoom)
-									? [10.5, 12.6]
-									: [25, 25],
-						}),
-					}).addTo(mapRef);
-
-					const div = document.getElementById(i);
-					const root = createRoot(div);
-
-					root.render(
-						<ChainIcon
-							data={data}
-							zoom={zoom}
-							allData={allData}
-							link={link}
-							renderTooltip={renderTooltip}
-							onClickLink={onClickLink}
-							selectedMarkersId={selectedMarkersId}
-							handleSelectMarker={handleSelectMarker}
-							mapRef={mapRef}
-							activeMarker={activeMarker}
-							setActiveMarker={setActiveMarker}
-							setMapMarkers={setMapMarkers}
-							addIconToMap={addIconToMap}
-							openPopupIdRef={openPopupIdRef}
-							polylinesRef={polylinesRef}
-						/>,
-					);
-
-					roots.current.push(root);
-				} else {
-					iconClassName = "marker";
-					innerHtml = '<div class="main"></div>';
-					const div = document.createElement("div");
-					const root = createRoot(div);
-
-					root.render(
-						<>
-							{renderTooltipHtml({
-								title: data.name,
-								subTitle: data?.subTitle,
-								total: data.sources,
-								link,
-								onClickLink: () => onClickLink(data),
-								items: renderTooltip(data),
-							})}
-						</>,
-					);
-
-					roots.current.push(root);
-
-					marker = addIconToMap(
-						coordinates,
-						iconClassName,
-						data,
-						tooltipAsText ? data.name : div,
-						iconSize,
-						innerHtml,
-					);
-				}
-
-				if (marker) {
-					setMapMarkers((prevMapMarkers) => [
-						...prevMapMarkers,
-						{
-							id: marker._leaflet_id,
-							coordinates,
-							groupName,
-							markerName,
-							iconClassName,
-							data,
-						},
-					]);
-				}
-			}
-		},
-		[
-			mapRef,
-			renderTooltip,
-			tooltipAsText,
-			onClickLink,
-			zoom,
-			selectedMarkersId,
-			openPopupIdRef.current,
-			handleSelectMarker,
-			activeStakeholder,
-			setActiveStakeholder,
-		],
-	);
-
-	// Map control handlers
-	const zoomHandler = useCallback(() => mapRef.setZoom(mapRef.getZoom() + 1), [mapRef]);
-	const zoomOutHandler = useCallback(() => mapRef.setZoom(mapRef.getZoom() - 1), [mapRef]);
-
-	const moveUpHandler = useCallback(() => {
-		const center = mapRef.getCenter();
-		const value = 30 / mapRef.getZoom();
-		mapRef.panTo(new L.LatLng(center.lat + value, center.lng));
-	}, [mapRef]);
-
-	const moveDownHandler = useCallback(() => {
-		const center = mapRef.getCenter();
-		const value = 30 / mapRef.getZoom();
-		mapRef.panTo(new L.LatLng(center.lat - value, center.lng));
-	}, [mapRef]);
-
-	const clearMapMarkers = useCallback(() => {
-		if (mapRef) {
-			roots.current.forEach((root) => {
-				setTimeout(() => {
-					try {
-						root.unmount();
-					} catch (err) {
-						console.log(err);
-					}
-				});
-			});
-			roots.current = [];
-
-			mapRef.eachLayer((layer) => {
-				if (!layer._url) {
-					mapRef.removeLayer(layer);
-				}
-			});
-			setMapMarkers([]);
-		}
-	}, [mapRef]);
-
-	const mapOptionsButtonsConfig = useMemo(
-		() => [
-			{
-				icon: <PlusOutlined style={{ color: "#727272" }} />,
-				handler: zoomHandler,
-			},
-			{
-				icon: <MinusOutlined style={{ color: "#727272" }} />,
-				handler: zoomOutHandler,
-			},
-			{
-				icon: <AimOutlined style={{ color: "#727272" }} />,
-				handler: recenterMap,
-			},
-			{
-				icon: <UpOutlined style={{ color: "#727272" }} />,
-				handler: moveUpHandler,
-			},
-			{
-				icon: <DownOutlined style={{ color: "#727272" }} />,
-				handler: moveDownHandler,
-			},
-		],
-		[zoomHandler, moveUpHandler, moveDownHandler, zoomOutHandler, recenterMap],
-	);
-
-	return {
-		addIconToMapInitialy,
-		activeMarker: mappedActiveMarker,
-		mapOptionsButtonsConfig,
-		setActiveMarker,
-		mapMarkers,
-		clearMapMarkers,
-		getZoom,
-		polylinesRef,
-		activeStakeholder,
-	};
+          const svg = document.createElement("svg");
+          const root = createRoot(svg);
+
+          root.render(
+            <>
+              {renderTooltipHtml({
+                title: data.name,
+                subTitle: data?.subTitle,
+                total: data.sources,
+                link,
+                onClickLink: () => onClickLink(data),
+                items: renderTooltip(data),
+              })}
+            </>
+          );
+
+          roots.current.push(root);
+
+          marker = addIconToMap(
+            coordinates,
+            iconClassName,
+            data,
+            tooltipAsText ? data.name : svg,
+            iconSize,
+            innerHtml
+          );
+        } else if (type === "chain") {
+          marker = L.marker(coordinates, {
+            icon: L.divIcon({
+              html: `<div id="${i}"></div>`,
+              className: "marker-chain",
+              iconSize:
+                isSmallMarker(zoom) || isExtraSmallMarker(zoom)
+                  ? [10.5, 12.6]
+                  : [25, 25],
+            }),
+          }).addTo(mapRef);
+
+          const div = document.getElementById(i);
+          const root = createRoot(div);
+
+          root.render(
+            <ChainIcon
+              data={data}
+              zoom={zoom}
+              allData={allData}
+              link={link}
+              renderTooltip={renderTooltip}
+              onClickLink={onClickLink}
+              selectedMarkersId={selectedMarkersId}
+              handleSelectMarker={handleSelectMarker}
+              mapRef={mapRef}
+              activeMarker={activeMarker}
+              setActiveMarker={setActiveMarker}
+              setMapMarkers={setMapMarkers}
+              addIconToMap={addIconToMap}
+              openPopupIdRef={openPopupIdRef}
+              polylinesRef={polylinesRef}
+            />
+          );
+
+          roots.current.push(root);
+        } else {
+          iconClassName = "marker";
+          innerHtml = '<div class="main"></div>';
+          const div = document.createElement("div");
+          const root = createRoot(div);
+
+          root.render(
+            <>
+              {renderTooltipHtml({
+                title: data.name,
+                subTitle: data?.subTitle,
+                total: data.sources,
+                link,
+                onClickLink: () => onClickLink(data),
+                items: renderTooltip(data),
+              })}
+            </>
+          );
+
+          roots.current.push(root);
+
+          marker = addIconToMap(
+            coordinates,
+            iconClassName,
+            data,
+            tooltipAsText ? data.name : div,
+            iconSize,
+            innerHtml
+          );
+        }
+
+        if (marker) {
+          setMapMarkers((prevMapMarkers) => [
+            ...prevMapMarkers,
+            {
+              id: marker._leaflet_id,
+              coordinates,
+              groupName,
+              markerName,
+              iconClassName,
+              data,
+            },
+          ]);
+        }
+      }
+    },
+    [
+      mapRef,
+      renderTooltip,
+      tooltipAsText,
+      onClickLink,
+      zoom,
+      selectedMarkersId,
+      openPopupIdRef.current,
+      handleSelectMarker,
+      activeStakeholder,
+      setActiveStakeholder,
+    ]
+  );
+
+  // Map control handlers
+  const zoomHandler = useCallback(
+    () => mapRef.setZoom(mapRef.getZoom() + 1),
+    [mapRef]
+  );
+  const zoomOutHandler = useCallback(
+    () => mapRef.setZoom(mapRef.getZoom() - 1),
+    [mapRef]
+  );
+
+  const moveUpHandler = useCallback(() => {
+    const center = mapRef.getCenter();
+    const value = 30 / mapRef.getZoom();
+    mapRef.panTo(new L.LatLng(center.lat + value, center.lng));
+  }, [mapRef]);
+
+  const moveDownHandler = useCallback(() => {
+    const center = mapRef.getCenter();
+    const value = 30 / mapRef.getZoom();
+    mapRef.panTo(new L.LatLng(center.lat - value, center.lng));
+  }, [mapRef]);
+
+  const clearMapMarkers = useCallback(() => {
+    if (mapRef) {
+      roots.current.forEach((root) => {
+        setTimeout(() => {
+          try {
+            root.unmount();
+          } catch (err) {
+            console.log(err);
+          }
+        });
+      });
+      roots.current = [];
+
+      mapRef.eachLayer((layer) => {
+        if (!layer._url) {
+          mapRef.removeLayer(layer);
+        }
+      });
+      setMapMarkers([]);
+    }
+  }, [mapRef]);
+
+  const mapOptionsButtonsConfig = useMemo(
+    () => [
+      {
+        icon: <PlusOutlined style={{ color: "#727272" }} />,
+        handler: zoomHandler,
+      },
+      {
+        icon: <MinusOutlined style={{ color: "#727272" }} />,
+        handler: zoomOutHandler,
+      },
+      {
+        icon: <AimOutlined style={{ color: "#727272" }} />,
+        handler: recenterMap,
+      },
+      {
+        icon: <UpOutlined style={{ color: "#727272" }} />,
+        handler: moveUpHandler,
+      },
+      {
+        icon: <DownOutlined style={{ color: "#727272" }} />,
+        handler: moveDownHandler,
+      },
+    ],
+    [zoomHandler, moveUpHandler, moveDownHandler, zoomOutHandler, recenterMap]
+  );
+
+  return {
+    addIconToMapInitialy,
+    activeMarker: mappedActiveMarker,
+    mapOptionsButtonsConfig,
+    setActiveMarker,
+    mapMarkers,
+    clearMapMarkers,
+    getZoom,
+    polylinesRef,
+    activeStakeholder,
+  };
 }