86 lines
1.6 KiB
TypeScript
86 lines
1.6 KiB
TypeScript
"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>
|
|
|
|
);
|
|
} |