diff --git a/public/plano.png b/public/plano.png new file mode 100644 index 0000000..a0a1542 Binary files /dev/null and b/public/plano.png differ diff --git a/src/components/Equipo_Computo/MapaCalor.tsx b/src/components/Equipo_Computo/MapaCalor.tsx index 1d4397a..5b1c11f 100644 --- a/src/components/Equipo_Computo/MapaCalor.tsx +++ b/src/components/Equipo_Computo/MapaCalor.tsx @@ -6,81 +6,136 @@ import "leaflet/dist/leaflet.css"; import "leaflet.heat"; import { useEffect } from "react"; +// 🔷 Ajustar vista automáticamente +function AjustarVista({ bounds }) { + const map = useMap(); + + useEffect(() => { + map.fitBounds(bounds); + }, [map, bounds]); + + return null; +} + function HeatLayer() { const map = useMap(); useEffect(() => { - const puntos = [ - [20,30,3.5],[21,31,4.0],[22,32,5.2],[23,33,6.5], - [24,34,7.0],[25,35,8.0],[26,36,6.8],[27,37,7.5], - [40,50,4.5],[41,51,6.0],[42,52,8.0],[43,53,7.2], - [44,54,6.5],[45,55,5.8],[46,56,7.1], + // ESCALADOS A 4768x3368 + const edificios = { + A1: [[1400, 3060], [1470, 3060], [1470, 3360], [1400, 3360]], + A2: [[1570, 3130], [1570, 3190], [1850, 3190], [1850, 3130]], + A3: [[1640, 2650], [1705, 2650], [1705, 2950], [1640, 2950]], + A4: [[1235, 2260], [1235, 2360], [1610, 2360], [1610, 2260]], + A5: [[2250, 2480], [2580, 2480], [2580, 2580], [2250, 2580]], + A6: [[1390, 2385], [1480, 2385], [1480, 2655], [1390, 2655]], + A7: [[2080, 2080], [2250, 2080], [2250, 2480], [2080, 2480]], + A8: [[1820, 2280], [2100, 2280], [2100, 2380], [1820, 2380]], + A9: [[1950, 1880], [2250, 1880], [2250, 1980], [1950, 1980]], + A10: [[1730, 1780], [1900, 1780], [1900, 2130], [1730, 2130]], + A11: [[1700, 1580], [2050, 1580], [2050, 1710], [1700, 1710]], + A12: [[2050, 1280], [2250, 1280], [2250, 1780], [2050, 1780]], + A13: [[1530, 680], [1700, 680], [1700, 1050], [1530, 1050]], + A14: [[1700, 630], [2050, 630], [2050, 750], [1700, 750]], + A15: [[2027, 2580], [2087, 2580], [2087, 2900], [2027, 2900]], + CEDTEC: [[900, 2900], [1100, 2900], [1100, 3200], [900, 3200]], + BIBLIOTECA: [[1200, 1600], [1500, 1600], [1500, 1900], [1200, 1900]], + POSGRADO: [[1100, 1525], [860, 1525], [860, 1325], [1100, 1325]] - [60,30,4.2],[61,31,5.4],[620,320,6.6],[630,330,7.8], - [64,34,8.5],[65,35,7.2],[660,360,6.1],[670,370,5.3], + }; + + + const puntos = []; + + Object.entries(edificios).forEach(([nombre, poligono]) => { + for (let i = 0; i < 15; i++) { + + const x = poligono[0][0] + Math.random() * (poligono[1][0] - poligono[0][0]); + const y = poligono[0][1] + Math.random() * (poligono[2][1] - poligono[0][1]); + + const intensidad = Math.random(); + + puntos.push([x, y, intensidad]); + } + }); - [700,200,6.5],[720,220,7.8],[740,240,8.9],[760,260,9.5], - [780,280,8.7],[800,300,7.6],[820,320,6.4] - ]; const heat = L.heatLayer(puntos, { - radius: 50, - blur: 30, + radius: 35, + blur: 25, maxZoom: 2, - gradient:{ - - 0.4:"cyan", - 0.6:"yellow", - 0.8:"orange", - 1:"red" + gradient: { + 0.2: "#00f", + 0.4: "#0ff", + 0.6: "#0f0", + 0.8: "#ff0", + 1.0: "#f00" } }); heat.addTo(map); + + Object.entries(edificios).forEach(([nombre, coords]) => { + L.polygon(coords, { + color: "#77ee9f", + weight: 2, + fillOpacity: 0.25 + }) + .bindPopup(`🏢 ${nombre}`) + .addTo(map); + }); + + // 🔥 DEBUG PRO (CLICK PARA COORDENADAS EXACTAS) + map.on("click", function (e) { + console.log("📍 Coordenadas exactas:", e.latlng); + }); + return () => { map.removeLayer(heat); }; + }, [map]); return null; } -export default function MapaCalor(){ +export default function MapaCalor() { const bounds = [ - [0,0], - [1000,1000] + [0, 0], + [3368, 4768] // 🔥 DIMENSIÓN REAL ]; - return( + return (
- + + +
- ); } \ No newline at end of file