Search code examples
reactjsleafletreact-leaflet-v3

How to hook into tileload event with React-Leaflet v3


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)


Solution

  • 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>