refactor: Update marker icon size and anchor position in MapManager.ts (

#56)
Bigismall · Sep 27, 2024 · 6276233 · 6276233
2 parents be010f8 + 2afe8b1
commit 6276233
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git 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
@@ -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) {