vue-geojson-view-ts 1.3.13 → 1.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "type": "module",
   "files": [
     "dist",
@@ -73,5 +73,6 @@
     "screenfull": "^6.0.2",
     "typewriter-effect": "^2.19.0",
     "vue-router": "^4.2.5"
-  }
+  },
+  "packageManager": "yarn@4.5.3+sha512.3003a14012e2987072d244c720506549c1aab73ee728208f1b2580a9fd67b92d61ba6b08fe93f6dce68fd771e3af1e59a0afa28dd242dd0940d73b95fedd4e90"
 }

package/src/components/CoordinatesVerifyPolygon.vue

@@ -1,18 +1,17 @@
 <template>
   <div ref="maps" id="maps"></div>
 </template>
-  
-<script lang="ts">
-import { markerDefault } from '../helpers/imgBase64'
 
-import { defineComponent } from 'vue';
-import * as L from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import * as turf from '@turf/turf';
-import { IconOptions } from 'leaflet';
-import 'leaflet.fullscreen/Control.FullScreen.css'
-import 'leaflet.fullscreen'
+<script lang="ts">
+import { markerDefault } from "../helpers/imgBase64";
 
+import { defineComponent } from "vue";
+import * as L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import * as turf from "@turf/turf";
+import { IconOptions } from "leaflet";
+import "leaflet.fullscreen/Control.FullScreen.css";
+import "leaflet.fullscreen";
 
 export default defineComponent({
   name: "CoordinatesVerifyPolygon",
@@ -20,7 +19,7 @@ export default defineComponent({
     dataPolygon: Object,
     iconMarker: Object,
     coordinatesMap: Array,
-    checkPointInPolygon: Function
+    checkPointInPolygon: Function,
   },
   data() {
     return {
@@ -28,40 +27,60 @@ export default defineComponent({
         iconUrl: markerDefault,
         iconSize: [25, 41],
         iconAnchor: [12, 41],
-      }
-    }
+      },
+    };
   },
   mounted() {
     this.verificarPuntoEnPoligono();
   },
   methods: {
     verificarPuntoEnPoligono() {
-      const iconDefaultMarket = this.iconMarker ? this.iconMarker : this.markerIconDefault
-      const data = this.dataPolygon?.geometry.coordinates[0].map((e: number[]) => [e[1], e[0]]);
-      const polygonCoordinates: L.LatLngExpression[] = JSON.parse(JSON.stringify(data))
-      const pointCoordinates = [this.coordinatesMap ? this.coordinatesMap[0] as number : 0, this.coordinatesMap ? this.coordinatesMap[1] as number : 0];
-      const map = L.map('maps', { fullscreenControl: true } as any).setView([this.coordinatesMap ? this.coordinatesMap[0] as number : 0, this.coordinatesMap ? this.coordinatesMap[1] as number : 0], this.coordinatesMap ? this.coordinatesMap[2] as number : 0);
-      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      const iconDefaultMarket = this.iconMarker
+        ? this.iconMarker
+        : this.markerIconDefault;
+      const data = this.dataPolygon?.geometry.coordinates[0].map(
+        (e: number[]) => [e[1], e[0]]
+      );
+      const polygonCoordinates: L.LatLngExpression[] = JSON.parse(
+        JSON.stringify(data)
+      );
+      const pointCoordinates = [
+        this.coordinatesMap ? (this.coordinatesMap[0] as number) : 0,
+        this.coordinatesMap ? (this.coordinatesMap[1] as number) : 0,
+      ];
+      const map = L.map("maps", { fullscreenControl: true } as any).setView(
+        [
+          this.coordinatesMap ? (this.coordinatesMap[0] as number) : 0,
+          this.coordinatesMap ? (this.coordinatesMap[1] as number) : 0,
+        ],
+        this.coordinatesMap ? (this.coordinatesMap[2] as number) : 0
+      );
+      L.tileLayer("https://tile.openstreetmaps.org/{z}/{x}/{y}.png", {
         maxZoom: 19,
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-      }).addTo(map)
+        attribution:
+          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }).addTo(map);
       L.polygon(polygonCoordinates).addTo(map);
-      const markerCoordinates: L.LatLngExpression = [this.coordinatesMap ? this.coordinatesMap[0] as number : 0, this.coordinatesMap ? this.coordinatesMap[1] as number : 0];
+      const markerCoordinates: L.LatLngExpression = [
+        this.coordinatesMap ? (this.coordinatesMap[0] as number) : 0,
+        this.coordinatesMap ? (this.coordinatesMap[1] as number) : 0,
+      ];
       const markerIcon = L.icon(iconDefaultMarket as IconOptions);
       L.marker(markerCoordinates, { icon: markerIcon }).addTo(map);
       const pointGeoJSON = turf.point(pointCoordinates);
       const polygonGeoJSON = turf.polygon([data]);
-      const isPointInside = turf.booleanPointInPolygon(pointGeoJSON, polygonGeoJSON);
-      if (this.checkPointInPolygon)
-        this.checkPointInPolygon(isPointInside)
-    }
-  }
+      const isPointInside = turf.booleanPointInPolygon(
+        pointGeoJSON,
+        polygonGeoJSON
+      );
+      if (this.checkPointInPolygon) this.checkPointInPolygon(isPointInside);
+    },
+  },
 });
 </script>
-  
+
 <style>
 #maps {
   height: 500px;
 }
 </style>
-  

package/src/components/MapHeatComponent.vue

@@ -233,7 +233,10 @@ export default defineComponent({
           format: new GeoJSON(),
         }),
         style: function (feature) {
-          style.getText().setText(feature.get("name"));
+          const textStyle = style.getText();
+          if (textStyle) {
+            textStyle.setText(feature.get("name"));
+          }
           return style;
         },
       });

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

@@ -18,6 +18,8 @@ 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 {
@@ -69,6 +71,7 @@ export default defineComponent({
     coordinatesMap: Array,
     getGeoJSON: Function,
     getCoodMarker: Function,
+    isSatelite: Boolean,
   },
   data() {
     return {
@@ -84,6 +87,8 @@ export default defineComponent({
       },
       layersFeatureGroup: null as any,
       featuresData: null as any,
+      currentTileLayer: null as L.TileLayer | null,
+      isSatelliteView: false,
     };
   },
   mounted() {
@@ -91,6 +96,90 @@ export default defineComponent({
     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) => {
@@ -147,11 +236,34 @@ export default defineComponent({
         this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
       );
       this.mapRender = map;
-      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-        //maxZoom: this.configurationMap?.maxZoom,
-        attribution:
-          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-      }).addTo(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(
@@ -279,10 +391,34 @@ export default defineComponent({
         this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
       );
       this.mapRender = map;
-      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-        attribution:
-          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-      }).addTo(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;

package/dist/components/MapView.vue.d.ts

@@ -1,56 +0,0 @@
-import * as L from "leaflet";
-declare global {
-    interface Window {
-        type: boolean;
-    }
-}
-declare const _sfc_main: import("vue").DefineComponent<{
-    loadPolygon: BooleanConstructor;
-    reverseCoordinatesPolygon: BooleanConstructor;
-    dataPolygon: ObjectConstructor;
-    configurationMap: any;
-    coordinatesMap: ArrayConstructor;
-    getGeoJSON: FunctionConstructor;
-    getCoodMarker: FunctionConstructor;
-}, unknown, {
-    idMap: string;
-    mapRender: L.Map | null;
-    markerRender: L.Marker<any> | null;
-    renderCoordinates: unknown[] | undefined;
-    renderGeojson: any;
-    markerIcon: {
-        iconUrl: string;
-        iconSize: number[];
-        iconAnchor: number[];
-    };
-    layersFeatureGroup: any;
-    featuresData: any;
-}, {}, {
-    getLayersFeaturesInGeoJson(): (import("geojson").GeometryCollection<import("geojson").Geometry> | import("geojson").FeatureCollection<import("geojson").Geometry, any> | import("geojson").Feature<import("geojson").MultiPoint, any>)[];
-    triggerSaveEdit(): void;
-    makeid(length: number): void;
-    renderMap(): void;
-    createMap(): void;
-    viewMap(): void;
-    getPointToLayer(feature: any, latlng: any): L.Marker<any>;
-    searchAddress(query: string): Promise<any>;
-    setCoordinates({ lat, lng, }: {
-        lat: number;
-        lng: number;
-        moveMarker?: boolean | undefined;
-    }): void;
-    getPopupContent(feature: any): string;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    loadPolygon: BooleanConstructor;
-    reverseCoordinatesPolygon: BooleanConstructor;
-    dataPolygon: ObjectConstructor;
-    configurationMap: any;
-    coordinatesMap: ArrayConstructor;
-    getGeoJSON: FunctionConstructor;
-    getCoodMarker: FunctionConstructor;
-}>>, {
-    loadPolygon: boolean;
-    reverseCoordinatesPolygon: boolean;
-    configurationMap: any;
-}, {}>;
-export default _sfc_main;