vue-geojson-view-ts 1.3.18 → 1.3.20

package/src/components/MapView.vue

@@ -1,718 +1,1044 @@
-<template>
-  <div class="map-container" :style="`height:${configurationMap?.height}`">
-    <div :id="idMap" style="height: 100%"></div>
-  </div>
-</template>
-
-<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";
-import "leaflet-draw/dist/leaflet.draw.css";
-import drawLocales from "leaflet-draw-locales";
-import axios from "axios";
-import "leaflet.fullscreen/Control.FullScreen.css";
-import "leaflet.fullscreen";
-import gpsIcon from "../assets/gps.svg";
-import sateliteIcon from "../assets/satelite.svg";
-
-declare global {
-  interface Window {
-    type: boolean;
-  }
-}
-
-L.Edit.Circle = L.Edit.CircleMarker.extend({
-  _createResizeMarker: function () {
-    var center = this._shape.getLatLng(),
-      resizemarkerPoint = this._getResizeMarkerPoint(center);
-
-    this._resizeMarkers = [];
-    this._resizeMarkers.push(
-      this._createMarker(resizemarkerPoint, this.options.resizeIcon)
-    );
-  },
-
-  _getResizeMarkerPoint: function (latlng: any) {
-    var delta = this._shape._radius * Math.cos(Math.PI / 4),
-      point = this._map.project(latlng);
-    return this._map.unproject([point.x + delta, point.y - delta]);
-  },
-
-  _resize: function (latlng: any) {
-    var moveLatLng = this._moveMarker.getLatLng();
-    var radius;
-
-    if (L.GeometryUtil.isVersion07x()) {
-      radius = moveLatLng.distanceTo(latlng);
-    } else {
-      radius = this._map.distance(moveLatLng, latlng);
-    }
-
-    // **** This fixes the cicle resizing ****
-    this._shape.setRadius(radius);
-
-    this._map.fire(L.Draw.Event.EDITRESIZE, { layer: this._shape });
-  },
-});
-
-export default defineComponent({
-  name: "MapView",
-  props: {
-    loadPolygon: Boolean,
-    reverseCoordinatesPolygon: Boolean,
-    dataPolygon: Object,
-    configurationMap: Object as any,
-    coordinatesMap: Array,
-    getGeoJSON: Function,
-    getCoodMarker: Function,
-    isSatelite: Boolean,
-  },
-  data() {
-    return {
-      idMap: "",
-      mapRender: null as L.Map | null,
-      markerRender: null as L.Marker | null,
-      renderCoordinates: this.coordinatesMap,
-      renderGeojson: this.dataPolygon as any,
-      markerIcon: {
-        iconUrl: markerDefault,
-        iconSize: [25, 41],
-        iconAnchor: [12, 41],
-      },
-      layersFeatureGroup: null as any,
-      featuresData: null as any,
-      currentTileLayer: null as L.TileLayer | null,
-      isSatelliteView: false,
-    };
-  },
-  mounted() {
-    this.makeid(10);
-    this.renderMap();
-  },
-  methods: {
-    createSatelliteControl(): L.Control {
-      const SatelliteControl = L.Control.extend({
-        onAdd: (map: L.Map) => {
-          const container = L.DomUtil.create(
-            "div",
-            "leaflet-control-draw leaflet-bar leaflet-control"
-          );
-
-          const satelliteButton = L.DomUtil.create(
-            "a",
-            "leaflet-draw-draw-satellite",
-            container
-          );
-
-          satelliteButton.href = "#";
-          satelliteButton.title = this.isSatelliteView
-            ? "Vista Normal"
-            : "Vista Satélite";
-
-          // Usar el mismo estilo que los otros botones de draw
-          satelliteButton.style.backgroundImage = this.isSatelliteView
-            ? `url(${gpsIcon})`
-            : `url(${sateliteIcon})`;
-          satelliteButton.style.backgroundPosition = "center";
-          satelliteButton.style.backgroundRepeat = "no-repeat";
-          satelliteButton.style.backgroundSize = "20px 20px";
-
-          L.DomEvent.disableClickPropagation(satelliteButton);
-          L.DomEvent.on(
-            satelliteButton,
-            "click",
-            this.toggleSatelliteView,
-            this
-          );
-
-          return container;
-        },
-      });
-
-      return new SatelliteControl({ position: "topleft" });
-    },
-    toggleSatelliteView(): void {
-      if (!this.mapRender || !this.currentTileLayer) return;
-
-      this.isSatelliteView = !this.isSatelliteView;
-
-      // Remover la capa actual
-      this.mapRender.removeLayer(this.currentTileLayer as unknown as L.Layer);
-
-      // Agregar la nueva capa
-      if (this.isSatelliteView) {
-        this.currentTileLayer = L.tileLayer(
-          "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
-          {
-            attribution:
-              '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }
-        );
-      } else {
-        this.currentTileLayer = L.tileLayer(
-          "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-          {
-            attribution:
-              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }
-        );
-      }
-
-      this.currentTileLayer.addTo(this.mapRender as L.Map);
-
-      // Actualizar el ícono del control satelital
-      const satelliteButtons = document.querySelectorAll(
-        ".leaflet-draw-draw-satellite"
-      );
-      satelliteButtons.forEach((button) => {
-        const htmlButton = button as HTMLElement;
-        htmlButton.style.backgroundImage = this.isSatelliteView
-          ? `url(${gpsIcon})`
-          : `url(${sateliteIcon})`;
-        htmlButton.title = this.isSatelliteView
-          ? "Vista Normal"
-          : "Vista Satélite";
-      });
-    },
-    getLayersFeaturesInGeoJson() {
-      const geojson = L.geoJSON().addTo(this.mapRender as any);
-      this.featuresData.eachLayer((layer: any) => {
-        geojson.addLayer(layer);
-      });
-      const geojsonString = [geojson.toGeoJSON()]; //JSON.stringify([geojson.toGeoJSON()]);
-      return geojsonString;
-    },
-    triggerSaveEdit(): void {
-      const buttons =
-        document.getElementsByClassName(
-          "leaflet-draw-actions leaflet-draw-actions-top"
-        ) ||
-        document.getElementsByClassName(
-          "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom"
-        );
-      buttons[0]?.querySelector("li")?.querySelector("a")?.click();
-    },
-    makeid(length: number): void {
-      let result = "";
-      const characters = "abcdefghijklmnopqrstuvwxyz";
-      const charactersLength = characters.length;
-      let counter = 0;
-      while (counter < length) {
-        result += characters.charAt(
-          Math.floor(Math.random() * charactersLength)
-        );
-        counter += 1;
-      }
-      this.idMap = result;
-    },
-    renderMap(): void {
-      drawLocales("es");
-      setTimeout(() => {
-        if (this.loadPolygon) {
-          this.viewMap();
-        } else {
-          this.createMap();
-        }
-      }, 500);
-    },
-    createMap(): void {
-      const iconDefaultMarket = this.configurationMap
-        ? this.configurationMap.iconMarker
-          ? this.configurationMap.iconMarker
-          : this.markerIcon
-        : this.markerIcon;
-      window.type = true;
-      const map = L.map(this.idMap, { fullscreenControl: true } as any).setView(
-        [
-          this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
-          this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
-        ],
-        this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
-      );
-      this.mapRender = map;
-
-      // Inicializar con la vista correcta según el prop
-      this.isSatelliteView = this.isSatelite || false;
-      if (this.isSatelliteView) {
-        this.currentTileLayer = L.tileLayer(
-          "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
-          {
-            attribution:
-              '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }
-        );
-      } else {
-        this.currentTileLayer = L.tileLayer(
-          "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-          {
-            attribution:
-              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }
-        );
-      }
-      this.currentTileLayer.addTo(map);
-
-      // Agregar el control satelital si está habilitado
-      if (this.isSatelite !== undefined) {
-        const satelliteControl = this.createSatelliteControl();
-        map.addControl(satelliteControl);
-      }
-
-      map.setZoom(this.configurationMap?.maxZoom);
-      if (this.configurationMap.renderMarker) {
-        const marker = L.marker(
-          [
-            this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
-            this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
-          ],
-          {
-            icon: L.icon(iconDefaultMarket),
-            draggable: this.configurationMap.dragMarker,
-          }
-        ).addTo(map);
-        this.markerRender = marker;
-        if (this.getCoodMarker) {
-          marker.on("dragend", (event) => {
-            const updatedCoordinates = event.target.getLatLng();
-            const lat = updatedCoordinates.lat;
-            const lng = updatedCoordinates.lng;
-            if (this.getCoodMarker) this.getCoodMarker(lat, lng);
-          });
-        }
-      }
-      const featuresData = L.featureGroup();
-      this.featuresData = featuresData;
-      const featureGroup = featuresData.addTo(map);
-      let contextEdit = {
-        featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
-        edit: false,
-        remove: this.configurationMap?.editFigures.remove,
-      };
-      if (this.configurationMap?.editFigures.edit) {
-        contextEdit = {
-          featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
-          ...this.configurationMap?.editFigures.edit,
-          remove: this.configurationMap?.editFigures.remove,
-        };
-      }
-      const drawControl = new L.Control.Draw({
-        position: "topleft",
-        draw: {
-          polygon: this.configurationMap?.createFigures.polygon,
-          circle: false, //this.configurationMap?.createFigures.circle,
-          rectangle: this.configurationMap?.createFigures.rectangle
-            ? {
-                shapeOptions: {
-                  color: "blue",
-                },
-              }
-            : false,
-          marker: this.configurationMap?.createFigures.marker
-            ? {
-                icon: L.icon(iconDefaultMarket),
-              }
-            : false,
-          polyline: this.configurationMap?.createFigures.polyline
-            ? {
-                shapeOptions: {
-                  color: "blue",
-                },
-              }
-            : false,
-          circlemarker: this.configurationMap?.createFigures.multipoint,
-        },
-        edit: contextEdit as any,
-      });
-      map.addControl(drawControl);
-
-      map.on("draw:created", (event: any) => {
-        const layer = event.layer;
-        featureGroup.addLayer(layer);
-        let geojson = layer.toGeoJSON();
-        // *** AGREGADO: Manejo especial para CircleMarker (convertir a MultiPoint) ***
-        if (event.layerType === "circlemarker") {
-          // Convertir CircleMarker a formato MultiPoint para consistencia
-          geojson = {
-            type: "Feature",
-            geometry: {
-              type: "MultiPoint",
-              coordinates: [geojson.geometry.coordinates],
-            },
-            properties: {
-              ...geojson.properties,
-              pointType: "multipoint",
-              style: {
-                color:
-                  this.configurationMap?.createFigures?.multipoint?.color ||
-                  "green",
-                fillColor:
-                  this.configurationMap?.createFigures?.multipoint?.fillColor ||
-                  "green",
-                fillOpacity:
-                  this.configurationMap?.createFigures?.multipoint
-                    ?.fillOpacity || 0.8,
-                radius:
-                  this.configurationMap?.createFigures?.multipoint?.radius || 6,
-                weight:
-                  this.configurationMap?.createFigures?.multipoint?.weight || 2,
-              },
-            },
-          };
-        }
-        if (this.getGeoJSON) this.getGeoJSON([geojson]);
-      });
-
-      map.on("draw:edited", (event: any) => {
-        const layers = event.layers;
-        layers.eachLayer((layer: any) => {
-          const geojson = layer.toGeoJSON();
-          if (this.getGeoJSON) this.getGeoJSON([geojson]);
-        });
-      });
-    },
-    viewMap(): void {
-      const iconDefaultMarket = this.configurationMap
-        ? this.configurationMap.iconMarker
-          ? this.configurationMap.iconMarker
-          : this.markerIcon
-        : this.markerIcon;
-      window.type = true;
-      const map = L.map(this.idMap, { fullscreenControl: true } as any).setView(
-        [
-          this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
-          this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
-        ],
-        this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
-      );
-      this.mapRender = map;
-
-      // Inicializar con la vista correcta según el prop
-      this.isSatelliteView = this.isSatelite || false;
-      if (this.isSatelliteView) {
-        this.currentTileLayer = L.tileLayer(
-          "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
-          {
-            attribution:
-              '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }
-        );
-      } else {
-        this.currentTileLayer = L.tileLayer(
-          "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-          {
-            attribution:
-              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }
-        );
-      }
-      this.currentTileLayer.addTo(map);
-
-      // Agregar el control satelital si está habilitado
-      if (this.isSatelite !== undefined) {
-        const satelliteControl = this.createSatelliteControl();
-        map.addControl(satelliteControl);
-      }
-
-      map.setZoom(this.configurationMap?.maxZoom);
-      const featuresData = L.featureGroup();
-      this.featuresData = featuresData;
-      const featureGroup = featuresData.addTo(map);
-      let contextEdit = {
-        featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
-        edit: false,
-        remove: this.configurationMap?.editFigures.remove,
-      };
-      if (this.configurationMap?.editFigures.edit) {
-        contextEdit = {
-          featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
-          ...this.configurationMap?.editFigures.edit,
-          remove: this.configurationMap?.editFigures.remove,
-        };
-      }
-
-      const renderGeojson = this.renderGeojson;
-      if (renderGeojson && renderGeojson.length) {
-        renderGeojson.forEach((item: any) => {
-          if (item.type === "FeatureCollection") {
-            item.features.forEach((feature: any) => {
-              if (
-                feature.geometry.type === "Polygon" ||
-                feature.geometry.type === "MultiPolygon" ||
-                feature.geometry.type === "LineString" ||
-                feature.geometry.type === "MultiLineString" ||
-                feature.geometry.type === "Point" ||
-                feature.geometry.type === "MultiPoint"
-              ) {
-                const self = this;
-                L.geoJson(feature, {
-                  pointToLayer: this.getPointToLayer.bind(this),
-                  onEachFeature: function (feature, layer) {
-                    featureGroup.addLayer(layer);
-                    // Mostrar popup para Point
-                    if (feature.geometry.type === "Point") {
-                      var popupContent = self.getPopupContent(feature);
-                      layer.bindPopup(popupContent);
-                    }
-                    // Mostrar popup para Polygon y MultiPolygon al hacer clic
-                    else if (
-                      feature.geometry.type === "Polygon" ||
-                      feature.geometry.type === "MultiPolygon"
-                    ) {
-                      var tooltipContent =
-                        self.getPolygonTooltipContent(feature);
-                      layer.bindPopup(tooltipContent);
-                    }
-                  },
-                });
-              }
-            });
-          } else if (item.type === "Feature") {
-            if (
-              item.geometry.type === "Polygon" ||
-              item.geometry.type === "MultiPolygon" ||
-              item.geometry.type === "LineString" ||
-              item.geometry.type === "MultiLineString" ||
-              item.geometry.type === "Point" ||
-              item.geometry.type === "MultiPoint"
-            ) {
-              const self = this;
-              L.geoJson(item, {
-                pointToLayer: this.getPointToLayer.bind(this),
-                onEachFeature: function (feature, layer) {
-                  featureGroup.addLayer(layer);
-                  // Mostrar popup para Point
-                  if (feature.geometry.type === "Point") {
-                    var popupContent = self.getPopupContent(feature);
-                    layer.bindPopup(popupContent);
-                  }
-                  // Mostrar popup para Polygon y MultiPolygon al hacer clic
-                  else if (
-                    feature.geometry.type === "Polygon" ||
-                    feature.geometry.type === "MultiPolygon"
-                  ) {
-                    var tooltipContent = self.getPolygonTooltipContent(feature);
-                    layer.bindPopup(tooltipContent);
-                  }
-                },
-              });
-            }
-          }
-        });
-        const bounds = featureGroup.getBounds();
-        map.fitBounds(bounds);
-      }
-      const drawControl = new L.Control.Draw({
-        position: "topleft",
-        draw: {
-          polygon: this.configurationMap?.createFigures.polygon,
-          circle: false, //this.configurationMap?.createFigures.circle,
-          rectangle: this.configurationMap?.createFigures.rectangle
-            ? {
-                shapeOptions: {
-                  color: "blue",
-                },
-              }
-            : false,
-          marker: this.configurationMap?.createFigures.marker
-            ? {
-                icon: L.icon(iconDefaultMarket),
-              }
-            : false,
-          polyline: this.configurationMap?.createFigures.polyline
-            ? {
-                shapeOptions: {
-                  color: "blue",
-                },
-              }
-            : false,
-          circlemarker: this.configurationMap?.createFigures.multipoint,
-        },
-        edit: contextEdit as any,
-      });
-      map.addControl(drawControl);
-
-      map.on("draw:created", (event: any) => {
-        const layer = event.layer;
-        featureGroup.addLayer(layer);
-        let geojson = layer.toGeoJSON();
-        // *** AGREGADO: Manejo especial para CircleMarker (convertir a MultiPoint) ***
-        if (event.layerType === "circlemarker") {
-          // Convertir CircleMarker a formato MultiPoint para consistencia
-          geojson = {
-            type: "Feature",
-            geometry: {
-              type: "MultiPoint",
-              coordinates: [geojson.geometry.coordinates],
-            },
-            properties: {
-              ...geojson.properties,
-              pointType: "multipoint",
-              style: {
-                color:
-                  this.configurationMap?.createFigures?.multipoint?.color ||
-                  "green",
-                fillColor:
-                  this.configurationMap?.createFigures?.multipoint?.fillColor ||
-                  "green",
-                fillOpacity:
-                  this.configurationMap?.createFigures?.multipoint
-                    ?.fillOpacity || 0.8,
-                radius:
-                  this.configurationMap?.createFigures?.multipoint?.radius || 6,
-                weight:
-                  this.configurationMap?.createFigures?.multipoint?.weight || 2,
-              },
-            },
-          };
-        }
-        if (this.getGeoJSON) this.getGeoJSON(geojson);
-      });
-
-      map.on("draw:edited", (event: any) => {
-        const layers = event.layers;
-        layers.eachLayer((layer: any) => {
-          const geojson = layer.toGeoJSON();
-          if (this.getGeoJSON) this.getGeoJSON(geojson);
-        });
-      });
-    },
-    getPointToLayer(feature: any, latlng: any) {
-      const geometryType = feature.geometry?.type;
-
-      // Point: icono según properties.tipo
-      if (geometryType === "Point") {
-        const tipo = feature.properties?.tipo;
-        const firstIcon = L.icon({
-          iconUrl: homeIconUrl,
-          iconSize: [38, 38],
-          iconAnchor: [16, 41],
-        });
-        const lastIcon = L.icon({
-          iconUrl: endIconUrl,
-          iconSize: [38, 38],
-          iconAnchor: [16, 41],
-        });
-        const pointerIcon = L.icon({
-          iconUrl: trackingIconUrl,
-          iconSize: [38, 38],
-          iconAnchor: [16, 41],
-        });
-
-        let icon = pointerIcon;
-        if (tipo === 0) icon = firstIcon;
-        else if (tipo === 1) icon = lastIcon;
-
-        return L.marker(latlng, { icon });
-      }
-
-      // Otros tipos: icono por defecto
-      return L.marker(latlng);
-    },
-    async searchAddress(query: string) {
-      const address = await axios.get(
-        location.protocol + "//nominatim.openstreetmap.org/search?",
-        {
-          params: {
-            //query
-            q: query,
-            limit: 1,
-            format: "json",
-          },
-        }
-      );
-      if (address.data.length === 1) {
-        const lat = parseFloat(address.data[0].lat);
-        const lng = parseFloat(address.data[0].lon);
-        const coord = { lng, lat };
-        this.setCoordinates({ ...coord, moveMarker: true });
-        return address.data[0];
-      }
-      return address.data;
-    },
-    setCoordinates({
-      lat,
-      lng,
-    }: {
-      lat: number;
-      lng: number;
-      moveMarker?: boolean;
-    }): void {
-      if (this.mapRender) {
-        const newCenter = L.latLng(lat, lng);
-        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 || "";
-
-      const formatIsoPreserve = (iso: string): string => {
-        const d = new Date(iso);
-        if (isNaN(d.getTime())) return iso; // fallback: devolver la cadena original si no es válida
-        const pad = (n: number) => n.toString().padStart(2, "0");
-        // Usar métodos UTC para evitar que el navegador convierta a la zona local
-        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}`;
-      };
-
-      // 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())}`; */
-        fechaFormateada = formatIsoPreserve(fechaHoraLlegada);
-      }
-      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;
-    },
-    getPolygonTooltipContent(feature: any): string {
-      const props = feature.properties || {};
-      const descripcion = props.descripcion || props.name || "Sin descripción";
-
-      return `<div style="font-weight: bold; padding: 5px;">${descripcion}</div>`;
-    },
-  },
-  watch: {
-    coordinatesMap(newVal) {
-      this.renderCoordinates = newVal;
-      if (this.mapRender && this.markerRender) {
-        const newLatLng = L.latLng([newVal[0], newVal[1]]);
-        this.mapRender.setView([newVal[0], newVal[1]], newVal[2]);
-        this.markerRender.setLatLng(newLatLng);
-      }
-    },
-    dataPolygon(newVal) {
-      this.renderGeojson = newVal;
-    },
-  },
-});
-</script>
+<template>
+  <div class="map-container" :style="`height:${configurationMap?.height}`">
+    <div :id="idMap" style="height: 100%"></div>
+  </div>
+</template>
+
+<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";
+import "leaflet-draw/dist/leaflet.draw.css";
+import drawLocales from "leaflet-draw-locales";
+import axios from "axios";
+import "leaflet.fullscreen/Control.FullScreen.css";
+import "leaflet.fullscreen";
+import gpsIcon from "../assets/gps.svg";
+import sateliteIcon from "../assets/satelite.svg";
+
+declare global {
+  interface Window {
+    type: boolean;
+  }
+}
+
+L.Edit.Circle = L.Edit.CircleMarker.extend({
+  _createResizeMarker: function () {
+    var center = this._shape.getLatLng(),
+      resizemarkerPoint = this._getResizeMarkerPoint(center);
+
+    this._resizeMarkers = [];
+    this._resizeMarkers.push(
+      this._createMarker(resizemarkerPoint, this.options.resizeIcon)
+    );
+  },
+
+  _getResizeMarkerPoint: function (latlng: any) {
+    var delta = this._shape._radius * Math.cos(Math.PI / 4),
+      point = this._map.project(latlng);
+    return this._map.unproject([point.x + delta, point.y - delta]);
+  },
+
+  _resize: function (latlng: any) {
+    var moveLatLng = this._moveMarker.getLatLng();
+    var radius;
+    if (L.GeometryUtil.isVersion07x()) {
+      radius = moveLatLng.distanceTo(latlng);
+    } else {
+      radius = moveLatLng.distanceTo(latlng);
+    }
+    this._shape.setRadius(radius);
+  },
+});
+
+export default defineComponent({
+  props: {
+    configurationMap: { type: Object, required: false },
+    coordinatesMap: { type: [Array, Function], required: false },
+    dataPolygon: { type: [Array, Object], required: false },
+    isSatelite: { type: Boolean, required: false },
+    getCoodMarker: { type: Function, required: false },
+    getGeoJSON: { type: Function, required: false },
+    loadPolygon: { type: Boolean, required: false },
+  },
+  data() {
+    return {
+      idMap: "",
+      mapRender: null as L.Map | null,
+      markerRender: null as L.Marker | null,
+      renderCoordinates: Array.isArray(this.coordinatesMap)
+        ? (this.coordinatesMap as number[])
+        : [],
+      renderGeojson: this.dataPolygon as any,
+      markerIcon: {
+        iconUrl: markerDefault,
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+      },
+      layersFeatureGroup: null as any,
+      featuresData: null as any,
+      currentTileLayer: null as L.TileLayer | null,
+      isSatelliteView: false,
+    };
+  },
+  mounted() {
+    this.makeid(10);
+    this.renderMap();
+  },
+  methods: {
+    createSatelliteControl(): L.Control {
+      const SatelliteControl = L.Control.extend({
+        onAdd: (map: L.Map) => {
+          const container = L.DomUtil.create(
+            "div",
+            "leaflet-control-draw leaflet-bar leaflet-control"
+          );
+
+          const satelliteButton = L.DomUtil.create(
+            "a",
+            "leaflet-draw-draw-satellite",
+            container
+          );
+
+          satelliteButton.href = "#";
+          satelliteButton.title = this.isSatelliteView
+            ? "Vista Normal"
+            : "Vista Satélite";
+
+          // Usar el mismo estilo que los otros botones de draw
+          satelliteButton.style.backgroundImage = this.isSatelliteView
+            ? `url(${gpsIcon})`
+            : `url(${sateliteIcon})`;
+          satelliteButton.style.backgroundPosition = "center";
+          satelliteButton.style.backgroundRepeat = "no-repeat";
+          satelliteButton.style.backgroundSize = "20px 20px";
+
+          L.DomEvent.disableClickPropagation(satelliteButton);
+          L.DomEvent.on(
+            satelliteButton,
+            "click",
+            this.toggleSatelliteView,
+            this
+          );
+
+          return container;
+        },
+      });
+
+      return new SatelliteControl({ position: "topleft" });
+    },
+    toggleSatelliteView(): void {
+      if (!this.mapRender || !this.currentTileLayer) return;
+
+      this.isSatelliteView = !this.isSatelliteView;
+
+      // Remover la capa actual
+      this.mapRender.removeLayer(this.currentTileLayer as unknown as L.Layer);
+
+      // Agregar la nueva capa
+      if (this.isSatelliteView) {
+        this.currentTileLayer = L.tileLayer(
+          "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
+          {
+            attribution:
+              '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }
+        );
+      } else {
+        this.currentTileLayer = L.tileLayer(
+          "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+          {
+            attribution:
+              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }
+        );
+      }
+
+      this.currentTileLayer.addTo(this.mapRender as L.Map);
+
+      // Actualizar el ícono del control satelital
+      const satelliteButtons = document.querySelectorAll(
+        ".leaflet-draw-draw-satellite"
+      );
+      satelliteButtons.forEach((button) => {
+        const htmlButton = button as HTMLElement;
+        htmlButton.style.backgroundImage = this.isSatelliteView
+          ? `url(${gpsIcon})`
+          : `url(${sateliteIcon})`;
+        htmlButton.title = this.isSatelliteView
+          ? "Vista Normal"
+          : "Vista Satélite";
+      });
+    },
+    getLayersFeaturesInGeoJson() {
+      const geojson = L.geoJSON().addTo(this.mapRender as any);
+      this.featuresData.eachLayer((layer: any) => {
+        geojson.addLayer(layer);
+      });
+      const geojsonString = [geojson.toGeoJSON()]; //JSON.stringify([geojson.toGeoJSON()]);
+      return geojsonString;
+    },
+    triggerSaveEdit(): void {
+      const buttons =
+        document.getElementsByClassName(
+          "leaflet-draw-actions leaflet-draw-actions-top"
+        ) ||
+        document.getElementsByClassName(
+          "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom"
+        );
+      buttons[0]?.querySelector("li")?.querySelector("a")?.click();
+    },
+    makeid(length: number): void {
+      let result = "";
+      const characters = "abcdefghijklmnopqrstuvwxyz";
+      const charactersLength = characters.length;
+      let counter = 0;
+      while (counter < length) {
+        result += characters.charAt(
+          Math.floor(Math.random() * charactersLength)
+        );
+        counter += 1;
+      }
+      this.idMap = result;
+    },
+    renderMap(): void {
+      drawLocales("es");
+      setTimeout(() => {
+        if (this.loadPolygon) {
+          this.viewMap();
+        } else {
+          this.createMap();
+        }
+      }, 500);
+    },
+    createMap(): void {
+      const iconDefaultMarket = this.configurationMap
+        ? this.configurationMap.iconMarker
+          ? this.configurationMap.iconMarker
+          : this.markerIcon
+        : this.markerIcon;
+      window.type = true;
+      const map = L.map(this.idMap, { fullscreenControl: true } as any).setView(
+        [
+          this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
+          this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
+        ],
+        this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
+      );
+      this.mapRender = map;
+
+      // Inicializar con la vista correcta según el prop
+      this.isSatelliteView = this.isSatelite || false;
+      if (this.isSatelliteView) {
+        this.currentTileLayer = L.tileLayer(
+          "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
+          {
+            attribution:
+              '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }
+        );
+      } else {
+        this.currentTileLayer = L.tileLayer(
+          "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+          {
+            attribution:
+              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }
+        );
+      }
+      this.currentTileLayer.addTo(map);
+
+      // Agregar el control satelital si está habilitado
+      if (this.isSatelite !== undefined) {
+        const satelliteControl = this.createSatelliteControl();
+        map.addControl(satelliteControl);
+      }
+
+      map.setZoom(this.configurationMap?.maxZoom);
+      if (this.configurationMap?.renderMarker) {
+        const marker = L.marker(
+          [
+            this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
+            this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
+          ],
+          {
+            icon: L.icon(iconDefaultMarket),
+            draggable: this.configurationMap?.dragMarker,
+          }
+        ).addTo(map);
+        this.markerRender = marker;
+        if (this.getCoodMarker) {
+          marker.on("dragend", (event) => {
+            const updatedCoordinates = event.target.getLatLng();
+            const lat = updatedCoordinates.lat;
+            const lng = updatedCoordinates.lng;
+            if (this.getCoodMarker) this.getCoodMarker(lat, lng);
+          });
+        }
+      }
+      const featuresData = L.featureGroup();
+      this.featuresData = featuresData;
+      const featureGroup = featuresData.addTo(map);
+      let contextEdit = {
+        featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
+        edit: false,
+        remove: this.configurationMap?.editFigures.remove,
+      };
+      if (this.configurationMap?.editFigures.edit) {
+        contextEdit = {
+          featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
+          ...this.configurationMap?.editFigures.edit,
+          remove: this.configurationMap?.editFigures.remove,
+        };
+      }
+      const drawControl = new L.Control.Draw({
+        position: "topleft",
+        draw: {
+          polygon: this.configurationMap?.createFigures.polygon,
+          circle: false, //this.configurationMap?.createFigures.circle,
+          rectangle: this.configurationMap?.createFigures.rectangle
+            ? {
+                shapeOptions: {
+                  color: "blue",
+                },
+              }
+            : false,
+          marker: this.configurationMap?.createFigures.marker
+            ? {
+                icon: L.icon(iconDefaultMarket),
+              }
+            : false,
+          polyline: this.configurationMap?.createFigures.polyline
+            ? {
+                shapeOptions: {
+                  color: "blue",
+                },
+              }
+            : false,
+          circlemarker: this.configurationMap?.createFigures.multipoint,
+        },
+        edit: contextEdit as any,
+      });
+      map.addControl(drawControl);
+
+      map.on("draw:created", (event: any) => {
+        const layer = event.layer;
+        featureGroup.addLayer(layer);
+        let geojson = layer.toGeoJSON();
+        // *** AGREGADO: Manejo especial para CircleMarker (convertir a MultiPoint) ***
+        if (event.layerType === "circlemarker") {
+          // Convertir CircleMarker a formato MultiPoint para consistencia
+          geojson = {
+            type: "Feature",
+            geometry: {
+              type: "MultiPoint",
+              coordinates: [geojson.geometry.coordinates],
+            },
+            properties: {
+              ...geojson.properties,
+              pointType: "multipoint",
+              style: {
+                color:
+                  this.configurationMap?.createFigures?.multipoint?.color ||
+                  "green",
+                fillColor:
+                  this.configurationMap?.createFigures?.multipoint?.fillColor ||
+                  "green",
+                fillOpacity:
+                  this.configurationMap?.createFigures?.multipoint
+                    ?.fillOpacity || 0.8,
+                radius:
+                  this.configurationMap?.createFigures?.multipoint?.radius || 6,
+                weight:
+                  this.configurationMap?.createFigures?.multipoint?.weight || 2,
+              },
+            },
+          };
+        }
+        if (this.getGeoJSON) this.getGeoJSON([geojson]);
+      });
+
+      map.on("draw:edited", (event: any) => {
+        const layers = event.layers;
+        layers.eachLayer((layer: any) => {
+          const geojson = layer.toGeoJSON();
+          if (this.getGeoJSON) this.getGeoJSON([geojson]);
+        });
+      });
+    },
+    viewMap(): void {
+      const iconDefaultMarket = this.configurationMap
+        ? this.configurationMap.iconMarker
+          ? this.configurationMap.iconMarker
+          : this.markerIcon
+        : this.markerIcon;
+      window.type = true;
+      const map = L.map(this.idMap, { fullscreenControl: true } as any).setView(
+        [
+          this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
+          this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
+        ],
+        this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
+      );
+      this.mapRender = map;
+
+      // Inicializar con la vista correcta según el prop
+      this.isSatelliteView = this.isSatelite || false;
+      if (this.isSatelliteView) {
+        this.currentTileLayer = L.tileLayer(
+          "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
+          {
+            attribution:
+              '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }
+        );
+      } else {
+        this.currentTileLayer = L.tileLayer(
+          "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+          {
+            attribution:
+              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }
+        );
+      }
+      this.currentTileLayer.addTo(map);
+
+      // Agregar el control satelital si está habilitado
+      if (this.isSatelite !== undefined) {
+        const satelliteControl = this.createSatelliteControl();
+        map.addControl(satelliteControl);
+      }
+
+      map.setZoom(this.configurationMap?.maxZoom);
+      const featuresData = L.featureGroup();
+      this.featuresData = featuresData;
+      const featureGroup = featuresData.addTo(map);
+      let contextEdit = {
+        featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
+        edit: false,
+        remove: this.configurationMap?.editFigures.remove,
+      };
+      if (this.configurationMap?.editFigures.edit) {
+        contextEdit = {
+          featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
+          ...this.configurationMap?.editFigures.edit,
+          remove: this.configurationMap?.editFigures.remove,
+        };
+      }
+
+      const vm: any = this;
+      const renderGeojson = this.renderGeojson;
+      if (renderGeojson && renderGeojson.length) {
+        // Collect Point features to cluster (we'll render non-Point features normally)
+        const pointsToCluster: Array<any> = [];
+        // LayerGroup to hold cluster markers so we can clear on zoom
+        const clusterLayer = L.layerGroup().addTo(map);
+
+        renderGeojson.forEach((item: any) => {
+          const self = this;
+          if (item.type === "FeatureCollection") {
+            item.features.forEach((feature: any) => {
+              if (
+                feature.geometry.type === "Polygon" ||
+                feature.geometry.type === "MultiPolygon" ||
+                feature.geometry.type === "LineString" ||
+                feature.geometry.type === "MultiLineString" ||
+                feature.geometry.type === "Point"
+              ) {
+                // For Point features, collect them for clustering instead of adding directly
+                if (feature.geometry.type === "Point") {
+                  const coords = feature.geometry.coordinates;
+                  pointsToCluster.push({
+                    lat: coords[1],
+                    lng: coords[0],
+                    properties: feature.properties || {},
+                    feature,
+                  });
+                } else {
+                  // Non-point features: render normally
+                  L.geoJson(feature, {
+                    pointToLayer: this.getPointToLayer.bind(this),
+                    onEachFeature: function (feature, layer) {
+                      featureGroup.addLayer(layer);
+                      // Mostrar popup para Polygon y MultiPolygon al hacer clic
+                      if (
+                        feature.geometry.type === "Polygon" ||
+                        feature.geometry.type === "MultiPolygon"
+                      ) {
+                        var tooltipContent =
+                          self.getPolygonTooltipContent(feature);
+                        layer.bindPopup(tooltipContent, {
+                          maxHeight: 360,
+                          maxWidth: 320,
+                          className: "limit-popup",
+                        });
+                      }
+                    },
+                  });
+                }
+                // Agregar markers y flechas de dirección para LineString
+                if (
+                  feature.geometry.type === "LineString" &&
+                  Array.isArray(feature.geometry.coordinates)
+                ) {
+                  const coords = feature.geometry.coordinates;
+                  const coordProps =
+                    feature.properties &&
+                    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>`;
+                    }
+                    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);
+                  }
+                }
+              }
+            });
+          } else if (item.type === "Feature") {
+            if (
+              item.geometry.type === "Polygon" ||
+              item.geometry.type === "MultiPolygon" ||
+              item.geometry.type === "LineString" ||
+              item.geometry.type === "MultiLineString" ||
+              item.geometry.type === "Point"
+            ) {
+              // If it's a Point feature, collect it for clustering
+              if (item.geometry.type === "Point") {
+                const coords = item.geometry.coordinates;
+                pointsToCluster.push({
+                  lat: coords[1],
+                  lng: coords[0],
+                  properties: item.properties || {},
+                  feature: item,
+                });
+              } else {
+                // Non-point features: render normally
+                L.geoJson(item, {
+                  pointToLayer: this.getPointToLayer.bind(this),
+                  onEachFeature: function (feature, layer) {
+                    featureGroup.addLayer(layer);
+                    // Mostrar popup para Polygon y MultiPolygon al hacer clic
+                    if (
+                      feature.geometry.type === "Polygon" ||
+                      feature.geometry.type === "MultiPolygon"
+                    ) {
+                      var tooltipContent =
+                        self.getPolygonTooltipContent(feature);
+                      layer.bindPopup(tooltipContent, {
+                        maxHeight: 360,
+                        maxWidth: 320,
+                        className: "limit-popup",
+                      });
+                    }
+                  },
+                });
+              }
+              // Agregar markers y flechas de dirección para LineString
+              if (
+                item.geometry.type === "LineString" &&
+                Array.isArray(item.geometry.coordinates)
+              ) {
+                const coords = item.geometry.coordinates;
+                const coordProps =
+                  item.properties &&
+                  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>`;
+                  }
+                  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);
+                }
+              }
+            }
+          }
+        });
+        // --- Render point clusters collected above ---
+        const renderPointClusters = () => {
+          clusterLayer.clearLayers();
+          if (!pointsToCluster.length) return;
+
+          // Helper to convert lat/lng to pixel point
+          const latLngToPixel = (lat: number, lng: number) =>
+            map.project([lat, lng], map.getZoom());
+
+          const pixelDistance = Math.max(30, 80 - map.getZoom() * 2); // dynamic threshold
+          const pts = pointsToCluster.slice();
+          const used = new Array(pts.length).fill(false);
+          const clusters: Array<any[]> = [];
+
+          for (let i = 0; i < pts.length; i++) {
+            if (used[i]) continue;
+            const base = pts[i];
+            const basePx = latLngToPixel(base.lat, base.lng);
+            const cluster = [base];
+            used[i] = true;
+            for (let j = i + 1; j < pts.length; j++) {
+              if (used[j]) continue;
+              const cmp = pts[j];
+              const cmpPx = latLngToPixel(cmp.lat, cmp.lng);
+              const dist = Math.sqrt(
+                Math.pow(basePx.x - cmpPx.x, 2) +
+                  Math.pow(basePx.y - cmpPx.y, 2)
+              );
+              if (dist < pixelDistance) {
+                cluster.push(cmp);
+                used[j] = true;
+              }
+            }
+            clusters.push(cluster);
+          }
+
+          clusters.forEach((cluster) => {
+            // average center
+            const lat = cluster.reduce((s, p) => s + p.lat, 0) / cluster.length;
+            const lng = cluster.reduce((s, p) => s + p.lng, 0) / cluster.length;
+
+            // helper to create icon based on tipo property (match getPointToLayer)
+            const makeIconFor = (props: any) => {
+              const tipo = props?.tipo;
+              const w = 50;
+              const h = 50;
+              const ax = 16;
+              const ay = 41;
+              // popupAnchor relative to iconAnchor so popup arrow points to the visual center
+              const popupAnchor = [
+                Math.round(w / 2 - ax),
+                Math.round(h / 2 - ay),
+              ] as [number, number];
+              const firstIcon = L.icon({
+                iconUrl: origenIconUrl,
+                iconSize: [w, h],
+                iconAnchor: [ax, ay],
+                popupAnchor,
+              });
+              const lastIcon = L.icon({
+                iconUrl: destinoIconUrl,
+                iconSize: [w, h],
+                iconAnchor: [ax, ay],
+                popupAnchor,
+              });
+              const pointerIcon = L.icon({
+                iconUrl: llegadaIconUrl,
+                iconSize: [w, h],
+                iconAnchor: [ax, ay],
+                popupAnchor,
+              });
+              if (tipo === 0) return firstIcon;
+              if (tipo === 1) return lastIcon;
+              return pointerIcon;
+            };
+
+            if (cluster.length === 1) {
+              const p = cluster[0];
+              const icon = makeIconFor(p.properties || {});
+              const marker = L.marker([lat, lng], { icon, zIndexOffset: 1000 });
+              // bind popup from original feature
+              const tempFeature = p.feature || {};
+              const popupContent = vm.getPopupContent(tempFeature);
+              marker.bindPopup(popupContent, {
+                maxHeight: 360,
+                maxWidth: 320,
+                className: "limit-popup",
+              });
+              clusterLayer.addLayer(marker);
+            } else {
+              // Use icon of the first point as the visible marker
+              const primary = cluster[0];
+              const icon = makeIconFor(primary.properties || {});
+              // cluster marker container: marker with icon plus side badge
+              const markerHtml =
+                `<div style="position:relative;display:inline-block;">` +
+                `<img src="${
+                  (icon as any).options.iconUrl
+                }" style="width:50px;height:50px;object-fit:cover;"/>` +
+                `<div style="position:absolute;right:-2px;top:-2px;background:#2196F3;color:#fff;font-size:11px;font-weight:bold;border-radius:50%;padding:0;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;z-index:3;border:1.5px solid #fff;">${cluster.length}</div>` +
+                `</div>`;
+
+              const marker = L.marker([lat, lng], {
+                icon: L.divIcon({
+                  className: "",
+                  html: markerHtml,
+                  iconSize: [50, 50],
+                  iconAnchor: [25, 25],
+                  popupAnchor: [0, 0],
+                }),
+                zIndexOffset: 1000,
+              });
+
+              // build popup by concatenating each member's popup HTML separated by a divider
+              const parts: string[] = [];
+              cluster.forEach((p) => {
+                const tempFeature = p.feature || {};
+                const content = vm.getPopupContent(tempFeature) || "";
+                parts.push(`<div style="padding:6px 0;">${content}</div>`);
+              });
+              const popupHtml = parts.join(
+                '<hr style="border:none;border-top:1px solid #ddd;margin:6px 0;"/>'
+              );
+              marker.bindPopup(
+                `<div style="max-width:320px;">${popupHtml}</div>`,
+                { maxHeight: 360, maxWidth: 320, className: "limit-popup" }
+              );
+              clusterLayer.addLayer(marker);
+            }
+          });
+        };
+
+        // Initial render and re-render on zoom
+        renderPointClusters();
+        map.on("zoomend", () => {
+          renderPointClusters();
+        });
+
+        const bounds = featureGroup.getBounds();
+        map.fitBounds(bounds);
+      }
+      const drawControl = new L.Control.Draw({
+        position: "topleft",
+        draw: {
+          polygon: this.configurationMap?.createFigures.polygon,
+          circle: false, //this.configurationMap?.createFigures.circle,
+          rectangle: this.configurationMap?.createFigures.rectangle
+            ? {
+                shapeOptions: {
+                  color: "blue",
+                },
+              }
+            : false,
+          marker: this.configurationMap?.createFigures.marker
+            ? {
+                icon: L.icon(iconDefaultMarket),
+              }
+            : false,
+          polyline: this.configurationMap?.createFigures.polyline
+            ? {
+                shapeOptions: {
+                  color: "blue",
+                },
+              }
+            : false,
+          circlemarker: this.configurationMap?.createFigures.multipoint,
+        },
+        edit: contextEdit as any,
+      });
+      map.addControl(drawControl);
+
+      map.on("draw:created", (event: any) => {
+        const layer = event.layer;
+        featureGroup.addLayer(layer);
+        let geojson = layer.toGeoJSON();
+        // *** AGREGADO: Manejo especial para CircleMarker (convertir a MultiPoint) ***
+        if (event.layerType === "circlemarker") {
+          // Convertir CircleMarker a formato MultiPoint para consistencia
+          geojson = {
+            type: "Feature",
+            geometry: {
+              type: "MultiPoint",
+              coordinates: [geojson.geometry.coordinates],
+            },
+            properties: {
+              ...geojson.properties,
+              pointType: "multipoint",
+              style: {
+                color:
+                  this.configurationMap?.createFigures?.multipoint?.color ||
+                  "green",
+                fillColor:
+                  this.configurationMap?.createFigures?.multipoint?.fillColor ||
+                  "green",
+                fillOpacity:
+                  this.configurationMap?.createFigures?.multipoint
+                    ?.fillOpacity || 0.8,
+                radius:
+                  this.configurationMap?.createFigures?.multipoint?.radius || 6,
+                weight:
+                  this.configurationMap?.createFigures?.multipoint?.weight || 2,
+              },
+            },
+          };
+        }
+        if (this.getGeoJSON) this.getGeoJSON(geojson);
+      });
+
+      map.on("draw:edited", (event: any) => {
+        const layers = event.layers;
+        layers.eachLayer((layer: any) => {
+          const geojson = layer.toGeoJSON();
+          if (this.getGeoJSON) this.getGeoJSON(geojson);
+        });
+      });
+    },
+    getPointToLayer(feature: any, latlng: any) {
+      const geometryType = feature.geometry?.type;
+
+      // Point: icono según properties.tipo
+      if (geometryType === "Point") {
+        const tipo = feature.properties?.tipo;
+        const firstIcon = L.icon({
+          iconUrl: origenIconUrl,
+          iconSize: [50, 50],
+          iconAnchor: [16, 41],
+        });
+        const lastIcon = L.icon({
+          iconUrl: destinoIconUrl,
+          iconSize: [50, 50],
+          iconAnchor: [16, 41],
+        });
+        const pointerIcon = L.icon({
+          iconUrl: llegadaIconUrl,
+          iconSize: [50, 50],
+          iconAnchor: [16, 41],
+        });
+
+        let icon = pointerIcon;
+        if (tipo === 0) icon = firstIcon;
+        else if (tipo === 1) icon = lastIcon;
+
+        return L.marker(latlng, { icon });
+      }
+
+      // Otros tipos: icono por defecto
+      return L.marker(latlng);
+    },
+    async searchAddress(query: string) {
+      const address = await axios.get(
+        location.protocol + "//nominatim.openstreetmap.org/search?",
+        {
+          params: {
+            //query
+            q: query,
+            limit: 1,
+            format: "json",
+          },
+        }
+      );
+      if (address.data.length === 1) {
+        const lat = parseFloat(address.data[0].lat);
+        const lng = parseFloat(address.data[0].lon);
+        const coord = { lng, lat };
+        this.setCoordinates({ ...coord, moveMarker: true });
+        return address.data[0];
+      }
+      return address.data;
+    },
+    setCoordinates({
+      lat,
+      lng,
+    }: {
+      lat: number;
+      lng: number;
+      moveMarker?: boolean;
+    }): void {
+      if (this.mapRender) {
+        const newCenter = L.latLng(lat, lng);
+        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 || "";
+
+      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}`;
+      };
+
+      // Formatear fecha a dd-MM-yyyy hh:mm:ss
+      let fechaFormateada = "";
+      if (fechaHoraLlegada) {
+        fechaFormateada = formatIsoPreserve(fechaHoraLlegada);
+      }
+
+      // Seleccionar el icono de referencia según el tipo (1 -> Destino, else -> LLegadaSalida)
+      const tipo = props.tipo;
+      const referenciaIcon =
+        tipo === 1 ? DestinoIconReferencia : LLegadaSalidaIconReferencia;
+
+      // Construir HTML del popup con mejor UI para la imagen
+      // Contenedor externo controla el ancho; el popup tiene su propia clase para limitar altura
+      let html = `<div style="max-width:320px;">`;
+
+      if (fotoId) {
+        html += `\n<div style="display:flex;justify-content:center;margin-bottom:8px;">\n  <img src="${fotoId}" style="height:200px;width:200px;max-width:320px;object-fit:cover;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.12);"/>\n</div>`;
+      }
+
+      // 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;"/>`;
+      }
+      if (fechaFormateada) {
+        html += `<div style="font-size:14px;"><b>${descripcion}:</b> ${fechaFormateada}</div>`;
+      } else {
+        html += `<div style="font-size:14px;">${descripcion}</div>`;
+      }
+      html += `</div>`;
+
+      html += `</div>`;
+      return html;
+    },
+    getPolygonTooltipContent(feature: any): string {
+      const props = feature.properties || {};
+      const descripcion = props.descripcion || props.name || "Sin descripción";
+
+      return `<div style="font-weight: bold; padding: 5px;">${descripcion}</div>`;
+    },
+  },
+  watch: {
+    coordinatesMap(newVal) {
+      this.renderCoordinates = Array.isArray(newVal)
+        ? (newVal as number[])
+        : [];
+      if (
+        this.mapRender &&
+        this.markerRender &&
+        this.renderCoordinates.length >= 2
+      ) {
+        const coords = this.renderCoordinates as number[];
+        const newLatLng = L.latLng([coords[0], coords[1]]);
+        this.mapRender.setView([coords[0], coords[1]], coords[2]);
+        this.markerRender.setLatLng(newLatLng);
+      }
+    },
+    dataPolygon(newVal) {
+      this.renderGeojson = newVal;
+    },
+  },
+});
+</script>
+
+<style>
+.leaflet-popup-content {
+  width: 300px !important;
+  margin: 0 !important;
+  padding: 10px 15px !important;
+}
+.leaflet-popup.limit-popup .leaflet-popup-content-wrapper {
+  /* Limit popup to viewport with some margin and force internal scroll.
+     Remove extra right padding so the scrollbar sits at the popup edge. */
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  box-sizing: border-box;
+  padding-right: 0 !important; /* let scrollbar be at the very edge */
+}
+.leaflet-popup.limit-popup .leaflet-popup-content {
+  /* Reserve inner right padding so text doesn't hide behind the scrollbar */
+  box-sizing: border-box;
+  padding-right: 16px;
+}
+.leaflet-popup.limit-popup .leaflet-popup-close-button {
+  /* Place close button above the content area (not creating layout padding),
+     keep it visible above the scrollbar and give a compact circular style. */
+  right: -8px !important;
+  top: -8px !important;
+  z-index: 10020 !important;
+  background: #fff !important;
+  border-radius: 14px !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
+  width: 28px !important;
+  height: 28px !important;
+  line-height: 28px !important;
+  text-align: center !important;
+  padding: 0 !important;
+}
+</style>