Descripcion

Paquete para el uso de mapas con openstreetmap y geojson

Instalacion

Instalacion del paquete

npm i vue-geojson-view

Configuracion Creacion de Polygonos

Configuracion para la creacion de polygonos dentro del mapa

<template>
    <div>
        <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
    </div>
</template>

import 'vue-geojson-view/dist/leaflet/leaflet.css';
import 'vue-geojson-view/dist/leaflet-draw/leaflet.draw.css';
import { MapView } from 'vue-geojson-view'

export default{
    name:"GeoJson",
    data(){
        return {
            configurationMap:{
                height:'500px',
                maxZoom:19,
                createFigures:{
                    polygon: true,
                    circle: true,
                    rectangle: true,
                },
                editFigures:{
                    edit: true,
                    remove: true
                }
            },
            coordinatesMap:[-19.0382054,-65.2662444,13],
        }
    },   
    components:{
        MapView
    },
    methods:{
        getGeoJSON(geojson){
            console.log(geojson)
        },
    }
}

Configuracion de vista o edicion de Polygonos

Configuracion para la edicion o solo vida de polygonos dentro del mapa

<template>
    <div>
        <MapView :loadPolygon="true" :dataPolygon="dataPolygon" :reverseCoordinatesPolygon="true" :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
    </div>
</template>

import 'vue-geojson-view/dist/leaflet/leaflet.css';
import 'vue-geojson-view/dist/leaflet-draw/leaflet.draw.css';
import { MapView } from 'vue-geojson-view'

export default{
    name:"GeoJson",
    data(){
        return {
            configurationMap:{
                height:'500px',
                maxZoom:19,
                createFigures:{
                    polygon: true,
                    circle: true,
                    rectangle: true,
                },
                editFigures:{
                    edit: true,
                    remove: true
                }
            },
            coordinatesMap:[-19.0382054,-65.2662444,13],
        }
    },   
    components:{
        MapView
    },
    methods:{
        getGeoJSON(geojson){
            console.log(geojson)
        },
    }
}

Utilizar Google Maps para la busqueda de direcciones

Configuracion para el uso del buscador de direcciones de googlemaps

1.- Instale la extension

Arrastrando esta extension a su navegador brave interceptor_google_maps.crx (por favor provar en navegador BRAVE por el momento)

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'
export default {
  name: 'App',
  mounted(){
    listenServiceGoogleMaps()
  }
}

3.- Donde tenga cargado su Mapa importe su tipo de buscador que desea utilizar

<template>
    <div>
        <MapView :configurationMap="configurationMap" :coordinatesMap="coordinatesMap" :getGeoJSON="getGeoJSON"></MapView>
    </div>
    <button @click="automaticGoogleMaps">Busqueda Automatica</button>
    <button @click="manualGoogleMaps">Busqueda Manual</button>
</template>

import {searchAutomaticGoogleMaps,searchManualGoogleMaps} from 'vue-geojson-view'


export default {
  name: 'App',
  data(){
    return {
      configurationMap:{
          height:'500px',
          maxZoom:19,
          createFigures:{
            polygon: true,
            circle: true,
            rectangle: true,
          },
          editFigures:{
            edit: true,
            remove: true
          }
      },
      coordinatesMap:[-19.0382054,-65.2662444,13],
      configurationViewPolygon:{
          height:'500px',
          zoom:13,
          coordinates:[-19.0382054,-65.2662444,13],
      }
    }
  },
  components: {
    MapView,
  },
  methods:{
    getGeoJSON(geojson){
      console.log(geojson)
    },
    async automaticGoogleMaps(){
        let search = 'Santa Cruz, Bolivia'
      searchAutomaticGoogleMaps(search).then(coordinatesMap=>{
        this.coordinatesMap = coordinatesMap
      }).catch(e=>{
          throw e
      })
    },
    async manualGoogleMaps(){
      searchManualGoogleMaps().then(coordinatesMap=>{
        this.coordinatesMap = coordinatesMap
      }).catch(e=>{
          throw e
      })
    }
  }
}