How to serve thousands of clickable hexagons with react-leaflet

Question

I'm trying to build a service that relies on serving a map consisting of thousands of hexagons each clickable and coloured:

Right now I'm using react-leaflet and <GeoJSON /> for that purpose and it works great on desktop, but I recently tried to visit the map on my mobile phone and it just isn't fast enough.

Would it make sense to convert the GeoJSON to a shapefile or is this a good use-case for GeoServer?

Answer 1

Leaflet and React, assuming nothing terrible happened, are pretty fast. I'd use the simulated 3G/mobile testing tools in Chrome or Firefox's dev tools to see if I could figure out where the bottleneck is.

One general tip for apps like this is to make sure you've optimized the GeoJSON within an inch of its life.

• Use mapshaper.org to squeeze it down. You won't get much/anything from simplifying a hexbin, but you could get a lot from reducing significant digits. A lot of tools dump GeoJSON files with 15 decimal places. 6 is more than adequate for almost all use cases (~4 inch resolution).
• Toss every column from the GeoJSON that you aren't using in your app.
• Make sure the GeoJSON is getting gzip'd by the server. If it has a .geojson extension and you haven't fiddled with your web server's gzip and mime type settings, it probably isn't getting zipped. On a mobile network that can hurt. Changing the file extension to .json will sometimes do the trick without any other intervention.
• If the data doesn't change often, make sure you have a good caching strategy for it.

Since the desktop is working well, I don't think tiling, either static or on the fly with something like GeoServer, is likely to solve the problem. I could be wrong though. Phone slow is not a whole lot to go on.