MapLibre es un proyecto de código abierto basado en la popular librería Mapbox GL JS, para crear mapas web. En este artículo veremos cómo empezar a trabajar con ella.
El objetivo de MapLibre es continuar construyendo una librería sobre la base del código abierto original de Mapbox, pero bajo la licencia BSD y sin rastrear a los usuarios finales. Mapbox GL fue esencialmente el primer renderizador de teselas vectoriales en el navegador y probablemente pueda considerarse el líder del mercado hoy en día.
Hay muchas personas activas y motivadas en la junta directiva de los proyectos, que trabajan para organizaciones como MapTiler, WhereGroup, Amazon, Facebook, Microsoft, Elastic, Stadia, Ceres Imaging, por nombrar algunas.
MapLibre consiste por el momento en dos SDKs para crear mapas abiertos:
- MapLibre GL JS.
- MapLibre native.
Índice
La librería JavaScript MapLibre GL JS
La librería MapLibre GL JS usa WebGL para publicar mapas web interactivos.
Esta librería JavaScript es bastante nueva, ya que data del año 2020. Año en el que Mapbox tomo la decisión de convertir su proyecto en comercial. En aquel momento ya te adelantábamos que se estaban realizando esfuerzos para bifurcarlo y reunir a miembros de la comunidad para mantenerlo indefinidamente.
Por lo tanto, MapLibre GL JS se ha convertido en una bifurcación de código abierto de Mapbox GL JS 1.13. La biblioteca pretende pues, ser un reemplazo directo para la versión de Mapbox, pero añadiendo una serie de nuevas características:
- La más relevante es que gracias a la representación de teselas vectoriales acelerada por GPU, obtenemos una rápida visualización de mapas.
- Estilos de mapas personalizados.
- Compatible con otras herramientas de MapLibre.
Cómo crear un mapa con MapLibre GL JS
Crear un mapa con MapLibre necesitamos crear un archivo de texto y modificarle la extensión a .html. Después lo abrimos con un editor de texto e incluímos los archivos JavaScript y CSS en el <head> del archivo:
<script src='https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js'></script> <link href='https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css' rel='stylesheet' />
A continuación, incluimos el siguiente código en el <body> de nuestro archivo HTML:
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
var map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
Todo junto quedaría así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-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>
var map = new maplibregl.Map({
container: 'map', // container id
style: 'https://demotiles.maplibre.org/style.json', // style URL
center: [0,0], // starting position [lng, lat]
zoom: 1 // starting zoom
});
</script>
</body>
</html>
Si hacemos doble clic sobre el archivo se abrirá el mapa en el navegador:
Este sería un mapa muy sencillo, para más ejemplos de mapas web puedes visitar la página de ejemplos, que contiene decenas de ellos.
MapLibre Native
Se trata de un SDK de código abierto para Android e iOS que nos permite mostrar mapas dentro de nuestras aplicaciones móviles, aplicaciones de escritorio o dispositivos integrados. Este conjunto de herramientas nos proporciona mapas rápidos que se muestran en aplicaciones de iOS y Android utilizando la misma aceleración basada en GPU que la versión de JavaScript.
MapLibre-Native es una bifurcación de código abierto de mapbox-native con funcionalidad adicional.
Plugins para MapLibre GL JS
La mayoría de los plugins de Mapbox deberían funcionar también con MapLibre, pero hay algunos propios:
- Plugin de enrutamiento: maplibre-gl-directions. Un complemento para mostrar direcciones de enrutamiento en un mapa MapLibre GL JS.
- Plugin de geocodificación: maplibre-gl-geocoder. Geocodificación para MapLibre GL JS.
- maplibre-gl-temporal-control: Control de tiempo para MapLibre GL JS. demo.
- maplibre-gl-basemaps: Plugin para cambiar entre mapas base ráster. Ver en GitHub
Documentación
La documentación está muy cuidada y es una copia casi exacta de Mapbox:
Documentación de Mapbox:
Únete a la comunidad y/o dona
Damos la bienvenida a todo tipo de contribuciones: escribir el código, diseñar el sitio web, crear documentación, probar, informar errores y todas las demás actividades que ayuden a desarrollar aún más este proyecto.
La discusión ocurre en el canal #maplibre Slack en osmus.slack.com. También podemos hacer una donación a través de github.com/sponsors/maplibre. De este modo nos aseguramos de que la librería se mantenga y se desarrolle aún más. Si tienes una empresa que utiliza activamente las librerías de MapLibre, considera hacer una donación.
Proyectos alrededor de MapLibre
* Accessibility: textures, patterns, and shapes for designing web maps that work for people with color vision impairments, applicable to both Mapbox GL and MapLibre GL
* A comparison of the representation quality of vector polygons with the example of Mapnik and the customer samples with Maplibre GL, Tangram and Openlayers
http://blog.imagico.de/testing
* A solution that reduces the weight of the RGB tiles used for dynamic shading on online maps by 60% with Mapbox GL JS and soon with MapLibre GL
* A demo and code guide on how to start your own open source tile server comparing react-map-gl, http://deck.gl, maplibre-gl, tileserver-gl, docker or a mbtiles with Maptiler
https://medium.com/@stephen.w.
* Mapcomponents by MapLibre is a set of React modules with unique functionalities for the development of declarative GIS applications
Licenciado en Geografía. Máster en Sistemas de Información Geográfica. Consultor GIS desde el año 2004. En MappingGIS desde el año 2012 para ayudarte a impulsar tu perfil GIS y diferenciarte de la competencia. Echa un vistazo a todos nuestros cursos de SIG online.