CODEWITHSUNDEEP
reactjsleafletreact-leaflet
Scott Daniel
Scott Daniel

Reputation: 1103

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

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>

Upvotes: 3

Views: 4365

Answers (1)

saniya
saniya

Reputation: 79

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.

Upvotes: 1

Related Questions