Tiles en Leaflet.js Diferentes Opciones para nuestros mapa base


El Objeto tileLayer en Leafletjs nos permite guardar y desplegar teselas raster en nuestro navegador. Estas teselas son datos geográficos predefinidos en forma cuadrada que los navegadores gestionan de forma individual, suponiendo esto una considerable economía de datos, que hace que la navegación sea mucho más fluida.

Es muy útil para trabajar con cantidades muy grandes de información geográfica porque permite manejarla por bloques, esto es muy recomendable al momento de manejar las capas base de nuestro mapa.

El esquema de carga de un tileLayer es el siguiente:

					
L.tileLayer('https://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});
					
				

El objeto tileLayer puede llevar asociadas varias propiedades opcionales para personalizar nuestro proyecto. Algunas de ellas son: minzoom, maxzoom, zoomOffset o crossOrigin, otras heredadas del objeto GridLayer como tileSize, opacity, zIndex, pane o bounds y otras heredadas del objeto Layer como attribution, ésta última es muy importante en la mayor parte de los repositorios que quieras mostrar.

Si quieres saber conocer más profundamente las propiedades del objeto tileLayer puedes consultar en la api de leafletjs.

De esta forma subir en forma de tesela un mapa raster de OpenstreetMap quedaría de esta forma.

					
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution:'©<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
					
				

Obviamente también puedes subir del mismo modo mapas base de Google Maps (aunque necesitarás una API Key). Otra opción muy recomendable es Usar MapBox el cual te permite personalizar tu mismo tu mapa base.

Además de OpenStreetMaps y GoogleMaps existen una gran cantidad de repositorios, algunos sin necesidad de tener que hacer uso de una key. Algunos de estos son:

Google Maps:

					
L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', {attribution: '<a href="https://www.google.es/maps/preview">Google Maps</a>'}).addTo(map);
					
				

CyclOSM:

					
L.tileLayer('https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
					
				

Stamen:

					
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',{attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, ' + '<a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | ' + 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a>', ext: 'jpg'}).addTo(map);
					
				
					
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, ' + '<a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | ' + 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a>', ext: 'jpg', }).addTo(map);
					
				

Mapnick:

					
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
					
				

TopoMap:

					
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { attribution: 'Map data: attribution.OpenStreetMap, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)' }).addTo(map);
					
				

ESRI:

					
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {attribution: 'Source: Esri, i-cubed, USDA, USGS, AEX,GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',ext:'jpg',}).addTo(map);
					
				
					
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri',ext:'jpg',}).addTo(map);
					
				

CARTO:

					
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',{attribution: '<a href="https://openstreetmap.org">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>',ext: 'jpg',}).addTo(map);
					
				
					
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',{attribution: '<a href="https://openstreetmap.org">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>',ext: 'jpg',}).addTo(map);
					
				

HIKEBIKE:

					
L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', {attribution:'<a href="https://openstreetmap.org">OpenStreetMap</a>',ext: 'jpg',}).addTo(map);
					
				


Sobre el Autor


Pedro Calás Blasco

Cartógrafo. Valenciano por el Mundo. He vivido en Mexico, Brasil y Argentina. Entusiasta de los mapas y las tecnologías Web Mapping. Fundador y coordinador de Mapearte. impulsamos y desarrollamos proyectos que contribuyan al desarrollo social a través de las tecnologías.


¿Eres desarrollador? Únete a la red