[GIS] Simplify GeoJSON by retaining external boundaries (clustering)

cluster-toleranceclusteringgeojsonleaflet

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.

Best Answer

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.

Related Question