Cómo crear un mapa web con Mapbox GL JS

por

En los últimos años, estamos viviendo una gran evolución y revolución de las aplicaciones y librerías, sobretodo JavaScript, destinadas a la creación de mapas web, tal y como ya comentamos en nuestro artículo Las 10 mejores librerías JavaScript para web mapping en 2018.

Una de las empresas punteras y que más está apostando por el web mapping es, sin duda alguna, Mapbox. Dentro de Mapbox encontramos diversas herramientas y servicios. Una de ellas es Mapbox Studio que es la aplicación para crear y diseñar estilos de mapa, pero también existe un ecosistema de librerías, APIs y SDKs para construir mapas web o aplicaciones tanto móviles como web.

Mapbox GL JS

Mapbox GL JS

Mapbox GL JS es una librería JavaScript, bajo licencia 3-Clause BSD license, que utiliza WebGL para renderizar mapas interactivos de teselas vectoriales, estilos de Mapbox y construir aplicaciones web. Esta librería lo que hace es tomar los estilos de mapa que se ajustan a la Especificación de Estilo Mapbox, los aplica a las teselas vectoriales que se ajustan a la Especificación de Teselas Vectoriales de Mapbox, y los renderiza usando WebGL.

Forma parte del ecosistema multiplataforma Mapbox GL, que también incluye SDKs nativos compatibles para aplicaciones en Android, iOS, macOS, Qt y React Native. Además, Mapbox proporciona una serie de plugins para ampliar las funcionalidades de los mapas web y diferentes APIs de servicios web como Mapbox Geocoding API o Mapbox Directions API.

Crear un mapa con Mapbox GL JS

Para poder crear un mapa web con Mapbox GL JS se debe estar familiarizado con HTML, CSS y JavaScript. La forma de crear los mapas es muy parecida a la que se usa en otras librerías, tan conocidas y utilizadas, como Leaflet u OpenLayers.

Para crear el mapa web se debe disponer de un token de acceso y una URL de estilo. Para ello, debemos crear una cuenta en Mapbox y accediendo a Mapbox Studio podremos obtener un token de acceso y desde la sección estilos obtener una URL de estilo de alguno de los estilos que hayamos creado  o si lo preferimos podemos utilizar alguno de los estilos que ofrece Mapbox.

El primer paso para la creación de cualquier mapa web JavaScript es elaborar el marco HTML básico. Esta es la estructura que tendrá nuestro HTML:

<!DOCTYPE html>
<html>
<head>
	<style>
	</style>
</head>
	<body>
		<div id = 'map'>
		</div>
	</body>
</html>

La cabecera

El siguiente paso es incluir en la cabecera <head> de nuestra página web los archivos JavaScript y CSS. Mapbox ofrece versiones alojadas de cada una de ellas para poder incluirlas directamente en nuestro 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>
	</style>
</head>

Estilo del mapa (CSS)

Dentro de la etiqueta <style> definimos el estilo que tendrá el contenedor de mapa en CSS.

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

El cuerpo

Dentro de la etiqueta <body> encontramos el marcado para el mapa, que genera un único elemento de documento. También damos al contenedor un atributo id para que podamos hacer referencia a él en nuestro código:

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

El script con el código Mapbox GL JS

En la etiqueta <script> añadiremos el código necesario para poder visualizar y agregar el mapa a nuestra página html. Para poder crear y trabajar el mapa utilizaremos la clase mapboxgl.Map.

<script> 
mapboxgl.accessToken = 'Aquí va el Access Token'; // Nuestro Token de acceso
var map = new mapboxgl.Map({
    container: 'map', // id del contenedor
    style: 'mapbox://styles/mapbox/streets-v9', // localización del mapa de estilo
    center: [2.168,41.381], // Posición inicial
    zoom: 13 // Zoom inicial
});
</script>

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

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

En este tutorial continuamos mejorando nuestro mapa web con más funcionalidades.

Let’s connect!

Date de alta en nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS

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

SUSCRÍBETE

1 comentario en «Cómo crear un mapa web con Mapbox GL JS»

Los comentarios están cerrados.