Primeros pasos con MapLibre: fork de código abierto de Mapbox GL JS

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.

primeros pasos con MapLibre

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.

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:

primeros pasos con MapLibre

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

https://texturemap.org/

* 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-client-side-map-renderers-on-polygons/

* 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

https://makina-corpus.com/sig-webmapping/optimisation-tuiles-mnt-rgb-ombrage-dynamique-mapbox-gl-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.protzman/map-quest-4f67386bfee9

* Mapcomponents by MapLibre is a set of React modules with unique functionalities for the development of declarative GIS applications

https://www.mapcomponents.org/

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

Deja un comentario