Incredibly slow performance due to heavy topography files

Hi, i’m loading the full world map to show all the users of my application spread across the globe. I’m using one of the topography file which is ~4MB in size. This is my component:

import PropTypes from 'prop-types';
import React from 'react';
import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps';
const worldMapJson = require('../../../images/world-10m.json');
const WorldMap = ({ markers }) => {
  return (
    <ComposableMap
      projection="geoMercator"
      projectionConfig={{
        scale: 100,
      }}
      height={400}
    >
      <Geographies geography={worldMapJson}>
        {({ geographies }) =>
          geographies.map(geo => <Geography key={geo.rsmKey} geography={geo} fill="#EAEAEC" stroke="#888" />)
        }
      </Geographies>
      {markers.map(({ key, coordinates }) => (
        <Marker key={key} coordinates={coordinates}>
          <circle r={3} fill="#3ca" stroke="#065" strokeWidth={1} />
        </Marker>
      ))}
    </ComposableMap>
  );
};
WorldMap.propTypes = {
  markers: PropTypes.array.isRequired,
};
export default WorldMap;

I’ve tried with 50 markers then 5000 markers, the performance is equally awful. The who page stutters when scrolling through this map. It is specially slow when my curser is anywhere on the map when i’m scrolling the page. I’ve downloaded the file locally and then using it but it made no difference. Can you help with tips to improving performance?

It looks gorgeous though.

[zimrick]

Hi @saranshbansal,

With around 5000 users the performance drop is quite normal since SVG has natural limits to how many items you can display in a way that will still be performant. Once you get into the 1000s it can get pretty bad regardless of what you do. With 50 there should definitely be no issues though.

However, there are a couple of things you could try:

1. The world-10m file is extremely detailed. It’s definitely too much detail for a map showing user dots on a world map like yours. I would try the world-110m instead. This will make the biggest difference.

2. There is a huge performance drop with svg when using stroke on paths. If you don’t necessarily need the country borders, you could try removing the stroke. If the country borders are important, then of course this is not an option.

3. If hovering on the geographies is not important, you could also add a style={{ pointerEvents: "none" }} css rule on the Geographies component. That would bypass all events when hovering over the geographies. Markers would still react properly though.

4. I don’t know about the rest of the code on the page, but you could also check to make sure that there are no rerenders happening on the parent component (could be the case if you use parallax or some kind of other scrolling events). If the map is being rerendered on scroll that would definitely make the page stutter.

Small side note, I would recommend not using the Mercator projection. It’s not the best projection to use for a world map for a number of reasons (e.g. weird size relationships between countries). The default geoEqualEarth projection is a better option.

https://www.vox.com/world/2016/12/2/13817712/map-projection-mercator-globe

https://www.axismaps.com/guide/general/map-projections/

https://www.esri.com/about/newsroom/arcuser/equal-earth/

Hope the above helps you improve the performance.

[saranshbansal]

Hey thanks for all the suggestions. Using a lighter version of the topography and removing strokes gave a huge boost in performance.

On top of that, I tweaked my response as well to load as less data as possible. Some of the coordinates were extremely close to each other so I identified and removed all those cases and reduced the number of markers from ~5000 to ~1100. It works really well now.