2

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>
Scott Daniel
  • 1,087
  • 12
  • 18
  • Have you tried replacing your Markers by CircleMarkers on a canvas renderer? – ghybs May 05 '20 at 19:05
  • 1
    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. – Scott Daniel May 05 '20 at 23:39

1 Answers1

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.

saniya
  • 59
  • 1
  • 9