vue-geojson-view-ts 1.3.11 → 1.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "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);
+                    }
                   },
                 });
               }
@@ -329,9 +335,15 @@ export default defineComponent({
               item.geometry.type === "Point" ||
               item.geometry.type === "MultiPoint"
             ) {
+              const self = this;
               L.geoJson(item, {
                 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 +493,37 @@ 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 || "";
+      // url de la foto
+      const fotoId = props.fotoId || "";
+
+      // 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>";
+      if (fotoId) {
+        html += `<img src="${fotoId}" style="width: 200px; height: auto; margin-bottom: 5px;"><br>`;
+      }
+      html += `<b>Descripción:</b> ${descripcion}<br>`;
+      if (fechaFormateada) {
+        html += `<b>Fecha Hora Llegada:</b> ${fechaFormateada}<br>`;
+      }
+      html += "</div>";
+      return html;
+    },
   },
   watch: {
     coordinatesMap(newVal) {