vue-geojson-view-ts 1.3.20 → 1.3.22

package/package.json

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

package/src/components/MapView.vue

@@ -70,6 +70,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 {
@@ -497,48 +499,56 @@ export default defineComponent({
                     Array.isArray(feature.properties.coordProperties)
                       ? feature.properties.coordProperties
                       : [];
-                  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
-                    let arrowSvg = "";
-                    if (
-                      i < coords.length - 1 &&
-                      coordProps[i] &&
-                      coordProps[i + 1] &&
-                      coordProps[i].fecha &&
-                      coordProps[i + 1].fecha &&
-                      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]);
-                      const lat2 = toRad(coords[i + 1][1]);
-                      const dLon = toRad(coords[i + 1][0] - coords[i][0]);
-                      const y = Math.sin(dLon) * Math.cos(lat2);
-                      const x =
-                        Math.cos(lat1) * Math.sin(lat2) -
-                        Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
-                      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>`;
+                  // 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
+                      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 (
+                        i < coords.length - 1 &&
+                        coordProps[i] &&
+                        coordProps[i + 1] &&
+                        coordProps[i].fecha &&
+                        coordProps[i + 1].fecha &&
+                        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]);
+                        const lat2 = toRad(coords[i + 1][1]);
+                        const dLon = toRad(coords[i + 1][0] - coords[i][0]);
+                        const y = Math.sin(dLon) * Math.cos(lat2);
+                        const x =
+                          Math.cos(lat1) * Math.sin(lat2) -
+                          Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
+                        let brng = Math.atan2(y, x);
+                        brng = toDeg(brng);
+                        const angle = (brng + 360) % 360;
+                        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:${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: [circleSize, circleSize],
+                          iconAnchor: [circleSize / 2, circleSize / 2],
+                        }),
+                        zIndexOffset: -100,
+                      });
+                      marker.addTo(featureGroup);
                     }
-                    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>";
-                    const marker = L.marker([coords[i][1], coords[i][0]], {
-                      icon: L.divIcon({
-                        className: "",
-                        html: iconHtml,
-                        iconSize: [14, 14],
-                        iconAnchor: [7, 7],
-                      }),
-                      zIndexOffset: -100,
-                    });
-                    marker.addTo(featureGroup);
                   }
                 }
               }
@@ -593,47 +603,52 @@ export default defineComponent({
                   Array.isArray(item.properties.coordProperties)
                     ? item.properties.coordProperties
                     : [];
-                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
-                  let arrowSvg = "";
-                  if (
-                    i < coords.length - 1 &&
-                    coordProps[i] &&
-                    coordProps[i + 1] &&
-                    coordProps[i].fecha &&
-                    coordProps[i + 1].fecha &&
-                    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]);
-                    const lat2 = toRad(coords[i + 1][1]);
-                    const dLon = toRad(coords[i + 1][0] - coords[i][0]);
-                    const y = Math.sin(dLon) * Math.cos(lat2);
-                    const x =
-                      Math.cos(lat1) * Math.sin(lat2) -
-                      Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
-                    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>`;
+                // 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++) {
+                    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 &&
+                      coordProps[i] &&
+                      coordProps[i + 1] &&
+                      coordProps[i].fecha &&
+                      coordProps[i + 1].fecha &&
+                      new Date(coordProps[i + 1].fecha) >
+                        new Date(coordProps[i].fecha)
+                    ) {
+                      const toRad = (deg: number) => (deg * Math.PI) / 180;
+                      const toDeg = (rad: number) => (rad * 180) / Math.PI;
+                      const lat1 = toRad(coords[i][1]);
+                      const lat2 = toRad(coords[i + 1][1]);
+                      const dLon = toRad(coords[i + 1][0] - coords[i][0]);
+                      const y = Math.sin(dLon) * Math.cos(lat2);
+                      const x =
+                        Math.cos(lat1) * Math.sin(lat2) -
+                        Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
+                      let brng = Math.atan2(y, x);
+                      brng = toDeg(brng);
+                      const angle = (brng + 360) % 360;
+                      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:${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: [circleSize, circleSize],
+                        iconAnchor: [circleSize / 2, circleSize / 2],
+                      }),
+                    });
+                    marker.addTo(featureGroup);
                   }
-                  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>";
-                  const marker = L.marker([coords[i][1], coords[i][0]], {
-                    icon: L.divIcon({
-                      className: "",
-                      html: iconHtml,
-                      iconSize: [14, 14],
-                      iconAnchor: [7, 7],
-                    }),
-                  });
-                  marker.addTo(featureGroup);
                 }
               }
             }
@@ -952,7 +967,11 @@ export default defineComponent({
       // Seleccionar el icono de referencia según el tipo (1 -> Destino, else -> LLegadaSalida)
       const tipo = props.tipo;
       const referenciaIcon =
-        tipo === 1 ? DestinoIconReferencia : LLegadaSalidaIconReferencia;
+        tipo === 0
+          ? origenIconUrl
+          : tipo === 1
+          ? destinoIconUrl
+          : llegadaIconUrl;
 
       // Construir HTML del popup con mejor UI para la imagen
       // Contenedor externo controla el ancho; el popup tiene su propia clase para limitar altura
@@ -965,7 +984,7 @@ export default defineComponent({
       // Icono de referencia a la izquierda de la descripción
       html += `<div style="display:flex;align-items:center;gap:8px;padding-top:6px;">`;
       if (referenciaIcon) {
-        html += `<img src="${referenciaIcon}" style="width:20px;height:20px;flex:0 0 20px;"/>`;
+        html += `<img src="${referenciaIcon}" style="width:30px;height:30px;flex:0 0 15px;"/>`;
       }
       if (fechaFormateada) {
         html += `<div style="font-size:14px;"><b>${descripcion}:</b> ${fechaFormateada}</div>`;