fix: esthetics of the pin rendering

src/components/Map/MapViewer/utils/config/getCanvasIcon.ts

 import { PIN_PATH2D, PIN_SIZE } from '@/constants/canvas';
-import { HALF, QUARTER, THIRD } from '@/constants/dividers';
+import { HALF, ONE_AND_HALF, QUARTER, THIRD, TWO_AND_HALF } from '@/constants/dividers';
 import { DEFAULT_FONT_FAMILY } from '@/constants/font';
 import { Point } from '@/types/map';
 import { getCanvas } from '@/utils/canvas/getCanvas';
@@ -7,6 +7,7 @@ import { getFontSizeToFit } from '@/utils/canvas/getFontSizeToFit';
 
 const SMALL_TEXT_VALUE = 1;
 const MEDIUM_TEXT_VALUE = 10;
+const BIG_TEXT_VALUE = 100;
 
 interface Args {
   color: string;
@@ -25,14 +26,16 @@ const getTextWidth = (value: number): number => {
       return PIN_SIZE.width / QUARTER;
     case value < MEDIUM_TEXT_VALUE:
       return PIN_SIZE.width / THIRD;
-    default:
+    case value < BIG_TEXT_VALUE:
       return PIN_SIZE.width / HALF;
+    default:
+      return PIN_SIZE.width / ONE_AND_HALF;
   }
 };
 
 const getTextPosition = (textWidth: number, textHeight: number): Point => ({
   x: (PIN_SIZE.width - textWidth) / HALF,
-  y: (PIN_SIZE.height - textHeight) / QUARTER,
+  y: (PIN_SIZE.height - textHeight) / TWO_AND_HALF,
 });
 
 const drawNumberOnCanvas = ({ value }: Args, ctx: CanvasRenderingContext2D): void => {
@@ -41,7 +44,7 @@ const drawNumberOnCanvas = ({ value }: Args, ctx: CanvasRenderingContext2D): voi
 
   const textWidth = getTextWidth(value);
   const fontSize = getFontSizeToFit(ctx, text, DEFAULT_FONT_FAMILY, textWidth);
-  const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
+  const textHeight = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
   const { x, y } = getTextPosition(textWidth, textHeight);
 
   ctx.fillStyle = 'white';

src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts

 /* eslint-disable no-magic-numbers */
+import { PIN_SIZE } from '@/constants/canvas';
 import { allBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEntity.selectors';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
 import { Feature } from 'ol';
@@ -31,7 +32,7 @@ export const useOlMapPinsLayer = (): BaseLayer => {
 
         const style = new Style({
           image: new Icon({
-            displacement: [0, 32],
+            displacement: [0, PIN_SIZE.height],
             anchorXUnits: 'fraction',
             anchorYUnits: 'pixels',
             img: getCanvasIcon({

src/constants/dividers.ts

+export const ONE_AND_HALF = 1.5;
 export const HALF = 2;
+export const TWO_AND_HALF = 2.5;
 export const THIRD = 3;
 export const QUARTER = 4;