Cómo crear un mapa web con Mapbox GL JS

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:

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.

Estilo del mapa (CSS)

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

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:

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.

El código completo de nuestro mapa sería este:

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

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

Si quieres aprender más sobre Mapbox y Mapbox Studio inscríbete en nuestro curso online aplicaciones GIS en la nube.

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

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

1 comentario en “Cómo crear un mapa web con Mapbox GL JS”

Los comentarios están cerrados.