I have a leaflet map of the UK with around ~2000 points total points and a bit of metadata loading for each point with two side-panels showing the metadata. These points are drawn from several tables stored in a PostGIS database on my own VPS. Now I’d like to add layers to display some standard demographics, i.e. census, index of multiple deprivation, etc. underneath the points. The trouble is, most of the spatial demographics for the UK are associated with census output areas (OAs) and the shapefile which includes all the UK OAs (for which I'm using the CDRC's excellent aggregated shapefile) is very large, around 250MB. This is only a technical problem, as I prefer maximal granularity for these polygons so OAs are good for this. But for this to work on the web, I need to find a way of reducing the amount of data being drawn from the server.

I’ve already tried generalising this shapefile in a series of ways (using postgis, qgis, and GRASS v.generalize - which are all some variation on Ramer–Douglas–Peucker method) but even pushing this to a level of generalisation that becomes unrecognisable gets me to around a 7mb toposjon file, which is way too big to work for the web. I expect that the same user map look at this map both at a National level (zoom level 9 or so) and on a local level (zoom level 13+) so need proper fidelity for the polygons but also need to be careful not to download hundreds of MB worth of unsimplified polygons when working with max zoom.

Going back to the drawing board, from what I can tell, there are three options:

  1. Stick with geojson, but split my shapefile into a series of smaller geo/topojson files (but will need to also have a simplified national level geojson shapefile)

  2. Import the .shp files into my PostGIS database and then have leaflet calculate bounding box for current leaflet map instance displayed onscreen using map.getBounds(); then draw using PostGIS ST_MakeEnvelope() to filter polygons returned by the query. Possibly also run the PostGIS SQL query through ST_Simplify() if working with zoom level < 11 (or so)

  3. Set up a tileserver to serve pre-generated vector tiles (against using bounding box) proxied from my PostGIS database using something like Mapnik, T-Rex or Tilestache or load everything into GeoServer and serve using WMS.

I’ve scored the web and stackexchange and though most Q&A and tutorials are oriented towards working with a small geojson (usually a simplified map of the USA from Mike Bostock’s fantastic tutorials) there are a few overlapping but slightly different queries here:

So what’s my best (i.e. most efficient) option? Is it one of the three above, or perhaps something else? The main concern here is to be sure that this leaflet map can load efficiently (without noticeable delay) across a range of zoom levels. I'm also a tad hesitant to implement a fully-featured tiling server unless this is the only feasible option. I'm hoping someone with experience setting up a similar solution can speak to the actual optimisation trade-offs (server overheads vs. client-side bandwidth) implicated in their preferred option.

  • You could just generate static vector tiles and serve then via a simple web server or cdn. Could try Mapbox GL JS for rendering also. – malcolm Jan 10 '18 at 1:19
  • @malcolm you mean option 3 above, right? – Jeremy Kidwell Jan 10 '18 at 19:15
  • Sort of, I am thinking myself of switching from using an mbtiles-server pushing mbtiles to generating tiles locally and pushing them directly to a cdn, no messing with managing my own webserver. You can use Tippecanoe or geojson2mvt for generating tiles. – malcolm Jan 11 '18 at 20:18
  • @malcolm is it possible to display attribute data in a popup when a feature is clicked, and also style the tiled later based on a specific attribute, using the method you describe? – ge0m3try Jan 13 '18 at 16:10
  • 1
    Styling and interaction depends on the api but know for sure styling via feature properties is possible with mapbox GL JS. Popups definitely as well, in Leaflet popups, styling too I think, using Leaflet vector grid. I have no experience with open layers. – malcolm Jan 14 '18 at 16:31

Your Answer

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

Browse other questions tagged or ask your own question.