vue-geojson-view-ts 1.3.12 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "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/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,79 @@ 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-bar leaflet-control leaflet-control-custom"
+          );
+
+          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
+            ? "Vista Normal"
+            : "Vista Satélite";
+
+          L.DomEvent.disableClickPropagation(container);
+          L.DomEvent.on(container, "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
+      const controls = document.querySelectorAll(".leaflet-control-custom");
+      controls.forEach((control) => {
+        const htmlControl = control as HTMLElement;
+        htmlControl.style.backgroundImage = this.isSatelliteView
+          ? `url(${gpsIcon})`
+          : `url(${sateliteIcon})`;
+        htmlControl.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 +225,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 +380,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;
@@ -335,9 +460,15 @@ export default defineComponent({
               item.geometry.type === "Point" ||
               item.geometry.type === "MultiPoint"
             ) {
+              const self = this;
               L.geoJson(item, {
                 onEachFeature: function (feature, layer) {
                   featureGroup.addLayer(layer);
+                  // Mostrar popup solo para Point
+                  if (feature.geometry.type === "Point") {
+                    var popupContent = self.getPopupContent(feature);
+                    layer.bindPopup(popupContent);
+                  }
                 },
               });
             }
@@ -493,6 +624,8 @@ export default defineComponent({
       // Solo toma en cuenta descripcion y fechaHoraLlegada
       const descripcion = props.descripcion || "";
       const fechaHoraLlegada = props.fechaHoraLlegada || "";
+      // url de la foto
+      const fotoId = props.fotoId || "";
 
       // Formatear fecha a dd-MM-yyyy hh:mm:ss
       let fechaFormateada = "";
@@ -506,6 +639,9 @@ export default defineComponent({
         )}:${pad(fecha.getSeconds())}`;
       }
       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>`;

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;