I was trying to take a screenshot of a map on react-leflet but any library i tried didn't work because they require to use preferCanvas=true option, which i can't use because it doesn't render the image correctly.
Here is my snippet
import {useState} from "react";
import {useSelector} from "react-redux";
import {MapContainer, TileLayer} from "react-leaflet";
import {mapLimit, parisCoordinates} from "../Utils/constants";
import '../Styles/MapMenu.scss'
const MapContainerBox = () => {
const [gridShow, setGridShow] = useState(false)
const [stationShow, setStationShow] = useState(false)
return (
<MapContainer center={[22,0]}
zoom={3}
minZoom={1.5}
scrollWheelZoom={true}
style={{height: '80vh'}}
maxBounds={mapLimit}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
{stationShow ? <GroundStationVisualizer curStation={parisCoordinates}/> : null}
{gridShow ? <MapGridVisualizer/> : null}
<div className={'map-menu'}>
<button onClick={() => setGridShow(!gridShow)}>Toggle Grid</button>
<button onClick={() => setStationShow(!stationShow)}>Toggle Station</button>
</div>
</MapContainer>
)
}
export default MapContainerBox;Is there a way to take a screenshot without using the canvas option?