datastake-daf 0.6.100 → 0.6.102

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

@@ -1,14 +1,13 @@
 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";
@@ -16,144 +15,147 @@ 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]
-  );
-
-  // 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],
+	);
+
+	// 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 totals = {
 						major: incidents.filter((d) => d.type === "major_incident").length,
 						minor: incidents.filter((d) => d.type === "minor_incident").length,
@@ -166,6 +168,7 @@ 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 },
 							{
@@ -208,106 +211,104 @@ export function useMapHelper({
 					} else {
 						radius = 40;
 					}
- */
 
-          const { background, radius, totals } = getEventMarkerStyle(data);
-          innerHtml = `
+					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"
@@ -325,207 +326,201 @@ 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,
+	};
 }