hotmap

src/components/Equipo_Computo/Pregunta7.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+
 import { useState, useEffect } from "react";
 import Cookies from "js-cookie";
 import axios from "axios";
@@ -167,5 +168,7 @@ export default function Pregunta7() {
         </table>
       </div>
     </div>
+
+  
   );
-}
+}

src/components/Equipo_Computo/hotmap.tsx

@@ -0,0 +1,128 @@
+"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 = [
+      [200,300,3.5],
+      [210,310,4.0],
+      [220,320,5.2],
+      [230,330,6.5],
+      [240,340,7.0],
+      [250,350,8.0],
+      [260,360,6.8],
+      [270,370,7.5],
+
+      [400,500,4.5],
+      [410,510,6.0],
+      [420,520,8.0],
+      [430,530,7.2],
+      [440,540,6.5],
+      [450,550,5.8],
+      [460,560,7.1],
+
+      [600,300,4.2],
+      [610,310,5.4],
+      [620,320,6.6],
+      [630,330,7.8],
+      [640,340,8.5],
+      [650,350,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.2: "blue",
+        0.4: "cyan",
+        0.6: "yellow",
+        0.8: "orange",
+        1.0: "red"
+      }
+    });
+
+    heat.addTo(map);
+
+    return () => {
+      map.removeLayer(heat);
+    };
+
+  }, [map]);
+
+  return null;
+}
+
+export default function MapaFES({ cerrar }) {
+
+  const bounds = [
+    [0,0],
+    [1000,1000]
+  ];
+
+  return (
+
+    <div style={{
+      position:"fixed",
+      top:0,
+      left:0,
+      width:"100%",
+      height:"100%",
+      background:"#000000cc",
+      zIndex:999
+    }}>
+
+      <button
+        onClick={cerrar}
+        style={{
+          position:"absolute",
+          top:20,
+          right:20,
+          zIndex:1000,
+          padding:"20px 40px",
+          background:"red",
+          color:"white",
+          border:"none",
+          cursor:"pointer"
+        }}
+      >
+        Cerrar
+      </button>
+
+      <MapContainer
+        crs={L.CRS.Simple}
+        bounds={bounds}
+        style={{ height:"100%", width:"100%" }}
+      >
+
+        <ImageOverlay
+          url="/plano_fes_acatlan.png"
+          bounds={bounds}
+        />
+
+        <HeatLayer/>
+
+      </MapContainer>
+
+    </div>
+  );
+}