#49 feat: boton para volver al zoom general en el mapa de provenance con icono fit-to-page

src/components/provenance/ProvenanceMap.vue

@@ -26,7 +26,18 @@
       </v-card>
 
       <template v-if="hasMarkers">
-        <div ref="mapEl" class="map-wrapper" />
+        <div class="map-container">
+          <div ref="mapEl" class="map-wrapper" />
+          <v-btn
+            class="map-reset-zoom"
+            data-test="map-reset-zoom"
+            density="comfortable"
+            icon="mdi-fit-to-page"
+            size="small"
+            variant="flat"
+            @click="resetZoom"
+          />
+        </div>
         <v-alert
           v-if="!storePosition"
           class="mt-2"
@@ -267,6 +278,10 @@
     modalVisible.value = true
   }
 
+  function resetZoom () {
+    if (map) fitBounds()
+  }
+
   function openDialog (markerData) {
     selectedProduct.value = markerData.product
     selectedRelation.value = markerData.relation
@@ -313,6 +328,10 @@
 </script>
 
 <style scoped>
+.map-container {
+  position: relative;
+}
+
 .map-wrapper {
   position: relative;
   width: 100%;
@@ -322,6 +341,13 @@
   z-index: 0;
 }
 
+.map-reset-zoom {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1000;
+}
+
 .map-wrapper :deep(.provenance-product-pin) {
   display: flex;
   align-items: center;