From 76b93dbadc3fc270705985d3b33996fa08502ea8 Mon Sep 17 00:00:00 2001
From: artem <artem@webart-tech.ru>
Date: Thu, 17 Sep 2026 15:00:38 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=BB=D0=B0=D1=81=D1=82=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/workouts/components/WorkoutItem.vue | 85 ++++++++++++++++---
 1 file changed, 71 insertions(+), 14 deletions(-)

diff --git a/src/pages/workouts/components/WorkoutItem.vue b/src/pages/workouts/components/WorkoutItem.vue
index 68ce675..231c005 100644
--- a/src/pages/workouts/components/WorkoutItem.vue
+++ b/src/pages/workouts/components/WorkoutItem.vue
@@ -70,20 +70,25 @@
             color: 'gray',
           }"
         />
-        <yandex-map-marker
-          v-for="photo in photosWithCoords"
-          :key="'photo-' + photo.id"
-          :settings="{
-            coordinates: [
-              photo.longitude as number,
-              photo.latitude as number,
-            ] as LngLat,
-            onClick: (_: unknown, __: unknown) => openPhoto(photo),
-          }"
-          position="bottom-center"
-        >
-          <img :src="photo.url" class="map-photo-marker" :alt="photo.id" />
-        </yandex-map-marker>
+        <yandex-map-clusterer :grid-size="64" zoom-on-cluster-click>
+          <yandex-map-marker
+            v-for="photo in photosWithCoords"
+            :key="'photo-' + photo.id"
+            :settings="{
+              coordinates: [
+                photo.longitude as number,
+                photo.latitude as number,
+              ] as LngLat,
+              onClick: (_: unknown, __: unknown) => openPhoto(photo),
+            }"
+            position="bottom-center"
+          >
+            <img :src="photo.url" class="map-photo-marker" :alt="photo.id" />
+          </yandex-map-marker>
+          <template #cluster="{ length }">
+            <div class="photo-cluster">{{ length }}</div>
+          </template>
+        </yandex-map-clusterer>
       </yandex-map>
     </div>
     <div id="workout-short-data">
@@ -223,6 +228,22 @@
     <div class="workout-photos-grid" v-if="photos.length > 0">
       <div class="workout-photo" v-for="photo in photos" :key="photo.id">
         <img :src="photo.url" :alt="photo.id" @click="openPhoto(photo)" />
+        <svg
+          v-if="photo.latitude !== null && photo.longitude !== null"
+          class="workout-photo-loc"
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          @click.stop="focusPhotoOnMap(photo)"
+        >
+          <path
+            d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"
+            fill="#fff"
+            stroke="#000"
+            stroke-width="1"
+          />
+          <circle cx="12" cy="9" r="2.5" fill="#007afc" />
+        </svg>
         <VaButton
           v-if="isPrivate"
           preset="danger"
@@ -434,6 +455,7 @@ import {
   YandexMapDefaultMarker,
   YandexMapMarker,
   YandexMapListener,
+  YandexMapClusterer,
 } from "vue-yandex-maps";
 import {
   WorkoutItem,
@@ -1182,6 +1204,15 @@ const openPhoto = (photo: WorkoutPhoto) => {
     showLightbox.value = true;
   }
 };
+function focusPhotoOnMap(photo: WorkoutPhoto) {
+  if (photo.latitude === null || photo.longitude === null) return;
+  map.value?.update({
+    location: {
+      center: [photo.longitude as number, photo.latitude as number] as LngLat,
+      zoom: 15,
+    },
+  });
+}
 const prevPhoto = () => {
   lightboxIndex.value =
     (lightboxIndex.value - 1 + photos.value.length) % photos.value.length;
@@ -1454,6 +1485,32 @@ h3 {
   cursor: pointer;
   display: block;
 }
+.photo-cluster {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #007afc;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3px solid #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+}
+.workout-photo-loc {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  background: rgba(0, 0, 0, 0.45);
+  border-radius: 50%;
+  padding: 2px;
+  cursor: pointer;
+  z-index: 2;
+  color: #fff;
+}
 .photo-lightbox {
   position: fixed;
   inset: 0;