0

I'm using react-leaflet to display a map with GeoJSON linestrings and points. My mouseOver, mouseOut, and click events work fine with a mouse. However, I can't get the tap or touch events to work on mobile (Android Firefox FWIW).

Here's my code:

onEachFeature = (feature, layer) => {

        layer.on({
            mouseover: (e) => this.MouseOverFeature(e, feature),
// attempts here
            touchstart: (e) => this.MouseOverFeature(e, feature),
            touchTap: (e) => this.MouseOverFeature(e, feature),

            onTouchStart: (e) => this.MouseOverFeature(e, feature),
            mouseout: (e) => this.resetHighlight(e, feature)

        });
    };

My map

return (
        <Map
            style={{
                height: '100%',
                width: '100%',
                margin: '0 auto'
            }}
            onClick={this.closeAllMapPopups}
            ref={(el) => {
                this.leafletMap = el;
            }}
            center={position}
            zoom={9}>
            <TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYawefawelbnMyNCIsImawefbDRtMzcwMDNmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>' />
            <GeoJSON data={locations} ref="geojson" style={this.getStyle} onEachFeature={this.onEachFeature} 

            />{' '}
        </Map>

I read several other stackexchange questions on Leaflet touch events but no dice.

Any ideas?

  • Try checking L.Browser.touch value. It should be true. – TomazicM Jan 29 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.