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

Lun 27 Ene 2020

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

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

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.vueNOTA: 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 google maps con Vue

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.



Déjanos un comentario

Artículos relacionados

 

Este sitio web utiliza cookies con la finalidad de ofrecer una mejor experiencia a nuestros usuarios. Al continuar navegando acepta nuestra Política de Cookie.
Estoy de acuerdo