Leaflet-providersESP


Plugin para Leaflet con información de organismos españoles

GitHub release (latest SemVer) DOI CodeQL CodeFactor jsDelivr hits (GitHub) ko-fi

Leaflet-providersESP es un plugin para mapas Leaflet que proporciona un acceso fácil a diferentes servicios web de mapas (WMS) y servicios web de mapas teselados (WMTS) proporcionados por organismos públicos de España, como el Instituto Geográfico Nacional (IGN) o el servicio de Infraestructura de Datos Espaciales de España (IDEE) del Consejo Superior Geográfico.

Este plugin es compatible con el plugin leaflet-providers.

Instalación

Via CDN

<!-- Latest -->
<script src="https://cdn.jsdelivr.net/gh/dieghernan/leaflet-providersESP/dist/leaflet-providersESP.min.js"></script>

<!-- By version -->
<script src="https://cdn.jsdelivr.net/gh/dieghernan/leaflet-providersESP@v1.3.2/dist/leaflet-providersESP.min.js"></script>

Local

Get leaflet-providersESP.js:

<!-- Last version -->
<script src="./path/to/your/folder/leaflet-providersESP.js"></script>

Demos

Full page

<!DOCTYPE html>
<html>
<head>
	<title>Minimal page | leaflet-providersESP</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Load Leaflet -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
	<!-- Install leaflet-providersESP -->
	<script src="https://cdn.jsdelivr.net/gh/dieghernan/leaflet-providersESP/dist/leaflet-providersESP.min.js"></script>
	<!-- Display map full page -->
	<style>
	html {
		height: 100%
	}
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	#mapid {
		height: 100%;
		width: 100%
	}
	</style>
</head>
<body>
	<!-- Create map -->
	<div id="mapid"></div>
	<!-- Puerta del Sol - IDErioja server -->
	<script>
	var mymap = L.map('mapid').setView([40.4166, -3.7038400], 18);
	L.tileLayer.providerESP('IDErioja').addTo(mymap);
	</script>
</body>

Full screen

Varias capas

<div id="map"></div>
<script>
  var map2 = L.map('map', {center: [37.053333,-3.311389],zoom: 15});
			L.tileLayer.providerESP('LiDAR').addTo(map2);
			L.tileLayer.providerESP('MDT.CurvasNivel').addTo(map2);
			L.tileLayer.providerESP('NombresGeograficos').addTo(map2);
</script>

Full screen

leaflet-providersESP + leaflet-providers

<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.10.2/leaflet-providers.min.js"></script>
<script>
  var map3 = L.map('map',{center: [38.8,-5.3],zoom: 5});
  var base = {'CartoDB': L.tileLayer.provider('CartoDB.DarkMatterNoLabels').addTo(map3)};
  var over ={'Terremotos Ult. 30dias': L.tileLayer.providerESP('Geofisica.Terremotos30dias',{transparent: true}).addTo(map3)};
  L.control.layers(base, over, {collapsed: false}).addTo(map3);
</script>

Full screen

Proveedores disponibles

View all: Preview

Proveedor Capas

Nota: En aquellos proveedores con varias capas, la llamada a PROVEEDOR equivale a PROVEEDOR.PRIMERA_CAPA:

L.tileLayer.providerESP('IGNBase') === L.tileLayer.providerESP('IGNBase.Todo')

Colabora

Este proyecto es Open Source. Si deseas colaborar puedes abrir un issue o enviar un PR.