Dropping a map onto a web page is a great way to visualize data over a geographic area. Whether to show the distribution of a workforce, demonstrate commute ranges, or analyze demographics, maps can highlight the answers to data questions in a way that other tables and charts will not.
Several tools simplify programming a map from a data source. In this post, we'll focus on Mapbox.
When using Mapbox, a key concern is the balance of data set size versus interactivity. Using a different presentation library for Mapbox can help alleviate issues related to data size and enhance functionality and interactivity.
What is Mapbox?
Mapbox has two general modes of operation. In the Studio, data can be imported into essentially static map layers. These layers then get stacked up to comprise the map presentation.
A large amount of data can be pulled in here in a way that gets server-side computation, so the display becomes very efficient. But, it's not very interactive.
The client-side operation uses the Mapbox GL Javascript library. Using this tool, the developer can interact more directly with the mapping layers, such as adding and removing layers or changing out the data for a specific layer.
While the dynamic operation can make certain display elements pop, we lose the efficiency with large data sets.
All of that data must be loaded client-side and processed in the browser. This makes us much more dependent upon client-side hardware for processing and rendering data.
Data versus Performance
On the one hand, efficiency in development time dictates that we create a single, large data set and deal with degraded client-side performance.
On the other, we could break our map data into smaller areas, have data sets for each, and depend on the map zoom/pan to know whether to load in each one. While that may pose some improvement, it makes the management in code much more complex.
Of course, browser caching helps with the client-side storage of our data set, as long as it doesn't change often. Can we mitigate issues related to the size of the set on the performance front?
Up to certain limits, yes. One of the biggest ways is to use a different client-side presentation library, like deck.gl, that is designed to work together with Mapbox.
Built by Uber, this solution provides a few more configuration tweaks than Mapbox GL. One I have found useful is the ability to turn off high-DPI rendering.
Some devices, such as those with retina displays, have a ton of pixels to compute when rendering map layers.
In many display cases, though, the data being shown has relatively simple shapes, and we don't gain a lot of benefit from that high-resolution render.
When coupled with rendering these shapes for a massive data set with many objects, we can save a lot of processor/GPU cycles each time.