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

Hola de nuevo amigos lectores de CódigoJS, Desarrollo Web en Sevilla. Esta es la segunda parte del post sobre cómo 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 conVueJS Google Maps en Quasar Framework. Sigue leyendo si te interesa este tema y recuerda suscribirte a nuestro blog para no perderte ninguna entrada.

Tabla de contenido

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 .

Al seleccionar el país, veremos a la derecha cómo 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 KMZlevel-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 variar de un país a otro pero, por lo general, los tres primeros corresponden con la lista anterior. Después de descargar el nivel que necesites (en nuestro caso el level-2 que corresponde a los estados o provincias) es necesario descomprimirlo.

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)

Seleccionamos 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 página Index.vueNOTA: Extraer y formatear las coordenadas puede ser un proceso engorroso. 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.

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 cómo cambiar los estilos de los mapas de Google Maps. Si no te la quieres perder suscríbete más abajo.

No vemos pronto.