Split GeoJson Layers into multiple layers in Javascript

Question

In the Site I am building a user can login and view a map that shows the Region under him (a GeoJSON layer). The user need to split this region into a number of subregions and assign it to some other users(sub users under him)to take care of the operations in that subregion and can view the map of that subregion when he logins. I want to add a page with map of the region under him to edit and split the region (the GeoJSON layer) into subregions and save those region layer data (as geojson data preferably) in DB to reassign. I tried Openlayers 3 and Google Maps javascript APIs and briefly went through leafletjs. But all of them does not seem to offer an option to divide a GeoJSON Layer into multiple layers (only draw and and reshape).

How can I achieve this?

Answer 1

There is a somehow "easy" solution using Turf.js:

1. Duplicate the polygon you want to split.
2. Edit one of them (e.g. using Leaflet.draw plugin).
3. Once the edited polygon represents one of the "sub-regions", use turf.difference to exclude that sub-region from the initial region (i.e. the previously unchanged polygon).
4. Start again from step 1 using the remaining "region" until it is split in all its child sub-regions.

Answer 2

To have a regions file, and every region is cut up into a sub-region. You basically need two different files. My sub-regions file also has a field showing it's region. If I use it as a region when I select it, I only get the sub-region. If I use the Region file and select on it I get the entire region.

If it was me, I'd save the regions file as a GeoJSON file, load it into QGIS, cut it up into sub_regions save that as a new GeoJSON file. Now just use each file in Leaflet as 2 different layers.

Basically since your assigning to sub-regions that's the file you will edit. You can put the GeoJSON into a database for the edits, or in my case I keep it as a GeoJSON file and link it to a database by the sub-region ID using a REST service and JavaScript.