From 6801f9eb6fdc9dedbd1ffb02401f3a7c0ef273b1 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Wed, 6 May 2026 10:28:09 +0100
Subject: [PATCH] refactor(LocationMap): remove unused marker styles and
 functions; update location map container styles

---
 .../background/components/LocationMap.jsx     | 32 -------------
 .../background/scss/_photoinformation.scss    | 48 ++++++++++++++-----
 2 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/src/features/background/components/LocationMap.jsx b/src/features/background/components/LocationMap.jsx
index 3505dae2..d43796a4 100644
--- a/src/features/background/components/LocationMap.jsx
+++ b/src/features/background/components/LocationMap.jsx
@@ -13,16 +13,6 @@ const COMPACT_ZOOM = 1.2;
 const COUNTRY_ZOOM_PADDING = 5;
 const COUNTRY_BOUNDS_CACHE = new Map();
 
-const MARKER_COLORS = {
-  light: '#555555',
-  dark: '#2d3e5f',
-};
-
-const MARKER_BORDERS = {
-  light: 'rgba(255, 255, 255, 0.95)',
-  dark: 'rgba(255, 255, 255, 0.95)',
-};
-
 const getResolvedTheme = () => {
   const theme = localStorage.getItem('theme') || 'auto';
   if (theme === 'auto') {
@@ -34,21 +24,6 @@ const getResolvedTheme = () => {
   return theme === 'dark' ? 'dark' : 'light';
 };
 
-const createCircleMarker = (theme, compact) => {
-  const markerElement = document.createElement('div');
-  markerElement.className = `location-map-marker${compact ? ' location-map-marker--compact' : ''}`;
-  markerElement.style.width = compact ? '8px' : '12px';
-  markerElement.style.height = compact ? '8px' : '12px';
-  markerElement.style.borderRadius = '50%';
-  markerElement.style.borderStyle = 'solid';
-  markerElement.style.borderWidth = compact ? '1.5px' : '2px';
-  markerElement.style.boxShadow = compact ? '0 0 0 1px rgba(0, 0, 0, 0.2)' : '0 0 0 2px rgba(0, 0, 0, 0.2)';
-  markerElement.style.opacity = compact && theme === 'light' ? '0.82' : '1';
-  markerElement.style.backgroundColor = MARKER_COLORS[theme] || MARKER_COLORS.light;
-  markerElement.style.borderColor = MARKER_BORDERS[theme] || MARKER_BORDERS.light;
-  return markerElement;
-};
-
 const hideCompactMapLabels = (mapInstance) => {
   const layers = mapInstance.getStyle()?.layers || [];
   layers.forEach((layer) => {
@@ -210,13 +185,6 @@ function LocationMap({ latitude, longitude, compact = false }) {
       });
     });
 
-    new maplibregl.Marker({
-      element: createCircleMarker(resolvedTheme, compact),
-      anchor: 'center',
-    })
-      .setLngLat([longitude, latitude])
-      .addTo(mapInstance);
-
     return () => {
       mapInstance.remove();
       if (map.current === mapInstance) {
diff --git a/src/features/background/scss/_photoinformation.scss b/src/features/background/scss/_photoinformation.scss
index 3a11c39c..d792ae6d 100644
--- a/src/features/background/scss/_photoinformation.scss
+++ b/src/features/background/scss/_photoinformation.scss
@@ -620,6 +620,7 @@
   }
 
   .location-map-container {
+    position: relative;
     width: 100%;
     height: 150px;
     border-radius: 12px;
@@ -634,6 +635,41 @@
     .maplibregl-canvas {
       transition: filter 0.2s ease;
     }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      background: rgb(255 255 255 / 92%);
+      box-shadow: 0 0 3px rgb(0 0 0 / 40%);
+      border-radius: 1px;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    &::before {
+      width: 18px;
+      height: 1.5px;
+      transform: translate(-50%, -50%);
+    }
+
+    &::after {
+      width: 1.5px;
+      height: 18px;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .location-map-container--compact {
+    &::before {
+      width: 12px;
+    }
+
+    &::after {
+      height: 12px;
+    }
   }
 
   &--compact {
@@ -673,18 +709,6 @@
   border-color: rgb(255 255 255 / 28%);
 }
 
-.location-map-marker {
-  width: 12px;
-  height: 12px;
-  border: 2px solid;
-  border-radius: 50%;
-  box-shadow: 0 0 0 2px rgb(0 0 0 / 20%);
-
-  &--compact {
-    width: 8px;
-    height: 8px;
-  }
-}
 
 // Smooth expansion animations
 .extra-content {