Simplify GeoJSON by retaining external boundaries (clustering)

Question

I created a website (http://www.cartescolaire.paris) that basically loads a GeoJSON and displays it on a map using Leaflet.

This geoJSON is pretty large (over 2 Mb), the loading time can be very long (it doesn't even load on IE 11). More importantly the resulting map is not very responsive when zooming / navigating.

There are around 110 zones/multipolygons (clicking on a point in the map highlights the zone it belongs to), each of them made from dozens of polygons.

However the only important information that I want to visualize is the external boundaries of each zone. Such a compressed geometry would be much more efficient performance-wise.

The complexity arises from the constraint that the zones shouldn't overlap. The final result should be disjoint clusters.

Any idea how I could do that?

@Stephen : The boundaries are pretty accurate and the orange sections are correctly located (they are actual buildings). I am prepared to do some manual processing if need-be ...

@Nathan : I didn't know turf.js and the buffering technique. I am a newbie in GIS space. I've already tried Mapshaper, but although it is very efficient in simplifying each single polygon boundary, it doesn't help much in building the external boundaries for a group of polygons. Did I miss something ?

As you properly spotted, several zones have clusters outside the main area and that's one of the main issues.

I will also have a look at leaflet-beta to check if the rendering is better than in v0.7.7

My initial idea was to :

1. Run DBSCAN algo on each zone to identify clusters of polygons, fine-tuning epsilon parameter visually
2. Run a concave Hull on each cluster to identify the boundaries
3. Finally, simplify the geometry

But I am sure there are GIS tools that can help instead of coding everything myself.

---

I finally followed Nathan's advice and buffered each geometry (+25 meters then -25 meters) then simplified the geometries up to 20%. The result is pretty acceptable and as expected the web page loads must faster and the navigation is fluid.

I used QGIS with a bit of Python scripting for buffering and mapshaper to simplify the geometries.

I haven't used turf.js for buffering since I noticed a bug in turf-buffer current version by which some features disappear after buffering. The issue has already been reported here.

Answer 1

A few answers but probably not the ones you're looking for:

1. Manually digitize the boundaries in desktop GIS
2. Try leaflet beta, it handles polygon rendering a little better.
3. Convert the geojson to topojson and/or use the geojson-vt plugin to create vector tiles.

See https://getbounds.com/blog/leaflet-and-geojson-tiles and also the original example found by viewing the source.

Answer 2

A few other options, to add to those malcolm has already suggested:

• If the primary goal is just to reduce file size, you may want to try using http://mapshaper.org/ to simplify your geometry first. Depending on how much detail you need to retain, you may be able to reduce the size of your files quite a bit.

• You can remove many of the internal street lines by buffering each feature by roughly half the distance across the largest street, then contracting it (using a negative buffer) by the same amount. The result will still need to be cleaned up/simplified as there will be some overlap between polygons and probably also an increase in the total number of points (where previously straight lines become curved). Here is an example fiddle applying this technique to a selection of your data using turf.js, though you could of course achieve the same effect just as easily with desktop GIS.

• If you are using ArcGIS with an advanced or ArcInfo license, it has an Aggregate Polygons tool that appears to do what you want.

• Some other options using PostGIS etc. are described in this GIS.SE post.

I suspect that the desktop GIS options will also require some amount of pre- or post-cleaning of the data. For instance, I notice that several of the polygons actually have tiny slivers far outside the contiguous area, and those might need to be removed before applying a concave hull or running an aggregation routine.