Cómo añadir funcionalidades a un mapa web con Mapbox GL JS

En la entrada anterior, cómo crear un mapa web con Mapbox GL JS, vimos cómo crear un mapa utilizando la librería de Mapbox. En esta entrada veremos cómo añadir diferentes funcionalidades y plugins al mapa para enriquecerlo y que sea más atractivo navegar sobre él.

funcionalidades Mapbox GL JS

Mapa básico

Partimos del mismo código y mapa que creamos en el post anterior. El código completo de nuestro mapa es el siguiente:

Vista del mapa insertado en una página web:

Funcionalidades y complementos

Mapbox ofrece una gran cantidad de plugins y funcionalidades para mejorar la interfaz y la interacción del usuario. En la documentación que ofrece Mapbox en su web encontramos gran cantidad de información y ejemplos de prueba que nos permitirán comprender mejor el funcionamiento de cada una de ellas.

Controles de navegación del mapa

Permite añadir al mapa controles de zoom y rotación para que la navegación sea mucho más cómoda y sencilla. Para añadir el control a nuestro mapa basta con escribir la siguiente línea de código entre la declaración de la variable map y el cierre del script.

Vista a pantalla completa

Esta funcionalidad permite visualizar el mapa a pantalla completa para obtener una vista más amplia de la zona de estudio. Para poder añadir la opción Fullscreen al mapa escribimos la siguiente línea de código justo debajo de la anterior.

Control de localización del usuario

Esta opción permite geolocalizar al usuario y desplazar el mapa hasta su posición actual. Para poder añadir este control al mapa basta con escribir las siguientes líneas de código a continuación del anterior ejemplo.

Coordenadas del puntero del ratón

Gracias a esta opción podemos conocer la posición (longitud y latitud) del puntero del ratón a medida que lo vamos desplazando por el mapa. Para añadir esta opción al mapa tenemos que definir el estilo del recuadro donde se mostrará la información y añadir la función que permita conocer la posición del ratón sobre el mapa.

En la parte de nuestro html donde definimos los estilos añadiremos el siguiente estilo:

Dentro de la etiqueta <body> encontramos el marcado para el mapa, que genera un único elemento de documento.  Debajo de él añadimos una etiqueta <pre> con el atributo id=coordenadas.

Por último, añadimos la función al final del script.

El resultado final será muy parecido al de la imagen:

Buscador de lugares

Gracias al control mapbox-gl-geocoder se pueden buscar lugares, direcciones, etc., mediante la API Mapbox Geocoding.

El primer paso es incluir en la cabecera <head> de nuestra página web los archivos JavaScript y CSS del plugin.

El segundo paso es añadir el control mapbox-gl-geocoder a nuestro script. Lo añadiremos justo encima del control de navegación.

El código completo de nuestro mapa sería este:

Y así quedaría nuestro mapa insertado en una página web:

Si quieres aprender más sobre Mapbox y Mapbox Studio inscríbete en nuestro curso online aplicaciones GIS en la nube.

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos