<div id="map" style="height: 1000px; width: 100%; position: relative;">
<div id="text-container" style="position: absolute; top: 20px; left: 20px; background: rgba(255, 255, 255, 0.9); padding: 15px; max-width: 400px; border-radius: 10px; border: 2px solid #01f3b3; z-index: 10;">
<h3 id="text-title" style="margin: 0; font-size: 18px; font-weight: bold;">Zonas inundables</h3>
<p id="text-description" style="margin: 10px 0; font-size: 16px; color: #333;">Ciudades con un alto nivel de parcelas inundables</p>
<button class="arrow-button" onclick="changeDescription()" style="display: block; margin: 10px auto; font-size: 16px; background-color: #01f3b3; border: none; color: white; padding: 8px 16px; border-radius: 5px; cursor: pointer;">Sigue leyendo ↓</button>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/mapbox-gl@2.10.0/dist/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/mapbox-gl@2.10.0/dist/mapbox-gl.js"></script>
#map {
height: 100vh;
width: 100%;
position: relative;
}
#text-container {
position: absolute;
top: 80px;
left: 20px;
padding: 15px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: calc(100% - 40px);
width: auto;
white-space: normal;
word-wrap: break-word;
max-height: 60vh;
overflow-y: auto;
z-index: 15;
}
.navigation-buttons {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
display: flex;
justify-content: space-between;
width: auto;
}
.navigation-buttons button {
padding: 12px;
margin: 5px;
background-color: #01f3b3;
color: white;
border: none;
cursor: pointer;
border-radius: 20px;
font-size: 14px;
transition: background-color 0.3s ease;
text-align: center;
flex: 1;
}
.navigation-buttons button:hover {
background-color: #00c5a3;
}
@media (max-width: 768px) {
#text-container {
position: relative;
top: 0;
left: 10px;
right: 10px;
padding: 10px;
font-size: 14px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-height: 40vh;
overflow-y: auto;
margin-top: 50px;
}
.navigation-buttons {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 90%;
z-index: 10;
}
.navigation-buttons button {
font-size: 14px;
padding: 10px;
border-radius: 15px;
margin: 0 5px;
flex: 1;
}
#map {
height: 50vh;
}
}
@media (min-width: 769px) {
.navigation-buttons {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
display: flex;
justify-content: space-between;
width: auto;
}
#text-container {
position: absolute;
top: 80px;
left: 20px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-size: 16px;
z-index: 15;
max-width: calc(100% - 40px);
width: auto;
white-space: normal;
word-wrap: break-word;
display: inline-block;
max-height: 60vh;
overflow-y: auto;
}
#map {
height: 100vh;
}
}
var config = {
style: 'mapbox://styles/newtral/cm3ylhc5i00f301qug0fuc14e',
accessToken: 'pk.eyJ1IjoibmV3dHJhbCIsImEiOiJjazJrcDY4Y2gxMmg3M2JvazU4OXV6NHZqIn0.VO5GkvBq_PSJHvX7T8H9jQ',
showMarkers: true,
markerColor: '#3FB1CE',
inset: true,
insetOptions: {
markerColor: 'orange'
},
insetPosition: 'bottom-right',
theme: 'dark',
use3dTerrain: false,
auto: false,
title: 'Zonas inundables',
subtitle: 'Cómo es vivir en municipios en el que el 90% del territorio está en una zona inundable',
byline: 'Newtral Data',
chapters: [
{ "id": "uno", "title": "", "descriptions": ["En España hay 186.456 edificios y parcelas en zonas con un alto riesgo de sufrir inundaciones en los próximos 10 años, según datos del Ministerio para la Transición Ecológica y el Reto Demográfico."], "location": { "center": [-2.312, 40.450], "zoom": 5, "pitch": 0, "bearing": 0 } },
{ "id": "dos", "title": "", "descriptions": ["Esto supone un 1,6% del total de parcelas registradas en el catastro."], "location": { "center": [-2.312, 40.450], "zoom": 5.5, "pitch": 0, "bearing": 0 } },
{ "id": "tres", "title": "", "descriptions": ["Las inundaciones constituyen el fenómeno natural con mayor impacto económico y social en España, según la Dirección General de Protección Civil.", "El Ministerio para la Transición Ecológica estima que causan daños económicos valorados en 800 millones de euros al año."], "location": { "center": [-2.312, 40.450], "zoom": 6, "pitch": 0, "bearing": 0 } },
{ "id": "cuatro", "title": "Ciudad de Murcia", "descriptions": ["La ciudad de Murcia concentra 7.035 de estas parcelas inundables, casi un 9% del total del municipio."], "location": { "center": [-1.112, 38.018], "zoom": 11.3, "pitch": 0, "bearing": 0 } },
{ "id": "cinco", "title": "Ciudad de Murcia", "descriptions": ["Recientemente, el ayuntamiento aprobó un régimen especial que le permite construir en zonas inundables, alegando que la ciudad no puede expandirse por otro sitio."], "location": { "center": [-1.129, 38.012], "zoom": 12.5, "pitch": 0, "bearing": 0 } },
{ "id": "seis", "title": "Murcia", "descriptions": ["Expertos advierten de los peligros que entraña construir en zonas inundables, que deben dejarse “libres para el cauce, con actividades que sean compatibles con la inundación y no entrañen riesgos, ni materiales ni personales”."], "location": { "center": [-1.042, 37.977], "zoom": 9.3, "pitch": 0, "bearing": 0 } },
{ "id": "siete", "title": "Palma de Mallorca", "descriptions": ["En Palma de Mallorca, 2.170 parcelas están construidas en zonas con riesgo de inundarse en los próximos 10 años. Se trata del 5,6% de las parcelas de la ciudad, el segundo porcentaje autonómico más alto tras Murcia."], "location": { "center": [2.674, 39.581], "zoom": 12, "pitch": 0, "bearing": 0 } },
{ "id": "ocho", "title": "Palma de Mallorca", "descriptions": ["Las parcelas se encuentran tanto en la costa como en el interior del municipio, alrededor de los torrentes de Gros y de Coanegra."], "location": { "center": [2.671, 39.570], "zoom": 14.02, "pitch": 0, "bearing": 0 } },
{ "id": "nueve", "title": "Cartagena", "descriptions": ["La tercera ciudad con mayor porcentaje de parcelas en zonas inundables es Cartagena, con 1.442, que representan el 3% de la localidad."], "location": { "center": [-0.987, 37.617], "zoom": 13, "pitch": 0, "bearing": 0 } },
{ "id": "diez", "title": "Cartagena", "descriptions": ["Estas parcelas se encuentran en la ribera del río Segura, el mismo que pasa por la ciudad de Murcia. En concreto, se trata del Barrio de la Concepción, al oeste del Segura."], "location": { "center": [-0.999, 37.612], "zoom": 14.14, "pitch": 0, "bearing": 0 } },
{ "id": "once", "title": "Río Segura", "descriptions": ["La Confederación Hidrográfica del Segura ha documentado al menos 242 crecidas en el cauce del Segura desde el siglo XIII hasta el año 2020. Según este organismo, 571 kilómetros de su cauce se consideran zonas inundables. Esto supone el 3% del total que ocupa la demarcación hidrográfica del Segura."], "location": { "center": [-1.073, 37.901], "zoom": 10.3, "pitch": 0, "bearing": 0 } },
{ "id": "doce", "title": "Marbella", "descriptions": ["Marbella, en la provincia de Málaga, tiene 495 parcelas en zonas con riesgo de inundación, lo que supone un 2,3% del total del municipio. Se encuentran principalmente en las riberas de arroyos o ríos como el Guadaiza o el Verde."], "location": { "center": [-4.959, 36.485], "zoom": 12, "pitch": 0, "bearing": 0 } },
{ "id": "trece", "title": "San Pedro de Alcántara, Marbella", "descriptions": ["El pasado noviembre, el Ayuntamiento de Marbella puso en marcha un plan para reducir el riesgo de inundación en el río Guadaiza, renaturalizando su cauce fluvial en el distrito de San Pedro de Alcántara."], "location": { "center": [-5.008, 36.483], "zoom": 13.5, "pitch": 20, "bearing": 40 } },
{ "id": "catorce", "title": "Ourense", "descriptions": ["En Ourense, Galicia, hay 538 parcelas construidas sobre zonas inundables. Representan un 1,8% de las parcelas del municipio, el porcentaje más alto del norte de España."], "location": { "center": [-7.855, 42.337], "zoom": 13.3, "pitch": 0, "bearing": 0 } },
{ "id": "quince", "title": "Ourense", "descriptions": ["Aunque algunas se concentran en las orillas del río Miño, la mayoría están alrededor de otros afluentes más pequeños como el río Barbadás, el Barbaña o el Lonia."], "location": { "center": [-7.860, 42.338], "zoom": 13.9, "pitch": 20, "bearing": -40 } },
{ "id": "dieciseis", "title": "Ourense", "descriptions": ["En junio de 2023, la Xunta de Galicia y el Ayuntamiento de Ourense realizaron un simulacro de inundación en las presas del Miño, activando las señales acústicas de aviso a la población."], "location": { "center": [-7.845, 42.359], "zoom": 14.2, "pitch": 25, "bearing": 20 } },
{ "id": "diecisiete", "title": "Badajoz", "descriptions": ["Badajoz tiene el 1,7% de sus parcelas construidas en zonas con riesgo de inundación: casi 400. Se reparten entre las riberas del Guadiana y las del Calamón y el Rivilla, dos de sus afluentes."], "location": { "center": [-6.971, 38.881], "zoom": 14.5, "pitch": 0, "bearing": 0 } },
{ "id": "diecisiete", "title": "Badajoz", "descriptions": ["Precisamente entre esos dos afluentes se encuentra el barrio de Cerro de Reyes, que en 1997 sufrió una riada en la que 24 personas fallecieron y más de mil familias perdieron su casa."], "location": { "center": [-6.958, 38.868], "zoom": 14.1, "pitch": 30, "bearing": 50 } }
]
};
mapboxgl.accessToken = config.accessToken;
var map = new mapboxgl.Map({
container: 'map',
style: config.style,
center: config.chapters[0].location.center,
zoom: config.chapters[0].location.zoom
});
var chapterIndex = 0;
var descriptionIndex = 0;
function flyToChapter(chapter) {
map.flyTo({
center: chapter.location.center,
zoom: chapter.location.zoom,
pitch: chapter.location.pitch,
bearing: chapter.location.bearing,
speed: 0.5,
curve: 1,
essential: true
});
updateTextContainer(chapter);
}
function updateTextContainer(chapter) {
document.getElementById('text-title').innerText = chapter.title || '';
document.getElementById('text-description').innerText = chapter.descriptions[descriptionIndex] || '';
var arrowButton = document.querySelector('.arrow-button');
if (chapter.descriptions.length > 1 && descriptionIndex < chapter.descriptions.length - 1) {
arrowButton.style.display = 'block';
} else {
arrowButton.style.display = 'none';
}
}
function changeDescription() {
descriptionIndex++;
updateTextContainer(config.chapters[chapterIndex]);
}
function addNavigationButtons() {
var container = document.createElement('div');
container.className = 'navigation-buttons';
var prevButton = document.createElement('button');
prevButton.innerText = 'Anterior';
prevButton.onclick = function() {
chapterIndex = (chapterIndex === 0) ? config.chapters.length - 1 : chapterIndex - 1;
descriptionIndex = 0;
flyToChapter(config.chapters[chapterIndex]);
};
var nextButton = document.createElement('button');
nextButton.innerText = 'Siguiente';
nextButton.onclick = function() {
chapterIndex = (chapterIndex + 1) % config.chapters.length;
descriptionIndex = 0;
flyToChapter(config.chapters[chapterIndex]);
};
container.appendChild(prevButton);
container.appendChild(nextButton);
document.getElementById('map').appendChild(container);
}
addNavigationButtons();
flyToChapter(config.chapters[chapterIndex]);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.