vue-geojson-view-ts 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "files": [
     "dist",
@@ -65,6 +65,8 @@
     "leaflet": "1.9.3",
     "leaflet-draw": "^1.0.4",
     "leaflet-draw-locales": "^1.2.2",
+    "leaflet.fullscreen": "^2.4.0",
+    "screenfull": "^6.0.2",
     "typewriter-effect": "^2.19.0"
   }
 }

package/src/components/CoordinatesVerifyPolygon.vue

@@ -1,64 +1,67 @@
 <template>
-     <div ref="maps" id="maps"></div>
-  </template>
+  <div ref="maps" id="maps"></div>
+</template>
   
-  <script lang="ts">
-  import {markerDefault} from '../helpers/imgBase64'
+<script lang="ts">
+import { markerDefault } from '../helpers/imgBase64'
 
-    import { defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import * as L from 'leaflet';
-  import 'leaflet/dist/leaflet.css';
-   import * as turf from '@turf/turf';
+import 'leaflet/dist/leaflet.css';
+import * as turf from '@turf/turf';
 import { IconOptions } from 'leaflet';
-  
-   export default defineComponent({
-    name:"CoordinatesVerifyPolygon",
-    props: {
-      dataPolygon: Object,
-      iconMarker:Object,
-      coordinatesMap: Array,
-      checkPointInPolygon:Function
-    },
-    data(){
-      return {
-        markerIconDefault:{
-              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').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', {
-                maxZoom: 19,
-                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 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) 
+import 'leaflet.fullscreen/Control.FullScreen.css'
+import 'leaflet.fullscreen'
+
+
+export default defineComponent({
+  name: "CoordinatesVerifyPolygon",
+  props: {
+    dataPolygon: Object,
+    iconMarker: Object,
+    coordinatesMap: Array,
+    checkPointInPolygon: Function
+  },
+  data() {
+    return {
+      markerIconDefault: {
+        iconUrl: markerDefault,
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
       }
     }
-  });
-  </script>
-  
-  <style>
-  #maps {
-    height: 500px;
+  },
+  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', {
+        maxZoom: 19,
+        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 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)
+    }
   }
-  </style>
+});
+</script>
+  
+<style>
+#maps {
+  height: 500px;
+}
+</style>
   

package/src/components/MapSearchAddress.vue

@@ -9,6 +9,8 @@ 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 axios from "axios";
 
 export type TIconMaker = {
@@ -91,7 +93,7 @@ const renderMap = async () => {
 
 const createMap = async () => {
   const iconMarker = props.configurationMap?.iconMarker;
-  const map = L.map(idMap.value).setView(
+  const map = L.map(idMap.value,{fullscreenControl:true} as any).setView(
     [coords.value.lat, coords.value.lng],
     coords.value.zoom
   );

package/src/components/MapView.vue

@@ -13,6 +13,8 @@ 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'
 
 declare global {
   interface Window {
@@ -134,7 +136,7 @@ export default defineComponent({
           : this.markerIcon
         : this.markerIcon;
       window.type = true;
-      const map = L.map(this.idMap).setView(
+      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,
@@ -230,7 +232,7 @@ export default defineComponent({
           : this.markerIcon
         : this.markerIcon;
       window.type = true;
-      const map = L.map(this.idMap).setView(
+      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,