vue-geojson-view-ts 1.3.21 → 1.3.23

package/package.json

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

package/src/components/MapView.vue

@@ -7,14 +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 origenIconUrl from "../assets/origen.png";
 import destinoIconUrl from "../assets/destino.png";
 import llegadaIconUrl from "../assets/llegada.png";
-import DestinoIconReferencia from "../assets/address.svg";
-import LLegadaSalidaIconReferencia from "../assets/entidad.svg";
 import * as L from "leaflet";
 import "leaflet-draw";
 import "leaflet/dist/leaflet.css";
@@ -70,6 +65,8 @@ export default defineComponent({
     getCoodMarker: { type: Function, required: false },
     getGeoJSON: { type: Function, required: false },
     loadPolygon: { type: Boolean, required: false },
+    markerCircleSize: { type: Number, required: false, default: 14 }, // px
+    markerSvgSize: { type: Number, required: false, default: 10 }, // px
   },
   data() {
     return {
@@ -501,8 +498,9 @@ export default defineComponent({
                   if (Array.isArray(coordProps) && coordProps.length) {
                     for (let i = 0; i < coords.length; i++) {
                       // Unificar círculo y flecha en un solo divIcon
-                      let iconHtml =
-                        '<div style="display:flex;align-items:center;justify-content:center;width:14px;height:14px;">';
+                      const circleSize = this.markerCircleSize || 14;
+                      const svgSize = this.markerSvgSize || 10;
+                      let iconHtml = `<div style="display:flex;align-items:center;justify-content:center;width:${circleSize}px;height:${circleSize}px;">`;
                       // Círculo azul con padding, envuelve el SVG
                       let arrowSvg = "";
                       if (
@@ -527,16 +525,20 @@ export default defineComponent({
                         let brng = Math.atan2(y, x);
                         brng = toDeg(brng);
                         const angle = (brng + 360) % 360;
-                        arrowSvg = `<svg width="10" height="10" viewBox="0 0 22 22" style="display:block;transform:rotate(${angle}deg);"><polygon points="11,3 15,17 11,14 7,17" fill="#fff" stroke="#fff" stroke-width="1.5"/></svg>`;
+                        arrowSvg = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 22 22" style="display:block;transform:rotate(${angle}deg);"><polygon points="11,3 15,17 11,14 7,17" fill="#fff" stroke="#fff"/></svg>`;
                       }
-                      iconHtml += `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1px;width:8px;height:8px;display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
+                      iconHtml +=
+                        `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1px;` +
+                        `width:${circleSize - 6}px;` +
+                        `height:${circleSize - 6}px;` +
+                        `display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
                       iconHtml += "</div>";
                       const marker = L.marker([coords[i][1], coords[i][0]], {
                         icon: L.divIcon({
                           className: "",
                           html: iconHtml,
-                          iconSize: [14, 14],
-                          iconAnchor: [7, 7],
+                          iconSize: [circleSize, circleSize],
+                          iconAnchor: [circleSize / 2, circleSize / 2],
                         }),
                         zIndexOffset: -100,
                       });
@@ -599,10 +601,9 @@ export default defineComponent({
                 // Only render per-vertex markers/arrows when coordProperties exist and are non-empty
                 if (Array.isArray(coordProps) && coordProps.length) {
                   for (let i = 0; i < coords.length; i++) {
-                    // Unificar círculo y flecha en un solo divIcon
-                    let iconHtml =
-                      '<div style="display:flex;align-items:center;justify-content:center;width:14px;height:14px;">';
-                    // Círculo azul con padding, envuelve el SVG
+                    const circleSize = this.markerCircleSize || 14;
+                    const svgSize = this.markerSvgSize || 10;
+                    let iconHtml = `<div style="display:flex;align-items:center;justify-content:center;width:${circleSize}px;height:${circleSize}px;">`;
                     let arrowSvg = "";
                     if (
                       i < coords.length - 1 &&
@@ -613,7 +614,6 @@ export default defineComponent({
                       new Date(coordProps[i + 1].fecha) >
                         new Date(coordProps[i].fecha)
                     ) {
-                      // Calcular ángulo (bearing)
                       const toRad = (deg: number) => (deg * Math.PI) / 180;
                       const toDeg = (rad: number) => (rad * 180) / Math.PI;
                       const lat1 = toRad(coords[i][1]);
@@ -626,16 +626,20 @@ export default defineComponent({
                       let brng = Math.atan2(y, x);
                       brng = toDeg(brng);
                       const angle = (brng + 360) % 360;
-                      arrowSvg = `<svg width="10" height="10" viewBox="0 0 22 22" style="display:block;transform:rotate(${angle}deg);"><polygon points="11,3 15,17 11,14 7,17" fill="#fff" stroke="#fff" stroke-width="1.5"/></svg>`;
+                      arrowSvg = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 22 22" style="display:block;transform:rotate(${angle}deg);"><polygon points="11,3 15,17 11,14 7,17" fill="#fff" stroke="#fff"/></svg>`;
                     }
-                    iconHtml += `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1.5px;width:8px;height:8px;display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
+                    iconHtml +=
+                      `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1.5px;` +
+                      `width:${circleSize - 6}px;` +
+                      `height:${circleSize - 6}px;` +
+                      `display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
                     iconHtml += "</div>";
                     const marker = L.marker([coords[i][1], coords[i][0]], {
                       icon: L.divIcon({
                         className: "",
                         html: iconHtml,
-                        iconSize: [14, 14],
-                        iconAnchor: [7, 7],
+                        iconSize: [circleSize, circleSize],
+                        iconAnchor: [circleSize / 2, circleSize / 2],
                       }),
                     });
                     marker.addTo(featureGroup);
@@ -939,14 +943,51 @@ export default defineComponent({
       const formatIsoPreserve = (iso: string): string => {
         const d = new Date(iso);
         if (isNaN(d.getTime())) return iso;
-        const pad = (n: number) => n.toString().padStart(2, "0");
-        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}`;
+
+        // Intentamos usar Intl para formatear en la zona horaria de Bolivia (America/La_Paz)
+        try {
+          const parts = new Intl.DateTimeFormat("es-BO", {
+            timeZone: "America/La_Paz",
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            hour12: false,
+          }).formatToParts(d);
+
+          const getPart = (type: string) =>
+            parts.find((p) => p.type === type)?.value || "";
+          const day = getPart("day");
+          const month = getPart("month");
+          const year = getPart("year");
+          const hour = getPart("hour");
+          const minute = getPart("minute");
+          const second = getPart("second");
+
+          return `${day}/${month}/${year} ${hour}:${minute}:${second}`;
+
+          // const pad = (n: number) => n.toString().padStart(2, "0");
+          // 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}`;
+        } catch (error) {
+          // Fallback: aplicar un offset fijo de -4 horas (Bolivia) sobre la fecha UTC recibida.
+          const boliviaOffsetMinutes = -4 * 60; // UTC-4
+          const localMs = d.getTime() + boliviaOffsetMinutes * 60_000;
+          const bd = new Date(localMs);
+          const pad = (n: number) => n.toString().padStart(2, "0");
+          return `${pad(bd.getUTCDate())}/${pad(
+            bd.getUTCMonth() + 1
+          )}/${bd.getUTCFullYear()} ${pad(bd.getUTCHours())}:${pad(
+            bd.getUTCMinutes()
+          )}:${pad(bd.getUTCSeconds())}`;
+        }
       };
 
       // Formatear fecha a dd-MM-yyyy hh:mm:ss