Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-geojson-view-ts

Package Overview
Dependencies
Maintainers
3
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-geojson-view-ts

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

  • 1.3.2
  • npm
  • Socket score

Version published
Weekly downloads
3
decreased by-40%
Maintainers
3
Weekly downloads
 
Created
Source

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>

Keywords

FAQs

Package last updated on 28 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc