vue-geojson-view-ts 1.3.11 → 1.3.12

package/package.json

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

package/src/components/MapView.vue

@@ -312,10 +312,16 @@ export default defineComponent({
                 feature.geometry.type === "MultiLineString" ||
                 feature.geometry.type === "Point"
               ) {
+                const self = this;
                 L.geoJson(feature, {
                   pointToLayer: this.getPointToLayer.bind(this),
                   onEachFeature: function (feature, layer) {
                     featureGroup.addLayer(layer);
+                    // Mostrar popup solo para Point
+                    if (feature.geometry.type === "Point") {
+                      var popupContent = self.getPopupContent(feature);
+                      layer.bindPopup(popupContent);
+                    }
                   },
                 });
               }
@@ -481,6 +487,32 @@ export default defineComponent({
         this.mapRender.panTo(newCenter, { animate: true, duration: 0.5 });
       }
     },
+    getPopupContent(feature: any): string {
+      // Puedes personalizar el contenido del popup aquí
+      const props = feature.properties || {};
+      // Solo toma en cuenta descripcion y fechaHoraLlegada
+      const descripcion = props.descripcion || "";
+      const fechaHoraLlegada = props.fechaHoraLlegada || "";
+
+      // Formatear fecha a dd-MM-yyyy hh:mm:ss
+      let fechaFormateada = "";
+      if (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())}`;
+      }
+      let html = "<div>";
+      html += `<b>Descripción:</b> ${descripcion}<br>`;
+      if (fechaFormateada) {
+        html += `<b>Fecha Hora Llegada:</b> ${fechaFormateada}<br>`;
+      }
+      html += "</div>";
+      return html;
+    },
   },
   watch: {
     coordinatesMap(newVal) {