// Platform (Mapbox dark + bitácora palette) + Case Study (editorial cross-section) async function getMapboxToken() { const config = typeof window.getSimciiConfig === 'function' ? await window.getSimciiConfig() : (window.SIMCII_CONFIG || {}); return config.mapboxToken || ''; } const NODES = [ { id: 'A1', lng: -68.92, lat: -23.60, kind: 'env', label: 'Nodo ambiental A1' }, { id: 'A2', lng: -68.42, lat: -23.20, kind: 'env', label: 'Nodo ambiental A2' }, { id: 'C1', lng: -68.78, lat: -23.78, kind: 'com', label: 'Punto comunitario C1' }, { id: 'X1', lng: -68.60, lat: -23.90, kind: 'alert', label: 'Evento X1' }, ]; const INDICATORS = [ { code: 'ENV-01', label: 'Material particulado', state: 'dentro de rango', fill: 62, color: 'var(--fosforo)' }, { code: 'ENV-02', label: 'Gases y compuestos', state: 'dentro de rango', fill: 44, color: 'var(--fosforo)' }, { code: 'ENV-03', label: 'Ruido diurno', state: 'tendencia al alza', fill: 72, color: 'var(--ambar)' }, { code: 'SOC-01', label: 'Satisfacción comunitaria', state: 'estable', fill: 78, color: 'var(--fosforo)' }, { code: 'SOC-02', label: 'Reportes ciudadanos', state: 'bajo umbral', fill: 28, color: 'var(--fosforo)' }, { code: 'SOC-03', label: 'Compromisos activos', state: 'en ejecución', fill: 66, color: 'var(--altiplano)' }, ]; function getNodeMetrics(n) { if (n.kind === 'env') { return { kindLabel: 'Sensor ambiental', status: { label: 'Operativo', color: 'var(--fosforo)' }, readings: [ { label: 'PM10', value: '38 µg/m³', fill: 38 }, { label: 'NO₂', value: '12 ppb', fill: 24 }, { label: 'Ruido', value: '52 dB', fill: 60 }, ], lastUpdate: 'hace 1 min', }; } if (n.kind === 'com') { return { kindLabel: 'Punto comunitario', status: { label: 'Activo', color: 'var(--altiplano)' }, readings: [ { label: 'Satisfacción', value: '78 %', fill: 78 }, { label: 'Reportes', value: '03 / sem', fill: 22 }, { label: 'Compromisos', value: '12 activos', fill: 66 }, ], lastUpdate: 'hace 4 min', }; } return { kindLabel: 'Evento detectado', status: { label: 'Atención requerida', color: 'var(--oxido)' }, readings: [ { label: 'Severidad', value: 'Media', fill: 55 }, { label: 'Correlación', value: '02 nodos', fill: 40 }, { label: 'Edad evento', value: '08 min', fill: 15 }, ], lastUpdate: 'hace 8 min', }; } function buildPopupHTML(n) { const m = getNodeMetrics(n); const lngStr = `${Math.abs(n.lng).toFixed(3)}° ${n.lng < 0 ? 'W' : 'E'}`; const latStr = `${Math.abs(n.lat).toFixed(3)}° ${n.lat < 0 ? 'S' : 'N'}`; const readings = m.readings.map(r => `

${r.label} ${r.value}

`).join(''); return `

    ${m.kindLabel}${n.id}
  

${latStr} · ${lngStr}

${m.status.label}

${readings}

    ↻ ${m.lastUpdate}
    Ver detalle →
  

`.trim(); } // ---------------- PLATFORM MAP ---------------- function PlatformMap() { const [ref, visible] = window.useReveal(0.1); const mapRef = React.useRef(null); const mapInstance = React.useRef(null); const markersRef = React.useRef([]); const popupRef = React.useRef(null); const [active, setActive] = React.useState(0); const [range, setRange] = React.useState('24 h'); const [ready, setReady] = React.useState(false); const [mapError, setMapError] = React.useState(''); React.useEffect(() => { let cancelled = false; async function initializeMap() { if (!mapRef.current || mapInstance.current) return; const mgl = window.mapboxgl; if (!mgl) { setMapError('No se pudo cargar Mapbox'); return; } const token = await getMapboxToken(); if (cancelled) return; if (!token) { setMapError('Falta MAPBOX_TOKEN'); return; } mgl.accessToken = token; const map = new mgl.Map({ container: mapRef.current, style: 'mapbox://styles/mapbox/dark-v11', center: [-68.66, -23.78], zoom: 7.4, pitch: 35, bearing: -12, interactive: true, attributionControl: false, }); mapInstance.current = map; map.on('error', () => { if (!cancelled) setMapError('No se pudo inicializar el mapa'); }); map.on('load', () => { if (cancelled) return; setReady(true); // Recolor layers to bitácora palette try { if (map.getLayer('background')) map.setPaintProperty('background', 'background-color', '#15191C'); const layers = map.getStyle().layers || []; layers.forEach(l => { if (l.id.includes('water')) { try { map.setPaintProperty(l.id, 'fill-color', '#0E1115'); } catch {} } if (l.id.includes('land') && l.type === 'background') { try { map.setPaintProperty(l.id, 'background-color', '#15191C'); } catch {} } if (l.id === 'national-park') { try { map.setPaintProperty(l.id, 'fill-color', '#1B2025'); } catch {} } if (l.id === 'landuse') { try { map.setPaintProperty(l.id, 'fill-color', '#1B2025'); } catch {} } if (l.id.includes('hillshade')) { try { map.setPaintProperty(l.id, 'hillshade-shadow-color', '#0E1115'); } catch {} } }); // Hide non-essential layers ['poi-label', 'transit-label', 'road-label', 'road-number-shield', 'road-exit-shield', 'airport-label', 'place-label-other', 'natural-line-label', 'water-line-label', 'road-pedestrian', 'road-minor', 'road-secondary-tertiary'].forEach(layerId => { if (map.getLayer(layerId)) { try { map.setLayoutProperty(layerId, 'visibility', 'none'); } catch {} } }); // Fog map.setFog({ 'color': '#15191C', 'high-color': '#1B2025', 'horizon-blend': 0.1, 'space-color': '#0E1115', 'star-intensity': 0, 'range': [0.5, 8] }); if (map.getSource('mapbox-dem')) { map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.2 }); } } catch (e) { /* ignore */ } // Add DOM markers — simplified: core 4px + ring 12px markersRef.current = NODES.map((n, i) => { const wrap = document.createElement('div'); wrap.style.cssText = 'position:relative;width:12px;height:12px;pointer-events:auto;cursor:pointer;'; const ringColor = n.kind === 'alert' ? '#8C2A1C' : n.kind === 'com' ? '#FFB547' : '#6EF0FF'; // Pulse ring const ring = document.createElement('div'); ring.style.cssText = `position:absolute;inset:0;border-radius:50%;border:1px solid ${ringColor};animation:ringPulse 2s ease-out infinite;`; wrap.appendChild(ring); // Core dot const dot = document.createElement('div'); dot.style.cssText = 'position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4px;height:4px;border-radius:50%;background:#F2EDE4;transition:transform .25s;'; wrap.appendChild(dot); wrap.addEventListener('mouseenter', () => { setActive(i); dot.style.transform = 'translate(-50%,-50%) scale(1.5)'; }); wrap.addEventListener('mouseleave', () => { dot.style.transform = 'translate(-50%,-50%) scale(1)'; }); wrap.addEventListener('click', (e) => { e.stopPropagation(); setActive(i); if (popupRef.current) { popupRef.current.remove(); popupRef.current = null; } const popup = new mgl.Popup({ offset: [0, -18], closeButton: false, closeOnClick: true, anchor: 'bottom', maxWidth: '320px', }) .setLngLat([n.lng, n.lat]) .setHTML(buildPopupHTML(n)) .addTo(map); popup.on('close', () => { if (popupRef.current === popup) popupRef.current = null; }); popupRef.current = popup; map.easeTo({ center: [n.lng, n.lat], duration: 800, essential: true }); }); const marker = new mgl.Marker({ element: wrap, anchor: 'center' }) .setLngLat([n.lng, n.lat]) .addTo(map); marker._nodeIndex = i; return marker; }); }); } initializeMap(); return () => { cancelled = true; if (popupRef.current) { popupRef.current.remove(); popupRef.current = null; } markersRef.current.forEach(m => m.remove()); if (mapInstance.current) { mapInstance.current.remove(); mapInstance.current = null; } }; }, []); React.useEffect(() => { markersRef.current.forEach((m, i) => { const el = m.getElement(); const dot = el.querySelector('div:last-child'); if (!dot) return; if (i === active) { dot.style.boxShadow = '0 0 0 3px #6EF0FF'; } else { dot.style.boxShadow = 'none'; } }); }, [active]); return (

Visibilidad y comprensión total del territorio, a través de un sistema integrado.

{['24 h', '7 d', '30 d'].map((p) => { const act = range === p; return ( ); })}

{/* Map column */}

{/* Top-left HUD */}

Flujo en vivo

Territorio demostrativo · Red 04 nodos

{/* Loading state */} {(!ready || mapError) && (

{mapError || 'CARGANDO TERRITORIO'}

)} {/* Scan bar */}

{/* Editorial overlays */}

§ 04 · MAPA TERRITORIAL · ZONA NORTE

ESCALA 1:50000 · DATUM WGS84

{/* Indicator panel */}

Indicadores · {range} EN VIVO

{INDICATORS.map((k, i) => { const isActive = active === i; return ( ); })}

Latencia de red

< 5 min

{/* Caption */}

Fig. 01 Red SIMCII ilustrada sobre un territorio demostrativo. Nodos y coordenadas no corresponden a una operación real.

); } // ---------------- CASE STUDY ---------------- function CaseStudy() { const [ref, visible] = window.useReveal(0.15); return (

§ Caso ilustrativo

Tu operación y su entorno, en la misma ecuación.

Lo que ocurre fuera de tu operación impacta directamente en ella.

SIMCII conecta ambos mundos para que puedas anticiparte, no reaccionar.

Caso ilustrativo · no corresponde a operación real

Fig. 02 · Corte transversal

ESC · DEMO

← Faena Territorio Comunidad →

); } // ---------------- CROSS-SECTION DIAGRAM ---------------- function CrossSectionDiagram() { const [t, setT] = React.useState(0); React.useEffect(() => { let raf; const loop = () => { setT(performance.now() / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const sensors = [ { x: 20, y: 38, id: 'A1' }, { x: 36, y: 32, id: 'A2' }, { x: 52, y: 36, id: 'A3' }, { x: 68, y: 32, id: 'A4' }, { x: 82, y: 38, id: 'A5' }, ]; const communities = [ { x: 26, y: 80, id: 'C1' }, { x: 50, y: 84, id: 'C2' }, { x: 78, y: 76, id: 'C3' }, ]; const facility = { x: 50, y: 56 }; return ( ); } Object.assign(window, { PlatformMap, CaseStudy });