Casi todos los mapas que publicamos en la web tienen un mapa de base que nos sirve de marco de referencia espacial o de situación para el resto de capas.
Hay múltiples proveedores de mapas base (OpenStreetMap, Google Maps o Mapbox son algunos de ellos), sin embargo puede que necesitemos crear nuestro propio mapa base. Crear un mapa base puede resultar costoso en cuanto a consumo de memoria por el gran tamaño de las imágenes que forman los mapas, es posible gracias al teselado.
El teselado consiste en dividir una imagen raster en varias partes denominadas teselas (tiles). Se generan teselas diferentes para cada nivel de zoom, o lo que es lo mismo; a diferentes escalas, diferentes teselas. Lo que se pretende con este “truco” es que el usuario utilice solamente aquellos datos (teselas) que necesita en cada momento, prescindiendo de los demás, lo que se traduce en una utilización más eficiente de los recursos y por tanto más rapidez.
Creando nuestras propias teselas
En la actualidad hay varios formatos raster que nos permiten trabajar con teselas. Uno de los más utilizados es MBTiles, que almacena mapas de teselas en una base de datos SQLite.
El formato MBTiles es compacto y restrictivo (sólo admite datos de teselas en la proyección de Spherical Mercator). Es una especificación mínima que se centra en la forma en que se pueden recuperar los datos. Así, los archivos MBTiles pueden comprimir internamente y optimizar los datos para construir vistas que se adhieran a la especificación MBTiles.
El formato MBTiles
A diferencia de otros formatos como Spatialite o GeoJSON que almacenan los datos sin procesar, MBTiles guarda la presentación de esos datos, es decir almacena los datos ya procesados. En consecuencia necesitaremos de alguna herramienta que tome los datos y nos genere un archivo MBTiles.
Hay varias opciones para realizar este trabajo, algunas herramientas son MapTiler, TileMill o el algoritmo Generate XYZ Tiles (MBTiles) de QGIS 3.8 o superior:
En un artículo anterior del nuestro blog ya nos hemos ocupado de cómo trabajar con TileMill.
Incorporando el archivo MBTiles en Leaflet
Vamos a publicar en web el mapa en formato MBTiles que hemos creado.
Para ello utilizaremos una librería JavaScript como es Leaflet. Una de las principales ventajas del empleo de Leaflet es la gran cantidad de plugins que tiene, lo que nos permite crear nuestros mapas de forma rápida y sencilla. En esta ocasión el plugin que nos interesa es Leaflet.TileLayer.MBTiles.
Lo primero será proceder a la descarga del plugin:
La carpeta descargada contiene varios archivos con información y ejemplos. El que nos interesa es: Leaflet.TileLayer.MBTiles.js. Tendremos que añadir en nuestro código HTML además de este archivo la libreria sql.js de la siguiente forma:
<script src="https://unpkg.com/sql.js@0.3.2/js/sql.js"></script> <script src="./Leaflet.TileLayer.MBTiles.js"></script>
A continuación incluimos:
var mb = L.tileLayer.mbTiles('Terremotos.mbtiles', {
minZoom: 0,
maxZoom: 6
}).addTo(map);
El código completo es el siguiente:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>MBTiles y Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<style>
#map {
width: 700px;
height: 600px; }
</style>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/sql.js@0.3.2/js/sql.js"></script>
<script src="./Leaflet.TileLayer.MBTiles.js"></script>
<div id ="map"> </div>
<script>
var map = new L.Map('map').fitWorld();
var mb = L.tileLayer.mbTiles('Terremotos.mbtiles', {
minZoom: 0,
maxZoom: 6
}).addTo(map);
</script>
</body>
</html>
Este es el resultado de nuestro trabajo. Podemos ver las localizaciones de los terremotos según su magnitud.
También te recomendamos:
Creación de mapas base para visores webmapping con QGIS (parte I)
Utilización de mapas base personalizados en OpenLayers y Leaflet (parte II)
Tutor del curso online de Análisis GeoEspacial con Python y de los cursos online de webmapping. Echa un vistazo a todos nuestros cursos de SIG online.
Hola, soy Alba y soy seguidora de vuestro blog. Estoy intentando cargar archivos *.mbtiles en Leaflet siguiendo vuestro post pero no lo consigo. Puede ser problema del plugin de lefalet MBTileLayer..? He estado indagando y he visto que para poder cargar mbtiles en leaflet es necedario convertir los *.mbtiles a *.png con «mbutil», y se crea la famosa carpeta con las subcarpetas con los tiles. Debería provar con «mbutil»? O estoy en lo cierto si sigo intentando simplemente cargar el archivo con extensión *mbtiles que me ha generado TileMill? Muchas gracias.
Hola Alba:
Con el plugin leaflet.TileLayer.MBTiles puedes utilizar directamente el archivo generado con TileMill. Repasa la forma en que lo has exportado, teniendo en cuenta que según el nivel de zoom que selecciones así será el tamaño del archivo.
Saludos
Excelente Post!! Es ideal para servir desde nuestro propios tiles.
TileMill es una excelente herramienta.
Gracias!
Muchas gracias por tu amable comentario, Marisol.
Efectivamente, como puedes ver Tilemill es una herramienta muy fácil y eficaz para crear imágenes en formato MBTiles, que luego podremos utilizar en leaflet.
Saludos.