vue-geojson-view-ts

Descripcion

Paquete para el uso de mapas con openstreetmap y geojson con VITE & VUE

Instalacion

Instalacion del paquete

npm i vue-geojson-view-ts

Configuracion Creacion de Polygonos

Configuracion para la creacion de polygonos dentro del mapa

<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

<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

<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

<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.

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

<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

<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>