Utilización de mapas base personalizados (raster tiles) en OpenLayers y Leaflet (parte II)

Siguiendo el anterior post “Creación de mapas base para visores webmapping con QGIS (parte I)” en el que creamos nuestras propias teselas basadas en un raster utilizando el plugin QTiles de QGIS.

En esta entrada vamos a continuar el proceso y explicaremos cómo utilizar estas teselas para utilizarlas como mapa base personalizados en OpenLayers y Leaflet, las librerías web mapping de referencia.

Podemos utilizar las teselas raster en cualquier librería que soporte un esquema de teselas XYZ y superponer posteriormente otras capas vectoriales sobre ellas.

Para demostrar la usabilidad y portabilidad de estas teselas, añadiremos las teselas creadas en el anterior post como un mapa base personalizado tanto en OpenLayers como en Leaflet.

Añadiendo las teselas raster en OpenLayers

En este caso es necesario hacer uso de la clase ol.layer.Tile y como fuente de datos ol.source.XYZ.

ol.source.XYZ es la fuente de capa para datos teselados con URL en un formato XYZ  que se definen en una plantilla de URL.

De forma predeterminada, esto sigue una malla de Google ámpliamente utilizada donde x 0 e y 0 están en la parte superior izquierda.

Podemos subir las teselas a un servidor e incluir como dirección URL la del servidor. Ejemplo utilizando las teselas de Thunderforest:

Pero como tenemos guardadas las teselas en el equipo, la URL será el directorio local:

El código completo:

mapas base personalizados en OpenLayers

Añadiendo las teselas raster en Leaflet

En Leaflet casi siempre todo es más sencillo. En este caso concreto lo es porque para añadir las capas teselas prescindimos del uso de una clase para la fuente de datos, basta simplemente con el uso de la clase L.TileLayer.

Su sintaxis es:

La urlTemplate es una cadena de texto con el formato:

La {s} permitirá a uno de los subdominios del dominio principal que sea utilizado. Estos se utilizan normalmente en secuencia para cargar el mapa más rápido al permitir múltiples solicitudes paralelas.

La {z} declara el nivel de zoom y el {x} y {y} definen las coordenadas de las teselas.

Ejemplo utilizando las teselas de OpenStreetMap:

Ejemplo utilizando nuestras propias teselas:

Código completo:

mapas base personalizados en Leaflet

Let’s connect!

Date de alta en nuestra newsletter
y recibe este ebook gratuito

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