cordenasdeedf a1-a6

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 (
 
     <div style={{
-      width:"100%",
-      height:"600px",
-      marginTop:"40px",
-      borderRadius:"10px",
-      overflow:"hidden",
-      boxShadow:"0 4px 20px rgba(0,0,0,0.2)"
+      width: "100%",
+      height: "650px",
+      marginTop: "40px",
+      borderRadius: "12px",
+      overflow: "hidden",
+      boxShadow: "0 6px 25px rgba(0,0,0,0.3)"
     }}>
 
       <MapContainer
         crs={L.CRS.Simple}
-        bounds={bounds}
-        style={{height:"100%",width:"100%"}}
+        minZoom={-2}
+        style={{ height: "100%", width: "100%" }}
       >
 
         <ImageOverlay
-          url="/plano_fes_acatlan.png"
+          url="/plano.png"
           bounds={bounds}
         />
 
-        <HeatLayer/>
+        <AjustarVista bounds={bounds} />
+
+        <HeatLayer />
 
       </MapContainer>
 
     </div>
-
   );
 }