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, 2018 at 1:19
  • @malcolm you mean option 3 above, right? Jan 10, 2018 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, 2018 at 20:18
  • 2
    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, 2018 at 16:31
  • 2
    @malcolm have you look up on this? blog.mapbox.com/… and stackoverflow.com/questions/17626198/…?
    – Kyros Koh
    Jan 21, 2019 at 7:30


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.