hotmap

src/components/Equipo_Computo/MapaCalor.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet.heat";
+import { useEffect } from "react";
+
+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],
+
+      [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],
+
+      [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,
+      maxZoom: 2,
+      gradient:{
+      
+        0.4:"cyan",
+        0.6:"yellow",
+        0.8:"orange",
+        1:"red"
+      }
+    });
+
+    heat.addTo(map);
+
+    return () => {
+      map.removeLayer(heat);
+    };
+  }, [map]);
+
+  return null;
+}
+
+export default function MapaCalor(){
+
+  const bounds = [
+    [0,0],
+    [1000,1000]
+  ];
+
+  return(
+
+    <div style={{
+      width:"100%",
+      height:"600px",
+      marginTop:"40px",
+      borderRadius:"10px",
+      overflow:"hidden",
+      boxShadow:"0 4px 20px rgba(0,0,0,0.2)"
+    }}>
+
+      <MapContainer
+        crs={L.CRS.Simple}
+        bounds={bounds}
+        style={{height:"100%",width:"100%"}}
+      >
+
+        <ImageOverlay
+          url="/plano_fes_acatlan.png"
+          bounds={bounds}
+        />
+
+        <HeatLayer/>
+
+      </MapContainer>
+
+    </div>
+
+  );
+}

src/components/Equipo_Computo/Pregunta7.tsx

@@ -5,6 +5,7 @@ import Cookies from "js-cookie";
 import axios from "axios";
 import "./pregunta7.css";
 import ToggleButton from "../Toggle/ToggleButton";
+import MapaCalor from "./MapaCalor";
 
 type AntiguedadItem = {
   antiguedad: string | null;
@@ -166,6 +167,8 @@ export default function Pregunta7() {
           </tbody>
         </table>
       </div>
+      <MapaCalor />
     </div>
+    
   );
 }