vue-geojson-view-ts 1.3.17 → 1.3.19

package/src/components/MapView.vue

@@ -1,716 +1,715 @@
-<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"
-              ) {
-                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, {
-                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 * 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) => {
+          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"
+              ) {
+                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"
+            ) {
+              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>