I want to use leaflet reactjs and i want to do it on an image. the prblm is that the image is shown as mosaic.
<div className="bg-white w-auto m-2 h-[calc(635px-10rem)] border-2 border-gray-500 rounded-md overflow-hidden" id='drawcomponent' >
<MapContainer center={[51.505, -0.09]} zoom={0} zoomControl={false} attributionControl={false} scrollWheelZoom={true} className="h-full w-full" style={{ backgroundColor: 'white', objectFit: 'fill', backgroundSize: '100% 100%', backgroundPosition: 'center' }}>
<TileLayer className="" url={ImageURL} />
</MapContainer>
</div>
The image show my output
I tryed to add width height change image put a bigger image nothing works it steal mosaic. i want it to be streech
using TileLayer
in this case is wrong, use ImageOverlay
like this:
const bounds = new LatLngBounds([40.712216, -74.22655], [40.773941, -74.12544])
<ImageOverlay
url="http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
bounds={bounds}
opacity={0.5}
zIndex={10}
/>