vue-geojson-view-ts 1.3.14 → 1.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "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";
       });