Maplibre GL JS, es una librería TypeScript de código abierto para publicar mapas en sitios web. Surgió en diciembre de 2020 como una bifurcación de código abierto de la librería Mapbox JS v1, tras el anuncio de la versión Mapbox GL JS v2 de licencia propietaria y no gratuita.
Esta bifurcación se convirtió en una continuación oficial de código abierto de la Mapbox GL JS v1 y es compatible con la Mapbox GL JS original.
Dentro de los proyectos de la organización MapLibre, además de la librería MapLibre GL JS, podemos encontrar MapLibre Native, SDK de código abierto para Android e iOS que permite mostrar mapas dentro de aplicaciones móviles, de escritorio o dispositivos integrados.
La librería MapLibre GL JS dispone de complementos como maplibre-gl-directions y maplibre-gl-geocoder que nos permiten mostrar respectivamente, direcciones de enrutamiento y geocodificación.
Además posee una API muy bien documentada, y multitud de ejemplos y plugins para incorporar.
Veamos un ejemplo sobre cómo crear un mapa básico y añadir multiples marcadores o puntos desde una fuente GeoJSON externa.
Crear estructura HTML y añadir MapLibre GL JS al proyecto
El primer paso será crear una estructura HTML básica con las secciones de head y body para posteriormente incluir MapLibre agregando los archivos JS y CSS al encabezado del documento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa Básico</title>
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
</body>
</html>Elemento div para establecer id del mapa
Para poder situar el mapa, creamos un identificador dentro del body mediante la etiqueta <div>.
<body>
<div id="map"></div>
</body>Incluir estilo al mapa (CSS)
Ahora ya podemos incluir las reglas CSS para el div que contiene el mapa. En nuestro caso está representado con el selector de id #map.
Establecemos que el mapa ocupe el ancho completo de la pantalla, no tenga ningún margin ni padding y con un posicionamiento absoluto.
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}Crear Mapa
Creamos la instancia de la librería MapLibre llamando a su constructor maplibregl.Map(). Este constructor acepta 4 parámetros:
- container: indicamos el identificador del mapa.
- style: url del estilo de mapa que queremos cargar.
- center: coordenadas lng, lat.
- zoom: nivel de zoom.
El selector container, debe tener el mismo valor que el ID que se indicó como identificador del mapa, en nuestro caso ‘map’.
container: 'map',Para obtener un enlace de un estilo (style), podemos utilizar alguno de los mapas on-line de la plataforma MapTiler Cloud o utilizar el que viene en el ejemplo de creación de mapa básico de la API de la propia librería:
style: 'https://demotiles.maplibre.org/style.json' //style URLEl parámetro center define el punto central del mapa utilizando las coordenadas de longitud y latitud.
center: [-3.675501, 40.258370],Por último el nivel de zoom está relacionado con la escala del mapa que define lo cerca que está la vista de la superficie de la tierra.
zoom: 4,El constructor completo quedaría así:
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [-3.675501, 40.258370],
zoom: 4,
});Agregar marcador
Una vez creado el mapa vamos a incluir un marcador. Creamos una variable que nombraremos «madrid» y utilizaremos el constructor de macadores Marker. A continuación estableceremos su longitud y latitud con el método setLongLat y por último lo añadiremos al mapa con .addTo();
const madrid = new maplibregl.Marker()
.setLngLat([-3.8196239, 40.4381311])
.addTo(map);Incluir fuente GeoJSON
GeoJSON es un formato estándar abierto diseñado para representar elementos geográficos sencillos junto con sus atributos no espaciales, basado en JavaScript Object Notation. Admite las siguientes geometrías:
- GeometryCollection
- LineString
- MultiLineString
- MultiPoint
- MultiPolygon
- Point
- Polygon
Agregaremos un GeoJSON con varios puntos de ejemplo inmediatamente después de que se haya producido la primera representación visual completa del mapa. Controlaremos este evento con map.on(‘load’)
map.on('load', function() {
});Primero debemos definir la fuente de nuestros datos usando la función map.addSource, que tendrá como parámetros:
- id: el ID de la fuente a agregar
- source: objeto fuente.
Como identificador usaremos xample_points y se usará como conexión con la fuente que definiremos al agregar la capa con nuestra fuente GeoJSON.
Y para el objeto source, definimos el tipo de de fuente: GeoJSON y el parámetro data, después del cual podemos pegar el propio GeoJSON o vincularlo a un fuente externa, que será nuestro caso.
map.addSource('xample_points', {
type: 'geojson',
data: 'https://raw.githubusercontent.com/geoinnova/Points/master/points.json'
});A continuación añadiremos una nueva capa de estilo con addLayer(). Como parámetros indicaremos:
- id: identificador de la capa
- type: tipo de geometría almacenada en la capa
- source: La fuente de datos para la capa.
- paint: propiedades de diseño
map.addLayer({
'id': 'xample_points',
'type': 'circle',
'source': 'xample_points',
/*
'paint': {
'circle-radius': 8,
'circle-color': '#B42222'
},
*/
});Opcionalmente podemos configurar las propiedades paint para personalizar cómo se representará la geometría.
Y eso es todo, con estas pocas líneas de código hemos cargado un mapa con un marcador y varios puntos obtenidos desde una fuente externa GeoJSON.
Puedes ver el código completo del proyecto y realizar pruebas en:
Si quieres aprender más sobre otras librerías de código abierto para webmapping, puedes consultar el Curso de Desarrollo de visores de mapas web o incluso si ya tienes conocimientos previos de los Sistemas de Información Geográfica y las Bases de Datos puedes consultar el Diploma en Programación y Tecnologías Geoespaciales de Código Abierto.
¿Quieres comentarnos algo? Adelante!