vue-geojson-view-ts 1.3.15 → 1.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.15",
+  "version": "1.3.17",
   "type": "module",
   "files": [
     "dist",

package/src/components/MapView.vue

@@ -453,11 +453,20 @@ export default defineComponent({
                   pointToLayer: this.getPointToLayer.bind(this),
                   onEachFeature: function (feature, layer) {
                     featureGroup.addLayer(layer);
-                    // Mostrar popup solo para Point
+                    // Mostrar popup para Point
                     if (feature.geometry.type === "Point") {
                       var popupContent = self.getPopupContent(feature);
                       layer.bindPopup(popupContent);
                     }
+                    // Mostrar popup para Polygon y MultiPolygon al hacer clic
+                    else if (
+                      feature.geometry.type === "Polygon" ||
+                      feature.geometry.type === "MultiPolygon"
+                    ) {
+                      var tooltipContent =
+                        self.getPolygonTooltipContent(feature);
+                      layer.bindPopup(tooltipContent);
+                    }
                   },
                 });
               }
@@ -475,11 +484,19 @@ export default defineComponent({
               L.geoJson(item, {
                 onEachFeature: function (feature, layer) {
                   featureGroup.addLayer(layer);
-                  // Mostrar popup solo para Point
+                  // Mostrar popup para Point
                   if (feature.geometry.type === "Point") {
                     var popupContent = self.getPopupContent(feature);
                     layer.bindPopup(popupContent);
                   }
+                  // Mostrar popup para Polygon y MultiPolygon al hacer clic
+                  else if (
+                    feature.geometry.type === "Polygon" ||
+                    feature.geometry.type === "MultiPolygon"
+                  ) {
+                    var tooltipContent = self.getPolygonTooltipContent(feature);
+                    layer.bindPopup(tooltipContent);
+                  }
                 },
               });
             }
@@ -638,16 +655,31 @@ export default defineComponent({
       // url de la foto
       const fotoId = props.fotoId || "";
 
+      const formatIsoPreserve = (iso: string): string => {
+        const d = new Date(iso);
+        if (isNaN(d.getTime())) return iso; // fallback: devolver la cadena original si no es válida
+        const pad = (n: number) => n.toString().padStart(2, "0");
+        // Usar métodos UTC para evitar que el navegador convierta a la zona local
+        const day = pad(d.getUTCDate());
+        const month = pad(d.getUTCMonth() + 1);
+        const year = d.getUTCFullYear();
+        const hours = pad(d.getUTCHours());
+        const minutes = pad(d.getUTCMinutes());
+        const seconds = pad(d.getUTCSeconds());
+        return `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;
+      };
+
       // Formatear fecha a dd-MM-yyyy hh:mm:ss
       let fechaFormateada = "";
       if (fechaHoraLlegada) {
-        const fecha = new Date(fechaHoraLlegada);
+        /* const fecha = new Date(fechaHoraLlegada);
         const pad = (n: number) => n.toString().padStart(2, "0");
         fechaFormateada = `${pad(fecha.getDate())}-${pad(
           fecha.getMonth() + 1
         )}-${fecha.getFullYear()} ${pad(fecha.getHours())}:${pad(
           fecha.getMinutes()
-        )}:${pad(fecha.getSeconds())}`;
+        )}:${pad(fecha.getSeconds())}`; */
+        fechaFormateada = formatIsoPreserve(fechaHoraLlegada);
       }
       let html = "<div>";
       if (fotoId) {
@@ -660,6 +692,12 @@ export default defineComponent({
       html += "</div>";
       return html;
     },
+    getPolygonTooltipContent(feature: any): string {
+      const props = feature.properties || {};
+      const descripcion = props.descripcion || props.name || "Sin descripción";
+
+      return `<div style="font-weight: bold; padding: 5px;">${descripcion}</div>`;
+    },
   },
   watch: {
     coordinatesMap(newVal) {