Cómo crear una aplicación de codificación geográfica en Vue.js usando Mapbox

En esta guía, analizaremos de forma general los conceptos de geocodificación directa y geocodificación inversa. Crearemos una miniaplicación que aplique estos conceptos para mostrar ubicaciones específicas, usando Mapbox y Vue.js 2.6.11 para lograrlo.

La precisión milimétrica y la modularidad se encuentran entre las ventajas que hacen de los códigos geográficos el medio perfecto para encontrar una ubicación en particular.

En esta guía, crearemos una aplicación de codificación geográfica sencilla desde cero, utilizando Vue.js y Mapbox. Cubriremos el proceso desde la construcción del andamiaje frontal hasta la construcción de un geocodificador para manejar la geocodificación directa y la geocodificación inversa. Para aprovechar al máximo esta guía, necesitará conocimientos básicos de JavaScript y Vue.js y de cómo realizar llamadas API.

¿Qué es la geocodificación?

La geocodificación es la transformación de ubicaciones basadas en texto en coordenadas geográficas (normalmente, longitud y latitud) que indican una ubicación en el mundo.

La geocodificación es de dos tipos: hacia adelante y hacia atrás . La geocodificación directa convierte los textos de ubicación en coordenadas geográficas, mientras que la geocodificación inversa convierte las coordenadas en textos de ubicación.

En otras palabras, la geocodificación inversa convierte 40.714224, -73.961452 en “277 Bedford Ave, Brooklyn”, y la geocodificación directa hace lo contrario: convierte “277 Bedford Ave, Brooklyn” en 40.714224, -73.961452.

Para brindar más información, crearemos una mini aplicación web que utiliza un mapa web interactivo con marcadores personalizados para mostrar coordenadas de ubicación, que posteriormente decodificaremos en textos de ubicación.

Nuestra aplicación tendrá las siguientes funciones básicas:

• dar al usuario acceso a una visualización de mapa interactiva con un marcador;
• permitir al usuario mover el marcador a voluntad, mientras muestra las coordenadas;
• devolver una ubicación basada en texto o coordenadas de ubicación a pedido del usuario.

Configurar proyecto usando Vue CLI

Usaremos el texto estándar que se encuentra en este repositorio . Contiene un nuevo proyecto con Vue CLI y yarncomo administrador de paquetes. Necesitarás clonar el repositorio. Asegúrate de estar trabajando desde la geocoder/boilerplatesucursal.

Configurar la estructura de archivos de la aplicación

A continuación, necesitaremos configurar la estructura de archivos de nuestro proyecto. Cambie el nombre del Helloworld.vuearchivo en la carpeta del componente a Index.vuey déjelo en blanco por ahora. Continúe y copie lo siguiente en el App.vuearchivo:

template  div    !--Navbar Here --    div      nav        div          h3Geocoder/h3        /div      /nav    /div    !--Index Page Here --    index /  /div/templatescriptimport index from "./components/index.vue";export default {  name: "App",  components: {    index,  },};/script

Aquí, importamos y luego registramos localmente el componente recientemente renombrado. También agregamos una barra de navegación para mejorar la estética de nuestra aplicación.

Necesitamos un .envarchivo para cargar las variables de entorno. Continúe y agregue uno en la raíz de la carpeta de su proyecto.

Instalar paquetes y bibliotecas necesarios

Para iniciar el proceso de desarrollo, necesitaremos instalar las bibliotecas necesarias. Aquí hay una lista de los que usaremos para este proyecto:

1. Mapbox GL JS
   Esta biblioteca de JavaScript utiliza WebGL para representar mapas interactivos a partir de mosaicos vectoriales y Mapbox .
2. Mapbox-gl-geocoder
   Este control de geocodificador para Mapbox GL nos ayudará con nuestra geocodificación directa.
3. Dotenv
   No tendremos que instalarlo porque viene preinstalado con Vue CLI. Nos ayuda a cargar variables de entorno desde un .envarchivo a process.env. De esta manera, podemos mantener nuestras configuraciones separadas de nuestro código.
4. Axios
   Esta biblioteca nos ayudará a realizar solicitudes HTTP.

Instale los paquetes en su CLI de acuerdo con su administrador de paquetes preferido. Si está utilizando Yarn, ejecute el siguiente comando:

cd geocoder  yarn add mapbox-gl @mapbox/mapbox-gl-geocoder axios

Si estás usando npm, ejecuta esto:

cd geocoder  npm i mapbox-gl @mapbox/mapbox-gl-geocoder axios --save

Primero tuvimos que ingresar a la geocodercarpeta antes de ejecutar el comando de instalación.

Andamiaje del front-end con Vue.js

Sigamos adelante y creemos un diseño para nuestra aplicación. Necesitaremos un elemento para albergar nuestro mapa, una región para mostrar las coordenadas mientras escuchamos el movimiento del marcador en el mapa y algo para mostrar la ubicación cuando llamamos a la API de geocodificación inversa. Podemos albergar todo esto dentro de un componente de tarjeta.

Copie lo siguiente en su Index.vuearchivo:

template  div    div      !-- Map Display here --      div        div/div      /div      !-- Coordinates Display here --      div        div          h3Current Coordinates/h3          pLatitude:/p          pLongitude:/p        /div        div          h3Current Location/h3          div            input              type="text"                           :value="location"              readonly            /            button type="button"Copy/button          /div          button type="button"Get Location/button        /div      /div    /div  /div/template

Para ver lo que tenemos actualmente, inicie su servidor de desarrollo. Para hilo:

yarn serve

O para npm:

npm run serve

Nuestra aplicación debería verse así ahora:

El espacio en blanco a la izquierda parece apagado. Debería albergar nuestra visualización del mapa. Agreguemos eso.

Visualización de mapas interactivos con Mapbox

Lo primero que debemos hacer es acceder a las bibliotecas Mapbox GL y Geocoder. Comenzaremos importando las bibliotecas Mapbox GL y Geocoder en el Index.vuearchivo.

import axios from "axios";import mapboxgl from "mapbox-gl";import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

Mapbox requiere un token de acceso único para calcular mosaicos vectoriales de mapas. Obtenga el suyo y agréguelo como variable ambiental en su .envarchivo.

.env

VUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

También necesitamos definir propiedades que nos ayudarán a juntar los mosaicos de nuestro mapa en nuestra instancia de datos. Agregue lo siguiente debajo del lugar donde importamos las bibliotecas:

export default {  data() {    return {      loading: false,      location: "",      access_token: process.env.VUE_APP_MAP_ACCESS_TOKEN,      center: [0, 0],      map: {},    };  },}

• La locationpropiedad se modelará según la entrada que tengamos en nuestro andamio. Usaremos esto para manejar la codificación geográfica inversa (es decir, mostrar una ubicación a partir de las coordenadas).
• La centerpropiedad alberga nuestras coordenadas (longitud y latitud). Esto es fundamental para juntar los mosaicos de nuestro mapa, como veremos en breve.
• La access_tokenpropiedad se refiere a nuestra variable ambiental, que agregamos anteriormente.
• La mappropiedad sirve como constructor para nuestro componente de mapa.

Procedamos a crear un método que trace nuestro mapa interactivo con nuestro geocodificador directo integrado en él. Este método es nuestra función base, sirviendo como intermediario entre nuestro componente y Mapbox GL; Llamaremos a este método createMap. Agregue esto debajo del objeto de datos:

mounted() {  this.createMap()},methods: {  async createMap() {    try {      mapboxgl.accessToken = this.access_token;      this.map = new mapboxgl.Map({        container: "map",        style: "mapbox://styles/mapbox/streets-v11",        center: this.center,        zoom: 11,      });    } catch (err) {      console.log("map error", err);    }  },},

Para crear nuestro mapa, hemos especificado un elemento containerque alberga el mapa, una stylepropiedad para el formato de visualización de nuestro mapa y una centerpropiedad para albergar nuestras coordenadas. La centerpropiedad es de tipo matriz y contiene la longitud y la latitud.

Mapbox GL JS inicializa nuestro mapa en función de estos parámetros en la página y Mapnos devuelve un objeto. El Mapobjeto hace referencia al mapa en nuestra página, al tiempo que expone métodos y propiedades que nos permiten interactuar con el mapa. Hemos almacenado este objeto devuelto en nuestra instancia de datos this.map.

Geocodificación directa con Mapbox Geocoder

Ahora agregaremos el geocodificador y el marcador personalizado. El geocodificador maneja la geocodificación directa transformando ubicaciones basadas en texto en coordenadas. Esto aparecerá en forma de un cuadro de entrada de búsqueda adjunto a nuestro mapa.

Agregue lo siguiente debajo de la this.mapinicialización que tenemos arriba:

let geocoder =  new MapboxGeocoder({    accessToken: this.access_token,    mapboxgl: mapboxgl,    marker: false,  });this.map.addControl(geocoder);geocoder.on("result", (e) = {  const marker = new mapboxgl.Marker({    draggable: true,    color: "#D80739",  })    .setLngLat(e.result.center)    .addTo(this.map);  this.center = e.result.center;  marker.on("dragend", (e) = {    this.center = Object.values(e.target.getLngLat());  });});

Aquí, primero creamos una nueva instancia de un geocodificador usando el MapboxGeocoderconstructor. Esto inicializa un geocodificador según los parámetros proporcionados y devuelve un objeto, expuesto a métodos y eventos. La accessTokenpropiedad se refiere a nuestro token de acceso a Mapbox y mapboxglse refiere a la biblioteca de mapas utilizada actualmente.

El núcleo de nuestra aplicación es el marcador personalizado; el geocodificador viene con uno por defecto. Sin embargo, esto no nos brindaría toda la personalización que necesitamos; por lo tanto, lo hemos desactivado.

Continuando, pasamos nuestro geocodificador recién creado como parámetro del addControlmétodo, expuesto por nuestro objeto de mapa. addControlacepta a controlcomo parámetro.

Para crear nuestro marcador personalizado, hemos utilizado un evento expuesto por nuestro objeto geocodificador. El ondetector de eventos nos permite suscribirnos a eventos que suceden dentro del geocodificador. Acepta varios eventos como parámetros. Estamos escuchando el resultevento, que se activa cuando se establece una entrada.

En pocas palabras, en result, nuestro constructor de marcadores crea un marcador, según los parámetros que hemos proporcionado (un atributo y un color que se pueden arrastrar, en este caso). Devuelve un objeto, con el que utilizamos el setLngLatmétodo para obtener nuestras coordenadas. Agregamos el marcador personalizado a nuestro mapa existente usando el addTométodo. Finalmente, actualizamos la centerpropiedad en nuestra instancia con las nuevas coordenadas.

También tenemos que rastrear el movimiento de nuestro marcador personalizado. Logramos esto utilizando el dragenddetector de eventos y actualizamos nuestra centerpropiedad con las coordenadas actuales.

Actualicemos la plantilla para mostrar nuestro mapa interactivo y reenviar el geocodificador. Actualice la sección de visualización de coordenadas en nuestra plantilla con lo siguiente:

div  h3Current Coordinates/h3  pLatitude: {{ center[0] }}/p  pLongitude: {{ center[1] }}/p/div

¿Recuerda que siempre actualizamos nuestra centerpropiedad después de un evento? Estamos mostrando las coordenadas aquí según el valor actual.

Para mejorar la estética de nuestra aplicación, agregue el siguiente archivo CSS en la headsección del index.htmlarchivo. Coloque este archivo en la carpeta pública.

link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" /

Nuestra aplicación debería verse así ahora:

Ubicación de geocodificación inversa con Mapbox API

Ahora, manejaremos la geocodificación inversa de nuestras coordenadas en ubicaciones basadas en texto. Escribamos un método que maneje eso y actívelo con el Get Locationbotón en nuestra plantilla.

La geocodificación inversa en Mapbox es manejada por la API de geocodificación inversa. Esto acepta longitude, latitudey access tokencomo parámetros de solicitud. Esta llamada devuelve una carga útil de respuesta, normalmente con varios detalles. Nuestra preocupación es el primer objeto de la featuresmatriz, donde está la ubicación geocodificada inversa.

Necesitaremos crear una función que envíe el longitudey la ubicación a la que queremos llegar a la API de Mapbox latitude. access_tokenNecesitamos enviarlos para obtener los detalles de esa ubicación.

Finalmente, necesitamos actualizar la locationpropiedad en nuestra instancia con el valor de la place_nameclave en el objeto.

Debajo de la createMap()función, agreguemos una nueva función que maneje lo que queremos. Así es como debería verse:

async getLocation() {  try {    this.loading = true;    const response = await axios.get(      `https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center[0]},${this.center[1]}.json?access_token=${this.access_token}`    );    this.loading = false;    this.location = response.data.features[0].place_name;  } catch (err) {    this.loading = false;    console.log(err);  }},

Esta función realiza una GETsolicitud a la API de Mapbox. La respuesta contiene place_name: el nombre de la ubicación seleccionada. Obtenemos esto de la respuesta y luego lo configuramos como el valor de this.location.

Una vez hecho esto, necesitamos editar y configurar el botón que llamará a esta función que hemos creado. Usaremos un clickdetector de eventos, que llamará al getLocationmétodo cuando un usuario haga clic en él. Continúe y edite el componente del botón a esto.

button  type="button"  :disabled="loading"  :class="{ disabled: loading }"   @click="getLocation"  Get Location/button

Como guinda del pastel, adjuntemos una función para copiar la ubicación mostrada al portapapeles. Agregue esto justo debajo de la getLocationfunción:

copyLocation() {  if (this.location) {    navigator.clipboard.writeText(this.location);    alert("Location Copied")  }  return;},

Actualice el Copycomponente del botón para activar esto:

button type="button" @click="copyLocation"

Conclusión

En esta guía, analizamos la codificación geográfica usando Mapbox. Creamos una aplicación de codificación geográfica que transforma ubicaciones basadas en texto en coordenadas, mostrando la ubicación en un mapa interactivo y que convierte las coordenadas en ubicaciones basadas en texto, según la solicitud del usuario. Esta guía es sólo el comienzo. Se podría lograr mucho más con las API de geocodificación, como cambiar la presentación del mapa utilizando los distintos estilos de mapa proporcionados por Mapbox.

• El código fuente está disponible en GitHub .

Recursos

• “ Geocodificación ”, documentación de Mapbox
• “ Estilos ”, documentación de Mapbox
• “ Uso de variables Env en código del lado del cliente ”, en “Modos y variables de entorno”, Vue CLI

(ks, vf, yk, il, al)Explora más en

• API
• vista
• Aplicaciones
• javascript