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 :
- Run DBSCAN algo on each zone to identify clusters of polygons, fine-tuning epsilon parameter visually
- Run a concave Hull on each cluster to identify the boundaries
- 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.