Cargando visualización interactiva...
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: #f8fafc; margin: 0; overflow: hidden; } input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: #ef4444; cursor: pointer; margin-top: -10px; box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); transition: transform 0.1s; } input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #334155; border-radius: 3px; } .glass-panel-mineria { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #475569; } #mineria-map { width: 100%; height: 100%; z-index: 10; background: #1e293b; } </style> </head> <body data-rsssl=1 class="h-screen w-screen flex flex-col md:flex-row text-left font-['Inter'] m-0 p-0 text-slate-50"> <!-- Panel Lateral Informativo --> <aside class="w-full md:w-[35%] lg:w-[30%] h-[50%] md:h-full p-5 flex flex-col gap-4 overflow-y-auto glass-panel-mineria z-20 order-2 md:order-1 border-t md:border-t-0 md:border-r border-slate-700 relative"> <div class="flex-shrink-0"> <h1 class="text-2xl md:text-3xl font-bold text-red-500 mb-1 leading-tight">Minería Ilegal en Loreto</h1> <h2 class="text-sm md:text-md text-slate-300 font-light mb-3">La crisis en la cuenca del Río Nanay e Iquitos</h2> <div class="w-12 h-1 bg-red-500 rounded mb-2"></div> </div> <div class="text-xs md:text-sm text-slate-300 space-y-4 flex-grow"> <div class="bg-slate-800 p-3 md:p-4 rounded-lg border border-slate-700 flex flex-col gap-3"> <h3 class="text-white font-semibold flex items-center text-sm"> <svg class="w-4 h-4 mr-2 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> Impacto Ambiental Estimado </h3> <div class="grid grid-cols-2 gap-2 md:gap-3"> <div class="bg-slate-900/80 p-2 md:p-3 rounded border border-slate-700/50"> <span class="block text-[9px] md:text-[10px] text-slate-400 uppercase tracking-wider mb-1 leading-tight">Mercurio Vertido</span> <div class="flex items-baseline gap-1"> <span id="mercuryDisplay" class="text-lg md:text-xl font-bold text-yellow-400 font-mono">0</span> <span class="text-[10px] md:text-xs text-slate-500">kg</span> </div> </div> <div class="bg-slate-900/80 p-2 md:p-3 rounded border border-slate-700/50"> <span class="block text-[9px] md:text-[10px] text-slate-400 uppercase tracking-wider mb-1 leading-tight">Área Deforestada</span> <div class="flex items-baseline gap-1"> <span id="deforestationDisplay" class="text-lg md:text-xl font-bold text-orange-400 font-mono">0</span> <span class="text-[10px] md:text-xs text-slate-500">ha</span> </div> </div> </div> <div class="bg-slate-900/80 p-2 md:p-3 rounded border border-slate-700/50"> <span class="block text-[9px] md:text-[10px] text-slate-400 uppercase tracking-wider mb-1">Mercado Negro (Oro)</span> <div class="flex items-baseline gap-1"> <span class="text-lg md:text-xl font-bold text-green-400 font-mono">$</span> <span id="goldDisplay" class="text-lg md:text-xl font-bold text-green-400 font-mono">0</span> <span class="text-[10px] md:text-xs text-slate-500">Millones USD</span> </div> </div> <div class="mt-1"> <span class="block text-[9px] md:text-[10px] text-slate-400 uppercase tracking-wider mb-1">Crecimiento de Dragas</span> <div id="trendChart" class="flex items-end justify-between h-8 md:h-12 gap-[2px]"></div> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> <div class="bg-slate-800 p-3 rounded-lg border border-slate-700"> <h4 class="text-[9px] md:text-[10px] text-slate-400 uppercase tracking-wider mb-2">Filtros</h4> <div class="flex flex-col gap-1.5 text-[10px] md:text-xs"> <label class="flex items-center gap-2 cursor-pointer group"> <input type="checkbox" id="filter-draga" checked class="form-checkbox w-3 h-3 bg-slate-700 border-slate-500 rounded text-red-500 cursor-pointer"> <span class="text-slate-300 group-hover:text-white transition">Dragas</span> </label> <label class="flex items-center gap-2 cursor-pointer group"> <input type="checkbox" id="filter-camp" checked class="form-checkbox w-3 h-3 bg-slate-700 border-slate-500 rounded text-cyan-500 cursor-pointer"> <span class="text-slate-300 group-hover:text-white transition">Campamentos</span> </label> <label class="flex items-center gap-2 cursor-pointer group"> <input type="checkbox" id="filter-mercury" checked class="form-checkbox w-3 h-3 bg-slate-700 border-slate-500 rounded text-yellow-500 cursor-pointer"> <span class="text-slate-300 group-hover:text-white transition">Halo Tóxico</span> </label> </div> </div> <div class="bg-slate-800 p-3 rounded-lg border border-slate-700"> <h4 class="text-[9px] md:text-[10px] text-slate-400 uppercase tracking-wider mb-2">Volar a</h4> <div class="flex flex-col gap-1.5"> <button id="btn-altonanay" type="button" class="px-2 py-1 bg-slate-700/50 hover:bg-slate-600 rounded text-[10px] md:text-xs text-slate-200 border border-slate-600 transition text-left flex justify-between items-center"> Alto Nanay <span>🔍</span> </button> <button id="btn-pintuyacu" type="button" class="px-2 py-1 bg-slate-700/50 hover:bg-slate-600 rounded text-[10px] md:text-xs text-slate-200 border border-slate-600 transition text-left flex justify-between items-center"> Río Pintuyacu <span>🔍</span> </button> </div> </div> </div> <p class="text-[9px] text-slate-400/80 italic leading-tight"> * Datos basados en reportes de MAAP, SPDA y CINCIA (2010 - 2026). Simulación de puntos de calor sobre actividad fluvial. </p> </div> </aside> <!-- Contenedor Principal del Mapa --> <main class="w-full md:w-[65%] lg:w-[70%] h-[50%] md:h-full relative flex flex-col p-2 md:p-4 order-1 md:order-2 bg-slate-900"> <div class="flex-grow relative rounded-xl overflow-hidden shadow-inner border border-slate-700"> <div id="criticalAlert" class="hidden absolute top-2 md:top-4 left-1/2 transform -translate-x-1/2 z-[500] bg-red-600/95 backdrop-blur border border-red-400 text-white px-3 md:px-4 py-1.5 md:py-2 rounded-full shadow-[0_0_15px_rgba(220,38,38,0.6)] flex items-center gap-1.5 text-[10px] md:text-sm font-bold uppercase tracking-wider whitespace-nowrap"> <span class="animate-pulse">⚠️ Zona de amortiguamiento vulnerada</span> </div> <div id="mineria-map"></div> <button id="resetMapBtn" type="button" class="absolute top-3 left-12 md:left-14 z-[400] bg-slate-800/90 hover:bg-slate-700 backdrop-blur-md border border-slate-600 px-2 py-1 md:px-3 md:py-1.5 rounded shadow-lg text-[10px] md:text-xs font-semibold text-white transition-colors"> 🎯 Centrar </button> <!-- Leyenda flotante --> <div class="absolute bottom-6 md:bottom-4 right-2 md:right-4 z-[400] glass-panel-mineria px-3 py-2 md:px-4 md:py-3 rounded-lg shadow-lg pointer-events-none scale-90 md:scale-100 origin-bottom-right"> <h4 class="text-xs md:text-sm font-bold text-white mb-2">Leyenda</h4> <div class="flex flex-col gap-2"> <div class="flex items-center gap-2"> <div class="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-[#ff3333] border border-white shadow-[0_0_8px_rgba(255,51,51,0.8)]"></div> <span class="text-[10px] md:text-xs text-slate-200">Draga activa</span> </div> <div class="flex items-center gap-2"> <div class="w-2 h-2 md:w-2.5 md:h-2.5 rounded-full bg-[#00ffff] border border-white shadow-[0_0_8px_rgba(0,255,255,0.8)]"></div> <span class="text-[10px] md:text-xs text-slate-200">Campamento</span> </div> <div class="flex items-center gap-2"> <div class="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-[#eab308] opacity-40 border border-[#eab308]"></div> <span class="text-[9px] md:text-[10px] text-yellow-500 uppercase font-bold tracking-wider">Impacto Hg</span> </div> <div class="flex items-center gap-2"> <div class="w-2.5 h-2.5 md:w-3 md:h-3 rounded-sm bg-purple-500 border border-white"></div> <span class="text-[9px] md:text-[10px] text-purple-400 uppercase font-bold tracking-wider">Comunidad</span> </div> </div> </div> </div> <!-- Controles de la Línea de Tiempo --> <div class="mt-2 md:mt-4 glass-panel-mineria p-3 md:p-5 rounded-xl shadow-xl z-20 flex flex-col gap-2 md:gap-4 flex-shrink-0"> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <button id="playBtn" type="button" class="bg-red-600 hover:bg-red-500 text-white p-2 md:p-3 rounded-full transition-colors shadow-lg shadow-red-500/30 flex items-center justify-center focus:outline-none w-10 h-10 md:w-12 md:h-12" aria-label="Reproducir"> <svg id="icon-play" class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg> <svg id="icon-pause" class="w-5 h-5 md:w-6 md:h-6 hidden" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg> </button> <div> <span class="text-slate-400 text-[10px] md:text-sm font-semibold uppercase tracking-wider block leading-none md:leading-normal">Año Visualizado</span> <span id="yearDisplay" class="text-2xl md:text-3xl font-bold text-white font-mono leading-none md:leading-normal">2010</span> </div> </div> <div class="text-right"> <span class="text-slate-400 text-[10px] md:text-sm font-semibold uppercase tracking-wider block leading-none md:leading-normal">Dragas Est.</span> <span id="dredgeDisplay" class="text-xl md:text-2xl font-bold text-red-400 font-mono leading-none md:leading-normal">15</span> </div> </div> <div class="relative pt-1 md:pt-2 w-full"> <input type="range" id="yearSlider" min="2010" max="2026" value="2010" step="1"> <div class="flex justify-between text-[10px] md:text-xs text-slate-500 mt-1 md:mt-2 font-mono px-1"> <span>2010</span> <span class="hidden md:inline">2014</span> <span>2018</span> <span class="hidden md:inline">2022</span> <span>2026</span> </div> </div> </div> </main> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script> <script> document.addEventListener("DOMContentLoaded", function() { const map = L.map('mineria-map', { center: [-3.55, -73.8], zoom: window.innerWidth < 768 ? 8 : 9, minZoom: 7, maxZoom: 13, zoomControl: window.innerWidth >= 768 }); setTimeout(() => { map.invalidateSize(); }, 500); window.addEventListener('resize', () => { map.invalidateSize(); }); L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri', maxZoom: 17 }).addTo(map); L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}{r}.png', { attribution: '© CARTO', subdomains: 'abcd', maxZoom: 20 }).addTo(map); L.circleMarker([-3.7491, -73.2538], { radius: window.innerWidth < 768 ? 6 : 8, fillColor: "#3b82f6", color: "#fff", weight: 2, opacity: 1, fillOpacity: 0.8 }).addTo(map).bindTooltip("<b>Ciudad de Iquitos</b>", {permanent: true, direction: "right", className: "bg-slate-800 text-white border-0 opacity-90 text-[10px] md:text-xs"}); document.getElementById('resetMapBtn').addEventListener('click', () => { map.setView([-3.55, -73.8], window.innerWidth < 768 ? 8 : 9, { animate: true, duration: 1 }); }); document.getElementById('btn-altonanay').addEventListener('click', () => { map.flyTo([-3.35, -74.45], 11, { animate: true, duration: 1.5 }); }); document.getElementById('btn-pintuyacu').addEventListener('click', () => { map.flyTo([-3.45, -73.95], 11, { animate: true, duration: 1.5 }); }); let pointsLayer = L.layerGroup().addTo(map); let communitiesLayer = L.layerGroup().addTo(map); const communities = [ { name: "Sta. María Nanay", coords: [-3.440, -73.990], threatYear: 2020 }, { name: "Diamante Azul", coords: [-3.380, -74.150], threatYear: 2022 }, { name: "Alvarenga", coords: [-3.310, -74.350], threatYear: 2023 }, { name: "Mishana", coords: [-3.700, -73.650], threatYear: 2018 } ]; const baseDredges = { 2010: 15, 2011: 18, 2012: 22, 2013: 25, 2014: 30, 2015: 35, 2016: 45, 2017: 55, 2018: 70, 2019: 95, 2020: 130, 2021: 165, 2022: 210, 2023: 280, 2024: 350, 2025: 420, 2026: 480 }; const trendChart = document.getElementById('trendChart'); const maxDredges = 480; Object.keys(baseDredges).forEach(y => { const val = baseDredges[y]; const heightPct = (val / maxDredges) * 100; const bar = document.createElement('div'); bar.className = 'w-full bg-slate-700 rounded-t transition-colors duration-300'; bar.style.height = `${heightPct}%`; bar.id = `bar-${y}`; trendChart.appendChild(bar); }); function generateDataForYear(year) { const data = []; const numPoints = baseDredges[year] || 15; let seed = year * 1000; function random() { let x = Math.sin(seed++) * 10000; return x - Math.floor(x); } for (let i = 0; i < numPoints; i++) { let lat, lng; let intensity = 0.5 + (random() * 0.5); const r = random(); if (r < 0.7) { const t = random(); lat = -3.2 - (0.5 * t) + (Math.sin(t * 10) * 0.05) + (random() - 0.5) * 0.04; lng = -74.6 + (1.3 * t) + (Math.cos(t * 12) * 0.05) + (random() - 0.5) * 0.04; } else if (r < 0.9 && year > 2018) { lat = -3.5 + (random() * 0.2); lng = -74.0 + (random() * 0.3); } else if (year > 2022) { lat = -3.2 + (random() * 0.3); lng = -73.0 - (random() * 0.2); intensity = 0.4 + (random() * 0.4); } else { lat = -3.5 + ((random() - 0.5) * 1.5); lng = -73.8 + ((random() - 0.5) * 1.5); intensity = 0.3; } data.push([lat, lng, intensity]); } return { points: data, count: numPoints }; } const slider = document.getElementById('yearSlider'), yearDisplay = document.getElementById('yearDisplay'), dredgeDisplay = document.getElementById('dredgeDisplay'), mercuryDisplay = document.getElementById('mercuryDisplay'), deforestationDisplay = document.getElementById('deforestationDisplay'), goldDisplay = document.getElementById('goldDisplay'), criticalAlert = document.getElementById('criticalAlert'); const filterDraga = document.getElementById('filter-draga'), filterCamp = document.getElementById('filter-camp'), filterMercury = document.getElementById('filter-mercury'); [filterDraga, filterCamp, filterMercury].forEach(el => { el.addEventListener('change', () => updateMap(parseInt(slider.value))); }); function updateMap(year) { yearDisplay.textContent = year; if (year >= 2023) { criticalAlert.classList.remove('hidden'); criticalAlert.classList.add('animate-bounce'); setTimeout(() => criticalAlert.classList.remove('animate-bounce'), 2000); } else { criticalAlert.classList.add('hidden'); } const dataObj = generateDataForYear(year); animateValue(dredgeDisplay, parseInt(dredgeDisplay.textContent), dataObj.count, 300); let mercuryAccumulated = 0, deforestedAccumulated = 0, goldAccumulated = 0; for(let y = 2010; y <= year; y++) { mercuryAccumulated += (baseDredges[y] * 2.5); deforestedAccumulated += (baseDredges[y] * 0.8); goldAccumulated += (baseDredges[y] * 1.2); } animateValue(mercuryDisplay, parseInt(mercuryDisplay.textContent), Math.floor(mercuryAccumulated), 300); animateValue(deforestationDisplay, parseInt(deforestationDisplay.textContent), Math.floor(deforestedAccumulated), 300); animateValue(goldDisplay, parseInt(goldDisplay.textContent), Math.floor(goldAccumulated), 300); communitiesLayer.clearLayers(); communities.forEach(c => { let isThreatened = year >= c.threatYear; let color = isThreatened ? '#dc2626' : '#a855f7'; let marker = L.circleMarker(c.coords, { radius: window.innerWidth < 768 ? 4 : 5, fillColor: color, color: '#ffffff', weight: 2, fillOpacity: 1 }).bindTooltip(`<b>${c.name}</b>`, { className: 'bg-slate-800 text-white text-[10px] border-0' }); if (isThreatened) { L.circle(c.coords, {radius: 2500, color: '#dc2626', weight: 2, fillOpacity: 0.1, dashArray: '5, 5'}).addTo(communitiesLayer); } marker.addTo(communitiesLayer); }); Object.keys(baseDredges).forEach(y => { const bar = document.getElementById(`bar-${y}`); if (!bar) return; if (parseInt(y) <= year) { bar.classList.remove('bg-slate-700'); if (parseInt(y) === year) { bar.classList.add('bg-red-400'); bar.classList.remove('bg-red-600'); } else { bar.classList.add('bg-red-600'); bar.classList.remove('bg-red-400'); } } else { bar.classList.remove('bg-red-600', 'bg-red-400'); bar.classList.add('bg-slate-700'); } }); pointsLayer.clearLayers(); const isMobile = window.innerWidth < 768; dataObj.points.forEach(p => { const lat = p[0], lng = p[1], intensity = p[2]; let isDraga = intensity > 0.7; if (isDraga && !filterDraga.checked) return; if (!isDraga && !filterCamp.checked) return; let color = '#00ffff', radius = isMobile ? 2.5 : 4, desc = "Campamento", fillOpacity = 0.7; if (isDraga) { color = '#ff3333'; radius = isMobile ? 3.5 : 6; desc = "Draga activa"; fillOpacity = 0.95; if (filterMercury.checked) { L.circle([lat, lng], { radius: 1500, color: '#eab308', weight: 0, fillColor: '#eab308', fillOpacity: 0.15, interactive: false }).addTo(pointsLayer); } } L.circleMarker([lat, lng], { radius: radius, fillColor: color, color: '#ffffff', weight: 1, opacity: 1, fillOpacity: fillOpacity }).bindTooltip(`<b>${desc}</b>`, { className: 'bg-slate-800 text-slate-100 border-slate-600 text-[10px]' }).addTo(pointsLayer); }); } function animateValue(obj, start, end, duration) { let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); obj.innerHTML = Math.floor(progress * (end - start) + start); if (progress < 1) window.requestAnimationFrame(step); }; window.requestAnimationFrame(step); } slider.addEventListener('input', (e) => { updateMap(parseInt(e.target.value)); if (isPlaying) togglePlay(); }); const playBtn = document.getElementById('playBtn'), iconPlay = document.getElementById('icon-play'), iconPause = document.getElementById('icon-pause'); let isPlaying = false, playInterval; function togglePlay() { isPlaying = !isPlaying; if (isPlaying) { iconPlay.classList.add('hidden'); iconPause.classList.remove('hidden'); playBtn.classList.remove('bg-red-600'); playBtn.classList.add('bg-slate-700', 'animate-pulse'); if (parseInt(slider.value) === parseInt(slider.max)) { slider.value = slider.min; updateMap(parseInt(slider.value)); } playInterval = setInterval(() => { let nextYear = parseInt(slider.value) + 1; if (nextYear > parseInt(slider.max)) { togglePlay(); } else { slider.value = nextYear; updateMap(nextYear); } }, 800); } else { iconPlay.classList.remove('hidden'); iconPause.classList.add('hidden'); playBtn.classList.remove('bg-slate-700', 'animate-pulse'); playBtn.classList.add('bg-red-600'); clearInterval(playInterval); } } playBtn.addEventListener('click', togglePlay); updateMap(2010); // Avisar al contenedor padre (WordPress) que todo está listo setTimeout(() => { window.parent.postMessage('mineria-widget-ready', '*'); if(!isPlaying) togglePlay(); }, 1200); }); </script> </body> </html>
top
Tecnología fácil
para un mundo complejo.
Nosotros
Por qué Nosotros
Contacto
Nosotros
Por qué Nosotros
Contacto
Nuestros Socios
AWS
Google Cloud
Microsoft
Salesforce
Servicios
Software Personalizado
Soluciones ERP
Servicios Externos EZCody
Aplicaciones Móviles
Servicios en la Nube
Consultorías y Asesorías
Staffing
arepa munchys
manuel zapata
Software Personalizado
Soluciones ERP
Servicios Externos EZCody
Aplicaciones Móviles
Servicios en la Nube
Consultorías y Asesorías
Staffing
arepa munchys
manuel zapata
Desafíos Empresariales
Transformación Digital
Seguridad
Automatización
Eficiencia
Enfoque de la industria
Industria Manufacturera
Transporte y Logística
Medicina
Banca y Finanzas
Educación
Construcción y Bienes Raíces
Fintech
Industria Manufacturera
Transporte y Logística
Medicina
Banca y Finanzas
Educación
Construcción y Bienes Raíces
Fintech
Ver todo