Leaflet mosaic TileLayer

Question

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

Answer 1

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}
/>