How to hook into tileload event with React-Leaflet v3

Question

I'm looking for a way to hook into the leaflet Events tileload or tileloadstart with react-leaflet (v3.1.0). However, they are not available in useMapEvents() or accessible in the TileLayer component.

Any idea where I could hook into them? I'm trying to reload markers when the map changes (movestart, moveend, etc. are to imprecise)

score 1 · Accepted Answer · answered Oct 14 '21 at 16:51

Use the eventHandlers prop on TileLayer component:

<MapContainer center={props.position} zoom={13}>
    <TileLayer
        eventHandlers={{ tileload: () => console.log('tile loaded') }}
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
    />
</MapContainer>

How to hook into tileload event with React-Leaflet v3

1 Answers1