vue-geojson-view-ts 1.3.14 → 1.3.16

package/package.json

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

package/src/components/MapSearchAddress.vue

@@ -9,9 +9,11 @@ import * as L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { onMounted, ref } from "vue";
 import { markerDefault } from "../helpers/imgBase64";
-import 'leaflet.fullscreen/Control.FullScreen.css'
-import 'leaflet.fullscreen'
+import "leaflet.fullscreen/Control.FullScreen.css";
+import "leaflet.fullscreen";
 import axios from "axios";
+import gpsIcon from "../assets/gps.svg";
+import sateliteIcon from "../assets/satelite.svg";
 
 export type TIconMaker = {
   iconUrl: string;
@@ -37,6 +39,7 @@ export interface ICoords {
 export interface IMapSearchAddressProps {
   configurationMap?: IConfigurationMap;
   coordinatesMap?: ICoords;
+  isSatelite?: boolean;
 }
 
 const props = withDefaults(defineProps<IMapSearchAddressProps>(), {
@@ -69,6 +72,8 @@ const idMap = ref();
 const coords = ref(props.coordinatesMap);
 const mapRender = ref();
 const markerRender = ref();
+const currentTileLayer = ref<L.TileLayer | null>(null);
+const isSatelliteView = ref(false);
 
 onMounted(async () => {
   await makeid(10);
@@ -93,17 +98,40 @@ const renderMap = async () => {
 
 const createMap = async () => {
   const iconMarker = props.configurationMap?.iconMarker;
-  const map = L.map(idMap.value,{fullscreenControl:true} as any).setView(
+  const map = L.map(idMap.value, { fullscreenControl: true } as any).setView(
     [coords.value.lat, coords.value.lng],
     coords.value.zoom
   );
   map.invalidateSize();
   mapRender.value = map;
-  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-    maxZoom: props.configurationMap?.maxZoom,
-    attribution:
-      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-  }).addTo(map);
+
+  // Inicializar con la vista correcta según el prop
+  isSatelliteView.value = props.isSatelite || false;
+  if (isSatelliteView.value) {
+    currentTileLayer.value = 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 {
+    currentTileLayer.value = L.tileLayer(
+      "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+      {
+        maxZoom: props.configurationMap?.maxZoom,
+        attribution:
+          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }
+    );
+  }
+  currentTileLayer.value.addTo(map);
+
+  // Agregar el control satelital si está habilitado
+  if (props.isSatelite !== undefined) {
+    const satelliteControl = createSatelliteControl();
+    map.addControl(satelliteControl);
+  }
 
   if (iconMarker.type === "image") {
     const marker = L.marker([coords.value.lat, coords.value.lng], {
@@ -148,6 +176,87 @@ const createMap = async () => {
   }
 };
 
+const 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 = isSatelliteView.value
+        ? "Vista Normal"
+        : "Vista Satélite";
+
+      // Usar el mismo estilo que los otros botones de draw
+      satelliteButton.style.backgroundImage = isSatelliteView.value
+        ? `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", toggleSatelliteView);
+
+      return container;
+    },
+  });
+
+  return new SatelliteControl({ position: "topleft" });
+};
+
+const toggleSatelliteView = (): void => {
+  if (!mapRender.value || !currentTileLayer.value) return;
+
+  isSatelliteView.value = !isSatelliteView.value;
+
+  // Remover la capa actual
+  mapRender.value.removeLayer(currentTileLayer.value as unknown as L.Layer);
+
+  // Agregar la nueva capa
+  if (isSatelliteView.value) {
+    currentTileLayer.value = 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 {
+    currentTileLayer.value = L.tileLayer(
+      "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+      {
+        attribution:
+          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }
+    );
+  }
+
+  currentTileLayer.value.addTo(mapRender.value 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 = isSatelliteView.value
+      ? `url(${gpsIcon})`
+      : `url(${sateliteIcon})`;
+    htmlButton.title = isSatelliteView.value
+      ? "Vista Normal"
+      : "Vista Satélite";
+  });
+};
+
 const searchAddress = async (query: string) => {
   const address = await axios.get(
     location.protocol + "//nominatim.openstreetmap.org/search?",

package/src/components/MapView.vue

@@ -101,26 +101,35 @@ export default defineComponent({
         onAdd: (map: L.Map) => {
           const container = L.DomUtil.create(
             "div",
-            "leaflet-bar leaflet-control leaflet-control-custom"
+            "leaflet-control-draw leaflet-bar leaflet-control"
           );
 
-          container.style.backgroundColor = "white";
-          container.style.width = "30px";
-          container.style.height = "30px";
-          container.style.cursor = "pointer";
-          container.style.marginTop = "10px"; // Margen superior para separar de otros controles
-          container.style.backgroundImage = this.isSatelliteView
-            ? `url(${gpsIcon})`
-            : `url(${sateliteIcon})`;
-          container.style.backgroundPosition = "center";
-          container.style.backgroundRepeat = "no-repeat";
-          container.style.backgroundSize = "20px 20px";
-          container.title = this.isSatelliteView
+          const satelliteButton = L.DomUtil.create(
+            "a",
+            "leaflet-draw-draw-satellite",
+            container
+          );
+
+          satelliteButton.href = "#";
+          satelliteButton.title = this.isSatelliteView
             ? "Vista Normal"
             : "Vista Satélite";
 
-          L.DomEvent.disableClickPropagation(container);
-          L.DomEvent.on(container, "click", this.toggleSatelliteView, this);
+          // 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;
         },
@@ -157,14 +166,16 @@ export default defineComponent({
 
       this.currentTileLayer.addTo(this.mapRender as L.Map);
 
-      // Actualizar el ícono del control
-      const controls = document.querySelectorAll(".leaflet-control-custom");
-      controls.forEach((control) => {
-        const htmlControl = control as HTMLElement;
-        htmlControl.style.backgroundImage = this.isSatelliteView
+      // 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})`;
-        htmlControl.title = this.isSatelliteView
+        htmlButton.title = this.isSatelliteView
           ? "Vista Normal"
           : "Vista Satélite";
       });
@@ -442,11 +453,20 @@ export default defineComponent({
                   pointToLayer: this.getPointToLayer.bind(this),
                   onEachFeature: function (feature, layer) {
                     featureGroup.addLayer(layer);
-                    // Mostrar popup solo para Point
+                    // 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);
+                    }
                   },
                 });
               }
@@ -464,11 +484,19 @@ export default defineComponent({
               L.geoJson(item, {
                 onEachFeature: function (feature, layer) {
                   featureGroup.addLayer(layer);
-                  // Mostrar popup solo para Point
+                  // 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);
+                  }
                 },
               });
             }
@@ -649,6 +677,12 @@ export default defineComponent({
       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) {