vue-geojson-view-ts 1.3.16 → 1.3.18

package/README.md

@@ -1,322 +1,322 @@
-
-## Descripcion
-
-Paquete para el uso de mapas con openstreetmap y geojson con VITE & VUE
-
-## Instalacion
-
-Instalacion del paquete
-
-```sh
-npm i vue-geojson-view-ts
-```
-## Configuracion Creacion de Polygonos
-Configuracion para la creacion de polygonos dentro del mapa
-```typescript
-<template>
-    <div>
-        <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"  :getCoodMarker="getCoodMarker"></MapView>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { MapView } from 'vue-geojson-view-ts'
-import { ref } from 'vue';
-
-const iconMarker = {
-  iconUrl:'/images/icon.png'.
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-}
-
-const configurationMap = {
-  height:'500px',
-  iconMarker:{
-    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-  },
-  maxZoom:19,
-  renderMarker:true,
-  dragMarker:true,
-  createFigures:{
-    polygon: true,
-    circle: true,
-    rectangle: true,
-    marker:true,
-  },
-  editFigures:{
-    edit: true,
-    remove: true
-  }
-}
-const coordinatesMap = ref([-19.0382054,-65.2662444,13])
-
-const getGeoJSON = (geojson:any) =>{
-  console.log(geojson)
-}
-const getCoodMarker = (lat:number,long:number) =>{
-  console.log(lat,long)
-}
-
-
-</script>
-
-<style>
- @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
-</style>
-
-```
-
-## Configuracion de vista o edicion de Polygonos
-Configuracion para la edicion o solo vista de polygonos dentro del mapa
-```typescript
-<template>
-    <div>
-        <MapView :loadPolygon="true" :dataPolygon="dataPolygon" :reverseCoordinatesPolygon="true" :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { MapView } from 'vue-geojson-view-ts'
-import { ref } from 'vue';
-
-const iconMarker = {
-  iconUrl:'/images/icon.png'.
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-}
-
-const configurationMap = {
-  height:'500px',
-  iconMarker:{
-    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-  },
-  maxZoom:19,
-  renderMarker:true,
-  dragMarker:false,
-  createFigures:{
-    polygon: false,
-    rectangle: false,
-    marker:false,
-  },
-  editFigures:{
-    edit: false,
-    remove: false
-  }
-}
-
-const coordinatesMap = ref([-19.0382054,-65.2662444,13])
-
-const getGeoJSON = (geojson:any) =>{
-  console.log(geojson)
-}
-
-const dataPolygon =[{"type":"Feature","properties":{},
-"geometry":{"type":"Polygon","coordinates":[
-  [[-65.268488,-19.038266],[-65.25703,-19.034128],[-65.256085,-19.039361],[-65.268788,-19.043337],[-65.268488,-19.038266]]
-]}}] //
-
-</script>
-
-<style>
- @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
-</style>
-```
-## Configuracion de Trigger click button Save Edit (Guardar Edicion de Polygonos)
-Configuracion para ejecutar el disparador que guarda el polygono desde un boton fuera del mapa 
-```typescript
-<template>
-  <div>
-    <button @click="SaveEdit">Trigger Save Edit</button>
-    <div style="display:flex;width: 100%;">
-        <div style="width:30%">
-          <MapView :loadPolygon="true" ref="Ref_MapView" :dataPolygon="dataPolygon" :reverseCoordinatesPolygon="true" :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {MapView} from "vue-geojson-view-ts"
-import { ref } from "vue";
-const Ref_MapView = ref();
-const configurationMap = {
-  height:'500px',
-  iconMarker:{
-    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-  },
-  maxZoom:19,
-  renderMarker:true,
-  dragMarker:false,
-  createFigures:{
-    polygon: false,
-    rectangle: false,
-    marker:false,
-  },
-  editFigures:{
-    edit: true,
-    remove: true
-  }
-}
-const coordinatesMap = [-19.0382054,-65.2662444,13]
-
-const getGeoJSON = (geojson:any) =>{
-  ////Los datos seran enviados a este callback desde el boton dentro del mapa como desde el TRIGGER
-  console.log("geojson",geojson)
-}
-
-const SaveEdit = () =>{
-  Ref_MapView.value.triggerSaveEdit()
-}
-
-const getLayersFeatures = () =>{
-  const getLayersToGeoJson = Ref_MapView.value.getLayersFeaturesInGeoJson()
-  console.log(getLayersToGeoJson)
-}
-</script>
-```
-## Configuracion de Marcador o Puntero dentro de polygono
-Configuracion para ver si un punto esta dentro de un polygono
-```typescript
-<template>
-    <div>
-        <CoordinatesVerifyPolygon :dataPolygon="dataPolygon" :coordinatesMap="coordinatesMap" :iconMarker="iconMarker" :checkPointInPolygon = "checkPointInPolygon"/>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-const iconMarker = {
-  iconUrl:'/images/icon.png'.
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-}
-
-const coordinatesMap = ref([-19.0382054,-65.2662444,13])
-
-const checkPointInPolygon = (check:Boolean) =>{
-  console.log(check)
-}
-
-const dataPolygon = {"type":"Feature","properties":{},
-"geometry":{"type":"Polygon","coordinates":[
-  [[-65.268488,-19.038266],[-65.25703,-19.034128],[-65.256085,-19.039361],[-65.268788,-19.043337],[-65.268488,-19.038266]]
-]}}
-
-</script>
-
-<style>
- @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
-</style>
-```
-
-
-## Utilizar Google Maps para la busqueda de direcciones
-Configuracion para el uso del buscador de direcciones de googlemaps 
-#### IMP.- Por seguridad y uso solo de los sitios esperados... se debe enviar un parametro blts=listen por la url ej: http://localhost:8080/?blts=listen donde se quira utilizar la extension
-
-#### 1.- Instalar la extension 
-##### a.- Dirijase a brave://extensions/  o  chrome://extensions/
-##### b.- Habilite la opcion desarrollador
-##### c.- Luego clic en  CARGAR DESCOMPRIMIDO
-##### d.- Busque la extension descargada y descomprimido "GMI" de este repositorio
-    
-#### 2.- En su componente principal App.vue cargue listenServiceGoogleMaps este servicio escuchara cuando se abra y encuentre las coordenadas de su busqueda en google.
-
-```typescript
-import {listenServiceGoogleMaps} from 'vue-geojson-view-ts'
-import { onMounted } from 'vue';
-
-onMounted(() => {
-  listenServiceGoogleMaps()
-});
-
-```
-
-#### 3.- Donde tenga cargado su Mapa importe su tipo de buscador que desea utilizar
-
-```typescript
-<template>
-    <div>
-      <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"  :getCoodMarker="getCoodMarker"></MapView>
-    </div>
-    <button @click="manualGoogleMaps">manual</button>
-    <button @click="automaticGoogleMaps">automatic</button>
-</template>
-
-<script setup lang="ts">
-import {searchAutomaticGoogleMaps,searchManualGoogleMaps} from 'vue-geojson-view'
-import { ref } from 'vue';
-
-const coordinatesMap = ref([-19.0382054,-65.2662444,13])
-
-const manualGoogleMaps = () =>{
-    searchManualGoogleMaps().then(cood =>{
-        coordinatesMap.value = cood
-    }).catch(e=>{
-        throw e
-    })
-}
-
-const automaticGoogleMaps = () =>{
-      searchAutomaticGoogleMaps('Santa Cruz, Bolivia').then(cood=>{
-        coordinatesMap.value = cood
-      }).catch(e=>{
-          throw e
-      })
-}
-</script>
-```
-
-
-## Utilizar nominatim.openstreetmap.org para la busqueda de direcciones
-```typescript
-<template>
-    <div>
-        <MapSearchAddress :coordinatesMap="coordinatesMap" @updated:coordsMarker="getCoodMarker" 
-        ref="mapRef"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-
-const configurationMap: IConfigurationMap = {
-  height: "500px",
-  maxZoom: 19,
-  renderMarker:true,
-  dragMarker:false,
-  iconMarker: {
-    iconUrl: "https://cdn.onlinewebfonts.com/svg/img_466240.png",
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-  },
-};
-
-const mapRef = ref()
-
-const coordinatesMap = ref({
-  lat: -19.0382054,
-  lng: -65.2662444,
-  zoom: 15,
-})
-
-const getCoodMarker = ({ lat, lng }: { lat: number; lng: number }) => {
-  console.log("coord", lat, lng);
-};
-
-// mapRef.value.searchAddress(query:string) 
-// mapRef.value.searchAddress("Bolivia, Sucre, Bustillos 282");
-// En caso de encontrar una dirección, envia el marcador a la nueva posición y actualiza
-// el marcador via el emit  @updated:coordsMarker
-
-</script>
-
-<style>
- @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
-</style>
+
+## Descripcion
+
+Paquete para el uso de mapas con openstreetmap y geojson con VITE & VUE
+
+## Instalacion
+
+Instalacion del paquete
+
+```sh
+npm i vue-geojson-view-ts
+```
+## Configuracion Creacion de Polygonos
+Configuracion para la creacion de polygonos dentro del mapa
+```typescript
+<template>
+    <div>
+        <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"  :getCoodMarker="getCoodMarker"></MapView>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { MapView } from 'vue-geojson-view-ts'
+import { ref } from 'vue';
+
+const iconMarker = {
+  iconUrl:'/images/icon.png'.
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+}
+
+const configurationMap = {
+  height:'500px',
+  iconMarker:{
+    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+  },
+  maxZoom:19,
+  renderMarker:true,
+  dragMarker:true,
+  createFigures:{
+    polygon: true,
+    circle: true,
+    rectangle: true,
+    marker:true,
+  },
+  editFigures:{
+    edit: true,
+    remove: true
+  }
+}
+const coordinatesMap = ref([-19.0382054,-65.2662444,13])
+
+const getGeoJSON = (geojson:any) =>{
+  console.log(geojson)
+}
+const getCoodMarker = (lat:number,long:number) =>{
+  console.log(lat,long)
+}
+
+
+</script>
+
+<style>
+ @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
+</style>
+
+```
+
+## Configuracion de vista o edicion de Polygonos
+Configuracion para la edicion o solo vista de polygonos dentro del mapa
+```typescript
+<template>
+    <div>
+        <MapView :loadPolygon="true" :dataPolygon="dataPolygon" :reverseCoordinatesPolygon="true" :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { MapView } from 'vue-geojson-view-ts'
+import { ref } from 'vue';
+
+const iconMarker = {
+  iconUrl:'/images/icon.png'.
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+}
+
+const configurationMap = {
+  height:'500px',
+  iconMarker:{
+    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+  },
+  maxZoom:19,
+  renderMarker:true,
+  dragMarker:false,
+  createFigures:{
+    polygon: false,
+    rectangle: false,
+    marker:false,
+  },
+  editFigures:{
+    edit: false,
+    remove: false
+  }
+}
+
+const coordinatesMap = ref([-19.0382054,-65.2662444,13])
+
+const getGeoJSON = (geojson:any) =>{
+  console.log(geojson)
+}
+
+const dataPolygon =[{"type":"Feature","properties":{},
+"geometry":{"type":"Polygon","coordinates":[
+  [[-65.268488,-19.038266],[-65.25703,-19.034128],[-65.256085,-19.039361],[-65.268788,-19.043337],[-65.268488,-19.038266]]
+]}}] //
+
+</script>
+
+<style>
+ @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
+</style>
+```
+## Configuracion de Trigger click button Save Edit (Guardar Edicion de Polygonos)
+Configuracion para ejecutar el disparador que guarda el polygono desde un boton fuera del mapa 
+```typescript
+<template>
+  <div>
+    <button @click="SaveEdit">Trigger Save Edit</button>
+    <div style="display:flex;width: 100%;">
+        <div style="width:30%">
+          <MapView :loadPolygon="true" ref="Ref_MapView" :dataPolygon="dataPolygon" :reverseCoordinatesPolygon="true" :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {MapView} from "vue-geojson-view-ts"
+import { ref } from "vue";
+const Ref_MapView = ref();
+const configurationMap = {
+  height:'500px',
+  iconMarker:{
+    iconUrl:'https://cdn.onlinewebfonts.com/svg/img_466240.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+  },
+  maxZoom:19,
+  renderMarker:true,
+  dragMarker:false,
+  createFigures:{
+    polygon: false,
+    rectangle: false,
+    marker:false,
+  },
+  editFigures:{
+    edit: true,
+    remove: true
+  }
+}
+const coordinatesMap = [-19.0382054,-65.2662444,13]
+
+const getGeoJSON = (geojson:any) =>{
+  ////Los datos seran enviados a este callback desde el boton dentro del mapa como desde el TRIGGER
+  console.log("geojson",geojson)
+}
+
+const SaveEdit = () =>{
+  Ref_MapView.value.triggerSaveEdit()
+}
+
+const getLayersFeatures = () =>{
+  const getLayersToGeoJson = Ref_MapView.value.getLayersFeaturesInGeoJson()
+  console.log(getLayersToGeoJson)
+}
+</script>
+```
+## Configuracion de Marcador o Puntero dentro de polygono
+Configuracion para ver si un punto esta dentro de un polygono
+```typescript
+<template>
+    <div>
+        <CoordinatesVerifyPolygon :dataPolygon="dataPolygon" :coordinatesMap="coordinatesMap" :iconMarker="iconMarker" :checkPointInPolygon = "checkPointInPolygon"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const iconMarker = {
+  iconUrl:'/images/icon.png'.
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+}
+
+const coordinatesMap = ref([-19.0382054,-65.2662444,13])
+
+const checkPointInPolygon = (check:Boolean) =>{
+  console.log(check)
+}
+
+const dataPolygon = {"type":"Feature","properties":{},
+"geometry":{"type":"Polygon","coordinates":[
+  [[-65.268488,-19.038266],[-65.25703,-19.034128],[-65.256085,-19.039361],[-65.268788,-19.043337],[-65.268488,-19.038266]]
+]}}
+
+</script>
+
+<style>
+ @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
+</style>
+```
+
+
+## Utilizar Google Maps para la busqueda de direcciones
+Configuracion para el uso del buscador de direcciones de googlemaps 
+#### IMP.- Por seguridad y uso solo de los sitios esperados... se debe enviar un parametro blts=listen por la url ej: http://localhost:8080/?blts=listen donde se quira utilizar la extension
+
+#### 1.- Instalar la extension 
+##### a.- Dirijase a brave://extensions/  o  chrome://extensions/
+##### b.- Habilite la opcion desarrollador
+##### c.- Luego clic en  CARGAR DESCOMPRIMIDO
+##### d.- Busque la extension descargada y descomprimido "GMI" de este repositorio
+    
+#### 2.- En su componente principal App.vue cargue listenServiceGoogleMaps este servicio escuchara cuando se abra y encuentre las coordenadas de su busqueda en google.
+
+```typescript
+import {listenServiceGoogleMaps} from 'vue-geojson-view-ts'
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  listenServiceGoogleMaps()
+});
+
+```
+
+#### 3.- Donde tenga cargado su Mapa importe su tipo de buscador que desea utilizar
+
+```typescript
+<template>
+    <div>
+      <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"  :getCoodMarker="getCoodMarker"></MapView>
+    </div>
+    <button @click="manualGoogleMaps">manual</button>
+    <button @click="automaticGoogleMaps">automatic</button>
+</template>
+
+<script setup lang="ts">
+import {searchAutomaticGoogleMaps,searchManualGoogleMaps} from 'vue-geojson-view'
+import { ref } from 'vue';
+
+const coordinatesMap = ref([-19.0382054,-65.2662444,13])
+
+const manualGoogleMaps = () =>{
+    searchManualGoogleMaps().then(cood =>{
+        coordinatesMap.value = cood
+    }).catch(e=>{
+        throw e
+    })
+}
+
+const automaticGoogleMaps = () =>{
+      searchAutomaticGoogleMaps('Santa Cruz, Bolivia').then(cood=>{
+        coordinatesMap.value = cood
+      }).catch(e=>{
+          throw e
+      })
+}
+</script>
+```
+
+
+## Utilizar nominatim.openstreetmap.org para la busqueda de direcciones
+```typescript
+<template>
+    <div>
+        <MapSearchAddress :coordinatesMap="coordinatesMap" @updated:coordsMarker="getCoodMarker" 
+        ref="mapRef"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const configurationMap: IConfigurationMap = {
+  height: "500px",
+  maxZoom: 19,
+  renderMarker:true,
+  dragMarker:false,
+  iconMarker: {
+    iconUrl: "https://cdn.onlinewebfonts.com/svg/img_466240.png",
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+  },
+};
+
+const mapRef = ref()
+
+const coordinatesMap = ref({
+  lat: -19.0382054,
+  lng: -65.2662444,
+  zoom: 15,
+})
+
+const getCoodMarker = ({ lat, lng }: { lat: number; lng: number }) => {
+  console.log("coord", lat, lng);
+};
+
+// mapRef.value.searchAddress(query:string) 
+// mapRef.value.searchAddress("Bolivia, Sucre, Bustillos 282");
+// En caso de encontrar una dirección, envia el marcador a la nueva posición y actualiza
+// el marcador via el emit  @updated:coordsMarker
+
+</script>
+
+<style>
+ @import url(/node_modules/vue-geojson-view-ts/dist/style.css);
+</style>
 ```