How to send less data to the client with Shiny/leaflet

Question

I'd like to host a page that visualizes a choropleth map at the Census Tract level in the US. I think because of the fidelity of the data necessary, it is probably best to implement this as some kind of Shiny server that only sends the necessary level of resolution to the client, bounded to what's relevant to their viewport. How should I do this?

I have often hosted maps on GitHub pages when the maps can be served as static HTML files. GitHub has a file size limit of 25 MB without going to large-file-storage, and for rendering maps on mobile it is best not to push more than 25 MB to the client if they're on a mobile connection. So a static-file HTML leaflet or mapdeck served through GitHub pages will not work very well. (The problem is that to use sf::st_simplify with a high enough dTolerance (~250m) to get the filesize to less than 25 MB, small census tracts do not render very well, see example).

I understand how to do scale-dependent rendering in leaflet, like as in my blogpost here or in the accepted solution here.

So, I'd like to be able to render a map for the web-client/browser that only sends up to a few megabytes at a time at most, but as far as I can tell:

Saving the original map as a .html file produces >25 MB if I'm using all US Census Tracts
Compressing the Census Tracts leads to the map looking bad in dense areas.
If I use scale-dependent-rendering, even if I were to put it into Shiny, this doesn't actually decrease the amount of data sent to the web-client because it seems like leaflet still sends all of the layers to the client.

How can I actually reduce the amount of data sent to the web-client, at least so that someone on a mobile connection can reasonably use the map?

mdag02 · Accepted Answer · 2024-04-17 05:18:47Z

0

A way to reduce geometry size without creating gaps or slivers between polygons is using {rmapshaper} or https://mapshaper.org/ to simplify your layer but conserving the topology.

If your layer is big you may have to use a local install of the node.js mapshaper when preparing your layer with {rmapshaper}.

Another way, requiring a more complex infrastructure, is using a WMS/WFS/WMTS/... server, which can serve small and adapted raster or vector tiles to leaflet.

edited Apr 17, 2024 at 5:18

answered Apr 17, 2024 at 4:53

mdag02

1,1759 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to send less data to the client with Shiny/leaflet

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related