I’m implementing a timelapse, selecting a date range, but I’m not able to show the entire map at once, it’s loading via Tiles.
const Map = () => {
const [selectedLayers, setSelectedLayers] = useState([]);
const [timelapseActive, setTimelapseActive] = useState(false);
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(new Date());
const timelapseLayers = filterR["Filter"];
useEffect(() => {
let interval;
if (timelapseActive) {
interval = setInterval(() => {
setSelectedDate(currentDate => {
let nextDate = new Date(currentDate);
nextDate.setDate(nextDate.getDate() + 1);
if (nextDate > endDate) {
nextDate = startDate;
}
return nextDate;
});
}, 3000);
}
return () => {
if (interval) {
clearInterval(interval);
}
};
}, [timelapseActive, startDate, endDate]);
const renderTimelapseWmsTiles = (selectedDate, layers) => {
return layers.map(layer => {
const timeParam = { time: selectedDate.toISOString().split('T')[0] };
return (
<WMSTileLayer
key={`${layer.name}-${selectedDate}`}
url={layer.wms_url}
layers={layer.name}
format="image/png"
transparent={true}
version="1.3.0"
{...timeParam}
/>
);
}).filter(component => component !== null);
};
....
return (
....
Does anyone know a possible solution for this? I’ve already tried saving it in useState and then showing it to the map, but it still doesn’t work.