Cómo añadir un buscador en Mapbox


En este tutorial veremos como añadir algo tan práctico como un buscador de direcciones o también conocido como geocoder en un mapa de Mapbox.


A continuación, os dejamos el código fuente en formato html para que solo tengáis que copiar y pegar en vuestro editor de texto favorito.

						
<!DOCTYPE html>
<html>
<head>
	<meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>

	<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script> 
	<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

	<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet">
	<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" rel="stylesheet" type="text/css">

	<style>
	   body { margin: 0; padding: 0; }
	   #map { position: absolute; top: 0; bottom: 0; width: 100%; }
	</style>
</head>
<body>
	<div id="map"></div>
	<script>
	mapboxgl.accessToken = 'Tu Token de Mapbox';
	var map = new mapboxgl.Map({
		container: 'map',
		style: 'mapbox://styles/mapbox/streets-v11',
		center: [-15.569022, 27.972500],
		zoom: 9
	});

	map.addControl(
		new MapboxGeocoder({
			accessToken: mapboxgl.accessToken,
			mapboxgl: mapboxgl
		})
	);
	</script>
</body>
</html>
						
					

¿Qué es un Geocoder?

El Geocoder es un algoritmo de Geocodificación que asigna coordenadas geográficas a puntos del mapa, especialmente direcciones. Las coordenadas geográficas producidas pueden luego ser usadas para localizar el punto del mapa en un Sistema de Información Geográfica.

Mapbox dispone un algoritmo de geocodificación muy potente para buscar lugares y direcciones usando su API Mapbox Geocoding.

Vamos a ver paso a paso como integrar esta API en nuestro mapa, para ello podemos tomar como base el tutorial que realizamos con anterioridad de cómo crear un mapa base con Mapbox GL.

Si nos fijamos en la parte del encabezado o head, aparte del script de Mapbox GL, nos encontramos con otros 3 scripts:

						
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
						
					

El primero es la API mapbox-gl-geocoder, que se va a encargar de llamar a la biblioteca de geocoder de Mapbox GL, notaremos que en el momento de realizar este tutorial están utilizando la versión v4.4.2.

Las otras dos scripts se van a encargar de las llamadas asíncronas a través de JavaScript ES6, si queréis saber un poco más sobre estas llamadas os dejo este enlace.

Ahora vamos a ver la parte de los estilos, si nos centramos únicamente en la parte de geocoder, veremos que hace una llamada a una hoja de estilos en cascada o css.

						
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" rel="stylesheet" type="text/css">
						
					

Al igual que con el script están utilizando la versión v4.4.2 del css.

Si ahora nos centramos en el body o cuerpo del código, veremos dos partes diferenciadas, la primera es el contenedor del mapa, directamente relacionado con los estilos con el código “map”.

						
<div id="map"></div>
						
					

La segunda parte del body es el script que se va a ejecutar cada vez que realicemos una búsqueda o recarguemos la página.

Esta diferenciado en 3 partes:

En la primera parte del código debemos introducir nuestro Token individual:

						
mapboxgl.accessToken = 'Tu Token de Mapbox';
						
					

En la segunda parte del código debemos introducir nuestro estilo de Mapbox, las coordenadas del centro del mapa y la escala de visualización.

						
var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [-15.569022, 27.972500],
	zoom: 9
});
						
					

Y ya por ultimo y en la tercera parte del script añadiremos la barra de búsqueda del buscador, por defecto está situada en la parte superior izquierda del mapa.

						
map.addControl(
	new MapboxGeocoder({
		accessToken: mapboxgl.accessToken,
		mapboxgl: mapboxgl
	})
);
						
					

Y ya tenemos listo nuestro buscador utilizando la API de Mapbox GL geocoder.

Si realizamos una prueba, buscamos una dirección y le damos a la lupa, el mapa se desplazará a la dirección buscada y añadirá un marcador.

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm