Time series coloring of polygons in browser (preferably Mapbox)

Question

I have a problem where I need to display a choropleth map with a time slider. I have seen many examples of time slider implementations with CartoDB Torque as well as with mapbox, but I can't find any method of doing this for larger polygon datasets.

I know that I can add a layer for each of the points in the time series, then switch them on and off based on the position of a slider bar. This falls apart for the following reasons:

1) As the number of time steps increases, the number of layers increases. This creates some overhead in the map.

2) We currently create tilesets for our shape information so we can display the appropriate number of points on the polygon boundary at different zoom levels. Because of this, the time series data is transferred multiple times as the user pans and zooms across the map.

There are a number of nearly relevant posts I've reviewed but none lead me to a solution where I can transfer the "metadata" file to the client once and then attach it to the visible polygons for styling.

Answer 1

The solution here is not to stack layer, regardless of whether they are bitmap or vector the amount of server -> client data transfer will be too great for any meaningful time lapse series to run in a smooth manor.

If the polygons are in a fixed position throughout the duration of the time series and it's only the choropleth colours that are changing based on an attribute value then there is a workaround.

You display your polygons as vectors using Leaflet.draw. Then you send the time lapse data as JSON e.g.

{
  "polygon1": ["value 1", "value 2", "value 3" ..],
  "polygon2": ["value 1", "value 2", "value 3" ..], ..
}

Then to run the time lapse at set intervals you just loop over the JSON object and change the color of each polygon based on the relevant value in the series (Path.setStyle).

If you are dealing with complex geometries, you might want to think about simplifying the polygons before sending them to the client, also if you are dealing with a lengthy time series you might want to optimize the JSON structure I gave you or think about lazy loading the series data in chunks.

Answer 2

If you can ahead of time attach the attributes to your polygons data, then simply create your data like

time0: value
time1: value
time2: value

So each feature (or polygon) will have a value for each time step. Then create your choropleth like in this example https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/ and each time the time slider changes you simply change the attribute to use in the style with

map.setPaintProperty('your-layer-name', 'fill-color', {property: 'time0', stops: [...]});