Tengo un ejemplo de un mapa de calor de volante simple con datos de la API. Pero no genera un mapa de calor degradado como debería.

tiene que pensar en los índices de gradiente (0.0 a 1.0) como un cursor del 0% al 100% de su intensidad máxima

 const body = { f: "json", returnGeometry: true, rollbackOnFailure: true, geometry: JSON.stringify({ xmin: bounds.west, ymin: bounds.south, xmax: bounds.east, ymax: bounds.north, spatialReference: { wkid: 4326 }, }), geometryType: "esriGeometryEnvelope", };

Y GeoJSOn:

 <GeoJSON ref={geoJsonLayer} data={props.data} onEachFeature={onEachState} pointToLayer={heatmapToLayerState} />

Esa pointToLayer={heatmapToLayerState} de los datos:

 import L from "leaflet"; const CustomMarker = (latlng) => { const iconMarker = new L.Icon({ gradient: { 0.2: '#ffffb2', 0.4: '#fd8d3c', 0.6: '#fd8d3c', 0.8: '#f03b20', 1: '#bd0026' } }); return L.marker(latlng, { icon: iconMarker, }); }; export const heatmapToLayerState = (_, latlng) => { return CustomMarker(latlng); };