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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.