Mapbox Basemap


En este tutorial veremos como crear un mapa básico con Mapbox GL JS.


El código completo para visualizar el mapa a pantalla competa en formato HTML lo tenéis a continuación, para los que no estén familiarizados con el lenguaje HTML, solo tenéis que copiar y pegar en un editor de texto, (os recomiendo utilizar Sublime Text pero son perfectamente validos otros como el bloc de notas o Notepad++) y guardarlo con la extensión .html

Finalmente, una vez guardado podéis abrirlo con cualquier navegador.

						
<!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%; }
    </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
        });
    </script>
</body>
</html>
						

					

Si queréis saber un poco más sobre el código de Mapbox:

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 primera parte del código se inserta en la cabecera o head, en ella aparecen dos enlaces una es los estilos o CSS y otra es el JavaScript necesario para que el mapa sea interactivo.

						
<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' />
						
					

Notaréis que estamos utilizando la versión de Mapbox 1.5.0

La segunda parte del código que también se incluye en el head, hace referencia a los estilos de este mapa en particular, en nuestro caso le estamos obligando a que el mapa ocupe el 100% de la ventana, sin márgenes ni bordes.

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

Si no queremos verlo a pantalla completa, podemos insertar el siguiente codigo:

						
<style>
  #map { height: 600px }
</style>
						
					

Donde height es la altura en píxeles.

La tercera parte del código y una vez dentro del cuerpo o body, corresponde al contenedor, veréis que esta directamente relacionado con los estilos (#map), ya que tiene un identificador id=map.

						
<div id='map'></div>
						
					

Si nos fijamos ahora en la parte del Script veremos varias partes imprescindibles, la primera es el Token de acceso o identificador de usuario, es único para cada usuario de Mapbox.

Posteriormente hay que añadir el estilo del mapa, existen estilos por defecto, pero os animo a crear vuestros propios estilos personalizados

Tiene la forma siguiente:

						
mapbox://styles/jgabas/cjqlaizgzpbc82sqmpx1gjzl2
						
					

La parte numérica corresponde a las coordenadas geográficas en grados decimales, Longitud y Latitud

Finalmente definimos la escala de visualización.

						
<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
    });
</script>
						
					

Modificando mínimamente este código podemos hacer mapas muy atractivos con Mapbox, rápidos y visualizar nuestros propios estilos.

¿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