Desplegar un mapa básico multicapa


<!DOCTYPE html>

<html>

<head>

<title>Desplegar un mapa básico multicapa</title>

<!-- Se referencia la hoja de estilos de JavaScript -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />

<!-- Se referencia el archivo JavaScript de Leaflet -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

<!-- Se establecen los estilos de ancho y alto del contenedor del mapa -->
<style>
#map {
	width: 960px;
	height:500px;
}
</style>

</head>

<body>

	<!-- Se crea el elemento contenedor del mapa -->
	<div id="map"></div>

<script>

	var osmcarto = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
			attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
		}),
		osmhumanitarian = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
			attribution: 'Datos \u00a9 <a href="http://www.openstreetmap.org">' +
			'Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright">ODbL</a>) | Teselas \u00a9 <a href="https://github.com/hotosm/HDM-CartoCSS">Humanitarian HDM CartoCSS</a> (<a href="https://github.com/hotosm/HDM-CartoCSS/blob/master/LICENCE.txt" target="blanck">CC0 1.0</a>)'
		}),
		pnoa = L.tileLayer.wms("http://www.ign.es/wms-inspire/pnoa-ma?SERVICE=WMS&", {
			layers: "OI.OrthoimageCoverage",//Nombre de la capa (según proveedor del servicio)
			transparent: true,
			format: 'image/jpeg',//Formato de las imágenes (según proveedor del servicio)
			version: '1.3.0',//versión según el proveedor del servicio
			attribution: 'Ortofotos <a href="http://www.scne.es/productos.html#OrtoPNOA" target="blanck">PNOA</a> \u00a9 <a href="http://www.ign.es" target="blanck">Instituto Geográfico Nacional de España</a> (<a href="https://creativecommons.org/licenses/by/4.0/legalcode.es" target="blanck">CC BY 4.0</a>)'
		});

	// Se crea un objeto mapa, se le asigna al elemento contenedor 'map', se fijan su punto central y nivel de zum iniciales y la capa de teselas predeterminada
	var map = L.map('map', {
		center: [36.722, -4.420],
		zoom: 15,
		layers: [osmcarto]
	});

	// Se definen las capas base 
	var baseLayers = {
		"Callejero (OSM)": osmcarto,
		"Humanitario (OSM)": osmhumanitarian,
		"Ortofotos (IGN)": pnoa
	};

	// Se crea un control de capas tomando como opción las capas anteriormente definidas 
	L.control.layers(baseLayers).addTo(map);

</script>

</body>

</html>
Volver al tutorial