Why is Leaflet so slow at pan and zoom inside React?

Question

I have a fairly simple application that renders around 3000 points using leaflet.js. It renders fairly quickly but pan and zoom are terribly slow.

Looking at the performance tools in chrome, it looks like most of the time is spend in recalculate styles, but that hasn't been helpful.

      <LeafletMap
        center={[50, 10]}
        zoom={6}
        maxZoom={10}
        preferCanvas={true}
      >
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        {this.state.locations.map( (location, index) => {
            return (
              <Marker position={[location.latitude, location.longitude]}>
                <Popup>
                  Popup for any custom information.
                </Popup>
              </Marker> 
            )
        })}
    </LeafletMap>

Dissonancy

Have you tried replacing your Markers by CircleMarkers on a canvas renderer? – Leasehold

Thanks for the idea. I'll try it. Most of what I posted above is wrong. It turns out this has absolutely nothing to do with React. I've updated the question accordingly. – Dissonancy

Answer 1

I faced the same issue, this happens because every time you zoom it re-renders all the markers and also it takes browser memory for plotting the markers. So, as the no of markers increases it will make your map slower.

So, I have used https://github.com/manubb/Leaflet.PixiOverlay, which is really fast, as it renders in HTML Canvas in browsers. We have react version also available for it - https://www.npmjs.com/package/react-leaflet-pixi-overlay

You can also try the same.

Pouliot

Did you try to use leaflet's preferCanvas instead of PixiOverlay? – Boleslaw