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.


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.

  • That was one of the options we were exploring but we were curious about how to deal with polygons that come from a tile server. As I was going through this process in the past it almost seemed like I needed to add a new polygon that contained the metadata. As we start having 1,000s of polygons that becomes quite intensive on the client side. Is there something that I'm missing with that process? Is there an api call within mapbox or leaflet that allows data attachment like you are describing? – Dan Skorski Jan 11 '17 at 16:49

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: [...]});
  • That's what I ended up doing. The overall tile file gets rather large but it's manageable on the client side for now. If anyone else is looking to do this, we found setting the visibility on the layer to none when initializing the map made an enormous difference. The visibility is processed before anything hits the GPU so the performance is significantly better. When the user wants to see a specific time step, we flip the switch on the visibility layer. – Dan Skorski Jan 14 '17 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.