Poor Mapbox GL JS performance compared to old Mapbox.js

user_1515746 0
Viewed 1867

I'm in the process of rewriting route-planning web app from Mapbox.js to Mapbox GL JS library.

With all the features almost implemented, it's borderline unusable due to lags, non-smooth animations and general sluggishness of the map layer.

Now, it's entirely possible I'm using the API wrong. I made a quick comparison and published it here:

https://petrnagy.github.io/index.html#automove=no

Notice the old Mapbox.js (left) is much smoother than the new Mapbox GL JS (right).

You can see the difference more clearly here where both maps are moving and zooming:

https://petrnagy.github.io/index.html#automove=yes

This is just a basic example. The app itself also features:

  • Dynamically styled routes (traffic, air quality, elevation)
  • Rich UI which overlays the map
  • Additional layers (eg. bicycle lanes, POIs, air quality)

With all there features, Mapbox GL JS is pretty much unusable. Unlike the old Mapbox.js, which is smooth.

Any advice for optimizing the performance appreciated!

mapbox-gl-js mapbox
1 Answers

it's important to note that the older Mapbox.js library was serving raster tiles, which get rendered server side, where the more modern Mapbox GL JS is vector based and rendered client side. Due to the nature of raster vs. vector is why you might see this "dip" in performance, if you are looking strictly at FPS, because your machine may be struggling.

Mapbox.js, like other traditional JavaScript map libraries, used the basemap-overlay mapping convention. The basemap (or baselayer) is a raster tile layer that is served already rendered from the server and overlays are often vector data that sits on top of the basemap.

Mapbox GL JS has no distinction between baselayers and overlay layers, and uses mostly vector tiles. This means that map details like labels and icons and elements like streets and buildings can be modified with JavaScript, like overlays in earlier mapping libraries. Each layer provides rules about how the renderer should draw certain data in the browser, and the renderer uses these layers to draw the map on the screen.

You can read more about the difference here: https://docs.mapbox.com/help/how-mapbox-works/web-apps/

There are also some great guides on improving performance of Mapbox GL JS maps and working with large GeoJSON sources in Mapbox GL JS

user_129626210
Related