Elementos del Paisaje

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento HTML</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.1.0/dist/ol.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.map {
    width: 100%;
    height: 100%;
}

</style>
</head>
<body>
<div id="map" class="map"></div>
<script>  
      
//Url para Elementos del Paisaje tipo Área
const ogcApiUrl = "https://sigpac-hubcloud.es/ogcapi/collections/elementos_paisaje_area/items?f=json&bbox=-2.5,40.4,-2.2,40.6&limit=100";
      
  
const map = L.map('map').setView([40.4291, -2.41899], 15);
      
L.tileLayer('https://tms-ign-base.idee.es/1.0.0/IGNBaseTodo/{z}/{x}/{-y}.jpeg', {
}).addTo(map);
    
      
fetch(ogcApiUrl)
    .then(response => response.json())
    .then(data => {
        if (!data.features) {
            console.error("No se encontraron 'features'");
            return;
        }
      
        const geoJsonLayer = L.geoJSON(data, {
            style: {
                color: 'blue',
                weight: 2,
                fillColor: 'blue',
                fillOpacity: 0.3
            }
        }).addTo(map);
    })
    .catch(error => console.error("Error al cargar los datos", error));
      
</script>
</body>
</html>