Why are Carto basemaps more performant than Mapbox maps?

I'm following the icon tutorial for Deck.gl in React. I swapped out the MAP_STYLE from a Carto basemap, https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json, to a Mapbox basemap, mapbox://styles/mapbox/light-v9.

I've omitted much of the code, but here's the return function for reference:

  return (
    <DeckGL
      layers={[layer]}
      views={MAP_VIEW}
      initialViewState={INITIAL_VIEW_STATE}
      controller={{ dragRotate: false }}
      onViewStateChange={hideTooltip}
      onClick={expandTooltip}
    >
      <StaticMap
        reuseMaps
        mapStyle={mapStyle}
        preventStyleDiffing={true}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      />
      {renderTooltip(hoverInfo)}
    </DeckGL>

The issue comes when I try to move around the map. When I use the Carto basemap, the movement is quite smooth, whereas there's a noticeable lag in the Mapbox basemap. Here are some gifs for illustration:

Carto: enter image description here

Mapbox: enter image description here

I want to use Mapbox since I find their layers more aesthetic, but I can't seem to make it as performant as some examples, such as this one.

Are there any additional optimizations that I could make to improve performance?

1 answer

  • answered 2021-02-23 16:08 mmz

    For anyone who comes across the same issue, it seems the easiest fix is to export the style from the Mapbox style builder and import the theme as a JSON in your React project.