From 2afe8b1b0a421a2b1f3473705de219f90306bc64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C5=82awomir=20Rodak?= <slawomir.rodak@schibsted.pl>
Date: Fri, 27 Sep 2024 18:32:09 +0200
Subject: [PATCH] refactor: Update marker icon size and anchor position in
 MapManager.ts

The marker icon size and anchor position in the MapManager class have been updated to improve the visual representation of the markers on the map. The icon size has been changed to [64, 64] pixels, and the anchor position has been adjusted to [32, 16] for the default marker and [32, 32] for markers with a specific direction.

refactor: Update arrow icon size in marker.ts

The arrow icon size in the marker.ts file has been updated to improve its visual appearance. The size of the arrow icon has been changed to 800px by 800px.

refactor: Update pin icon size in marker.ts

The pin icon size in the marker.ts file has been updated to improve its visual appearance. The size of the pin icon has been changed to 800px by 800px.
---
 src/scripts/MapManager.ts | 15 ++++-----------
 src/scripts/marker.ts     |  7 +++++--
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/scripts/MapManager.ts b/src/scripts/MapManager.ts
index 30b03b5..0af17cd 100644
--- a/src/scripts/MapManager.ts
+++ b/src/scripts/MapManager.ts
@@ -7,11 +7,6 @@ import ObserverPublisher from "./ObserverPublisher";
 import Publisher from "./Publisher.class";
 import { fault, log } from "./console.ts";
 import { markerIcon } from "./marker.ts";
-/*
- * TODO default center map in the center of Europe, save the latest position in local storage and use next time
- *  AND ZOOM LEVEL
- *
- */
 
 const DEFAULT_CENTER: [number, number] = [54.403397, 18.570665];
 const DEFAULT_ZOOM: number = 14;
@@ -96,9 +91,8 @@ export default class MapManager extends ObserverPublisher(Publisher) {
       this.marker.setIcon(
         L.icon({
           iconUrl: markerIcon(null),
-          iconSize: [80, 80], // size of the icon
-          iconAnchor: [40, 80], // point of the icon which will correspond to marker's location
-          popupAnchor: [40, 0], // point from which the popup should open relative to the iconAnchor
+          iconSize: [64, 64], // size of the icon
+          iconAnchor: [32, 16], // point of the icon which will correspond to marker's location
         }),
       );
       this.show({ title: true });
@@ -117,9 +111,8 @@ export default class MapManager extends ObserverPublisher(Publisher) {
       this.marker.setIcon(
         L.icon({
           iconUrl: markerIcon(dir),
-          iconSize: [80, 80], // size of the icon
-          iconAnchor: [40, 80], // point of the icon which will correspond to marker's location
-          popupAnchor: [40, 0], // point from which the popup should open relative to the iconAnchor
+          iconSize: [64, 64], // size of the icon
+          iconAnchor: [32, 32], // point of the icon which will correspond to marker's location
         }),
       );
     }
diff --git a/src/scripts/marker.ts b/src/scripts/marker.ts
index 166de68..0255205 100644
--- a/src/scripts/marker.ts
+++ b/src/scripts/marker.ts
@@ -1,9 +1,12 @@
 const arrowIcon = (direction: number): string =>
-  `<svg width="400" height="400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(${direction} 12 12)"><path d="M12 4V20M12 4L8 8M12 4L16 8" stroke="#c00000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`;
+  `<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(${direction} 12 12)"><path d="M7 20.6622C4.01099 18.9331 2 15.7014 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.7014 19.989 18.9331 17 20.6622M16 12.0001L12 8.00007M12 8.00007L8 12.0001M12 8.00007V22.0001" stroke="#c00000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`;
+
 const pinIcon: string =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-3 0 20 20"><path fill="#2c3e50" fill-rule="evenodd" d="M7 9.219a2 2 0 1 1-.001-3.999A2 2 0 0 1 7 9.22M7 0a7 7 0 0 0-7 7c0 3.866 7 13 7 13s7-9.134 7-13a7 7 0 0 0-7-7"/></svg>';
+  '<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 14.2864C3.14864 15.1031 2 16.2412 2 17.5C2 19.9853 6.47715 22 12 22C17.5228 22 22 19.9853 22 17.5C22 16.2412 20.8514 15.1031 19 14.2864M18 8C18 12.0637 13.5 14 12 17C10.5 14 6 12.0637 6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8ZM13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z" stroke="#c00000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
 const escapeSVG = (svg: string): string =>
   svg.replace(/[<>#%{}"]/g, (x) => `%${x.charCodeAt(0).toString(16)}`);
+
 export const markerIcon = (direction: number | null) => {
   const dataImagePrefix = "data:image/svg+xml,";
   if (direction == null) {