vue-geojson-view-ts 1.3.10 → 1.3.12

package/package.json

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

package/src/components/MapView.vue

@@ -7,6 +7,9 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { markerDefault } from "../helpers/imgBase64";
+import homeIconUrl from "../assets/home.png";
+import endIconUrl from "../assets/end.png";
+import trackingIconUrl from "../assets/tracking.png";
 import * as L from "leaflet";
 import "leaflet-draw";
 import "leaflet/dist/leaflet.css";
@@ -309,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);
+                    }
                   },
                 });
               }
@@ -419,17 +428,17 @@ export default defineComponent({
       if (geometryType === "Point") {
         const tipo = feature.properties?.tipo;
         const firstIcon = L.icon({
-          iconUrl: "/image/home.png",
+          iconUrl: homeIconUrl,
           iconSize: [38, 38],
           iconAnchor: [16, 41],
         });
         const lastIcon = L.icon({
-          iconUrl: "/image/end.png",
+          iconUrl: endIconUrl,
           iconSize: [38, 38],
           iconAnchor: [16, 41],
         });
         const pointerIcon = L.icon({
-          iconUrl: "/image/tracking.png",
+          iconUrl: trackingIconUrl,
           iconSize: [38, 38],
           iconAnchor: [16, 41],
         });
@@ -478,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) {