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.
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:
<!DOCTYPE html>
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height: 550px; }
</style>
</head>
<body>
<div id = 'map'></div>
<script>
mapboxgl.accessToken = 'Aquí va el Access Token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [2.168, 41.381],
zoom: 13
});
</script>
</body>
</html>
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.
Índice
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.
map.addControl(new mapboxgl.NavigationControl());
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.
map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.FullscreenControl());
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.
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
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:
#coordenadas {
display: block;
position: relative;
margin: 0px auto;
width: 40%;
padding: 5px;
border: none;
border-radius: 7px;
font-size: 15px;
font-family: Montserrat;
text-align: center;
color: #000;
background: #D6EAF8;
}
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.
<body>
<div id = 'map'></div>
<pre id='coordenadas'></pre>
<script>
Por último, añadimos la función al final del script.
map.on('mousemove', function (e) {
document.getElementById('coordenadas').innerHTML =
JSON.stringify(e.lngLat);
});
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.
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script> <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
El segundo paso es añadir el control mapbox-gl-geocoder a nuestro script. Lo añadiremos justo encima del control de navegación.
map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken
}));
El código completo de nuestro mapa sería este:
<!DOCTYPE html>
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%;}
#coordenadas {
display: block;
position: relative;
margin: 0px auto;
width: 40%;
padding: 5px;
border: none;
border-radius: 7px;
font-size: 15px;
font-family: Montserrat;
text-align: center;
color: #000;
background: #D6EAF8;
}
</style>
</head>
<body>
<div id = 'map'></div>
<pre id='coordenadas'></pre>
<script>
mapboxgl.accessToken = 'Aquí va el Access Token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [2.168, 41.381],
zoom: 13
});
map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken
}));
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
map.on('mousemove', function (e) {
document.getElementById('coordenadas').innerHTML =
JSON.stringify(e.lngLat);
});
</script>
</body>
</html>
Y así quedaría nuestro mapa insertado en una página web:
Licenciado en Geografía con un Máster en Técnicas para la Gestión del Medio Ambiente y del Territorio. Especializado en GIS, Web Mapping y análisis y visualización de datos geoespaciales. Sígueme en Twitter.