poligono vuejs google maps

Polígonos con VueJS Google Maps en Quasar – 2da Parte

Hola de nuevo amigos lectores de CodigoJS, Desarrollo Web en Sevilla. Esta es la segunda parte del post sobre como insertar un mapa de Google en una página web. En esta segunda entrega aprenderemos a dibujar las fronteras de los países, provincias o municipios del cualquier país del mundo usando Polígonos con VueJS Google Maps en Quasar Framework.

Sigue leyendo si te interesa este tema y recuerda suscribirte a nuestro blog para no perderte ninguna entrada.

Fronteras de países o provincias con Google Maps

Como había dicho en la entrada anterior necesitábamos dibujar las fronteas/bordes de las provincias y municipios de un país en un proyecto en el que estamos trabajando. Investigando encontramos que la API de Google Maps no contaba con esta función.

Continuamos buscando y en un foro nos recomendaron extraer los datos desde GADM donde prácticamente están casi todos los países del mundo con sus divisiones.

IMPORTANTE: Antes de continuar es importante aclarar que los datos de GADM están disponibles gratuitamente para uso académico y otros usos no comerciales. La redistribución, o uso comercial, no está permitida sin permiso previo.

Extraer los datos de la zona

El punto más importante es extraer las coordenadas que dibujan la zona que quieres resaltar o marcar en el mapa, para eso accedemos a https://gadm.org/download_country_v3.html y seleccionamos Spain que es el país con el que estamos trabajando .

mapa espana

Al seleccionar el país veremos a la derecha como se dibuja el país seleccionado con todas sus divisiones.

La parte que nos interesa son los enlaces que se encuentran debajo del selector del país, más específicamente los datos KMZ

level-0: corresponde a las coordenadas del país.
level-1: corresponde a las coordenadas de los estados o provincias.
level-2: Corresponde a las coordenadas las ciudades o comunidades.

Los niveles pueden varias de un país a otro, pero por general los tres primeros corresponden con la lista anterio.

Después de descargar el nivel que necesites (en nuestro caso el level-2 que corresponde a los estados o provincias) es necesario descomprimirlo.

Descomprimir datos

Ahora podemos abrir el archivo con el editor preferido y localizar el estado que queremos resaltar en el mapa (en este ejemplo hemos seleccionado Málaga en España)

Coordenadas de provincia

Seleccionar todas las coordenadas que están entre las etiquetas <coordinates> y </coordinates> y las copiamos a un nuevo archivo .js (en mi caso le he puesto paths.js)

Debemos convertir todas estas coordenadas a la estructura que requiere vuejs google maps para dibujar un polígono en el mapa, que es la siguiente:

const paths = [
  [{ 'lng': -4.00082588, 'lat': 36.73986053 },
  { 'lng': -4.00152779, 'lat': 36.73986053 },
  { 'lng': -4.00152779, 'lat': 36.74013901 },
  { 'lng': -4.00291586, 'lat': 36.74013901 },
  ….
  ….
  ….
  { 'lng': -4.41819477, 'lat': 36.71236038 },
  { 'lng': -4.41680479, 'lat': 36.71236038 },
  { 'lng': -4.41680479, 'lat': 36.71209717 } ]
]

export { paths }

Por último exportamos la constante para poder importarla en la pagina Index.vue

NOTA: Extraer y formatear las coordenadas puede ser un proceso engorrozo. En este artículo hemos hecho todo a mano para demostrar el proceso pero lo más recomendable es crear un script que extraiga y formatee los datos de forma automática.

Una vez que tenemos la estructura creada copiamos el archivo con las coordenadas al directorio /statics del proyecto.

Dibujando el poligono con Vuejs Google Maps

Nos vamos a nuestro archivo Index.vue y justo debajo de la importación de VueGoogleMaps importamos el archivo que contiene las coordenadas de la zona que vamos a resaltar en el mapa.

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

import { paths } from '../statics/paths'
...
...

A continuación añadimos una variable llamada paths al data y le asignamos la importación del archivo de coordenadas.

data () {
  return {
    center: {
      lat: 36.60338869729776,
      lng: -4.643738644531254
    },
    zoom: 7,
    markers: [
      { lat: 36.71395099999999, lng: -4.432000000000016 },
      { lat: 36.51007199999999, lng: -4.882447400000046 }
    ],
    options: {
      zoomControl: true,
      mapTypeControl: false,
      scaleControl: false,
      streetViewControl: false, 
      fullscreenControl: true 
    },
    icon: '/statics/marker.png',
    paths: paths // Coordenadas
  }
}

Por último necesitamos añadir el componente <gmap-polygon> </gmap-polygon> al componente <gmap-map> para que quede de la siguiente forma:

<template>
  <q-page class="col">
    <div id="mapa">
      <gmap-map
        :center="center"
        :zoom="zoom"
        :options="options"
        style="width: 100%; height: 450px;">
        <gmap-marker v-for="(marker) in markers"
          :key="marker.key"
          :position="marker"
          :icon="icon"
        >
        </gmap-marker>
        <gmap-polygon :paths="paths" :editable="false" :draggable="false"></gmap-polygon>
      </gmap-map>
  </div>
  </q-page>
</template>

Ahora nos vamos al navegador y si todo ha salido bien veremos la provincia de Málaga resaltada en el mapa.

poligono vuejs google maps

Fácil verdad!!!

Espero que esta segunda parte haya sido tan interesante como la anterior, si tienes alguna duda o quieres compartir te esperamos en los comentarios.

El código de este proyecto está disponible en GitHub para que lo puedas clonar y utilizar.

Para terminar con los mapas, la próxima semana publicaré otro artículo sobre como cambiar los estilos de los mapas de Google Maps. Si no te la quieres perder suscríbete más abajo.

No vemos pronto.

Suscríbete a nuestro boletín y mantente informado de todas nuestras publicaciones

2 comentarios en “Polígonos con VueJS Google Maps en Quasar – 2da Parte”

  1. Hola saludos muy interesante tu tutorial muy bien explicado seria muy bueno que tal vez pueda hacer otros tutoriales sobre buscar direcciones y marcar punto de partida y llegada y asi mismo pueda marca la ruta para llegar al punto y marca la ubicación en tiempo real de movimiento de la persona

    Espero que pueda tomar mi sugerencia muchas gracias y éxitos.

    Responder

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.