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

por

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:

new ol.layer.Tile({
    source: new ol.source.XYZ({
         url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
              '?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here'
    })
})

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

new ol.layer.Tile({
   'title': 'Natural Earth',
   'type': 'base',
    source: new ol.source.XYZ({
        url: 'C://Temp/QTiles/HYP_50M_SR_W/{z}/{x}/{y}.png',
        attributions: [new ol.Attribution({html: 'Made with Natural Earth and QTiles'})]
    })
});

El código completo:

<!doctype html>
<html lang="en">
  <head>
     <script src="http://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script>
      <link rel="stylesheet" href="http://openlayers.org/en/v4.0.1/css/ol.css">
    <style>
      .map {
          width: 100%;
		  height: 500px;
      }
    </style>
  </head>
  <body>
    <h2>Teselas raster en OpenLayers</h2>
    <div id="map"></div>
    <script type="text/javascript">
	var tiles = new ol.layer.Tile({
		'title': 'Natural Earth',
		'type': 'base',
		source: new ol.source.XYZ({
			url: 'C://Temp/QTiles/HYP_50M_SR_W/{z}/{x}/{y}.png',
			attributions: [new ol.Attribution({html: 'Made with Natural Earth and QTiles'})]
		})
	});
	 
	var map = new ol.Map({
		target: 'map',
		renderer: 'canvas',
		layers: [tiles],
		view: new ol.View({
		     center: [0,0],
		     zoom: 3
	       })
	});
    </script>
  </body>
</html>

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:

L.tileLayer( <String> urlTemplate,
<TileLayer options> options? )

La urlTemplate es una cadena de texto con el formato:

http://{s}.mapdomain.org/{z}/{x}/{y}.png,

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:

var oms = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');

Ejemplo utilizando nuestras propias teselas:

var tiles = L.tileLayer('file:///C://Temp/QTiles/HYP_50M_SR_W/{z}/{x}/{y}.png', {
	maxZoom: 5,
	tms: false,
	attribution: 'Made with Natural Earth and QTiles'
});

Código completo:

<!DOCTYPE html> 
<html>
<meta charset="utf-8" />
<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<style>
#map {
	width: 100%;
	height: 600px; 
	box-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
				
	var tiles = L.tileLayer('file:///C://Temp/QTiles/HYP_50M_SR_W/{z}/{x}/{y}.png', {
		maxZoom: 5,
		tms: false,
		attribution: 'Made with Natural Earth and QTiles'
      });
	
	var map = L.map('map', {
		center: [41.66, -4.72],
		zoom: 4,
		layers: [tiles]
	});
	
	</script>
</body>
</html>

mapas base personalizados en Leaflet

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

SUSCRÍBETE