Mapbox Navigation Controls


En este rápido tutorial veremos cómo añadir los controladores de zoom y el de rotación del mapa a nuestro mapa básico de Mapbox con la libreria de Mapbox GL JS.


Sin más preámbulo os dejo el código html funcional, ya sabéis solo tenéis que copiar y pegar en vuestro editor de texto favorito y guardarlo como html.

						
<!DOCTYPE html>
<html>
<head>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

        .mapboxgl-ctrl-compass {
    	display: none !important;
		}
    </style>
</head>
<body>
<div id='map'></div>
    <script>
        mapboxgl.accessToken = 'Tu Token de Mapbox';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'Tu estilo de Mapbox',
        center: [8.922735, 44.413531],
        zoom: 14
        });

        // Add zoom and rotation controls to the map.
		var nav = new mapboxgl.NavigationControl();

		map.addControl(nav,"top-left");
    </script>
</body>
</html>
						

					

El código es igual que en nuestro mapa base, únicamente solo hay que añadir la siguiente parte dentro del script.

Mapbox GL JS es una biblioteca de JavaScript que utiliza WebGL para representar mapas interactivos de mosaicos vectoriales y estilos de Mapbox.

WebGL es un estándar que define una implementación en JavaScript para la renderización de gráficos en 3D dentro de cualquier navegador web.

La funcionalidad NavigationControlcontrol añade botones de zoom y una brújula.

						
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
						
					

El zoom varia de un mínimo de 0 a un máximo de 24.

El cabeceo o pitch de 0 a un máximo de 60.

En la documentacion de Mapbox existen varias configuraciones:

options.showCompass: Si es true se visualiza el botón de la brújula.

options.showZoom: Si es true se visualiza los botones de +-

options.visualizePitch: Si es true se visualiza girando el eje X de la brújula.

						
var nav = new mapboxgl.NavigationControl({
        showCompass: true,
        showZoom: true,
        visualizePitch: true
      });
						
					

Pero actualmente no esta funcionando, por lo que proponemos poderlo deshabilitar mediante estilos css

						
<style>
  .mapboxgl-ctrl-compass {
    display: none !important;
}
</style>
						
					

Recordar que hay que insertar esta parte de código en el head.

Finalmente podemos personalizar donde queremos situar los controles de navegación:

Por defecto o en la esquina superior derecha:

						
map.addControl(nav);
o
map.addControl(nav, "top-right");

						
					

En la esquina superior izquierda:

						
map.addControl(nav, "top-left");
						
					

En la esquina inferior izquierda:

						
map.addControl(nav, "botton-left");
						
					

En la esquina inferior derecha:

						
map.addControl(nav, "botton-right");
						
					

Modificando mínimamente este código podemos añadir las funcionalidades de control a nuestros mapas Mapbox de una forma muy sencilla.

¿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