TL;DR: I have created a Web-based Drag N Drop GeoJSON Editor using Leaflet.js and Geoman! Check the link at the end of the post!

---

I find GeoJSON files fascinating.. The idea of constructing complex shapes by only using readable text is really amazing .. [if you are not familiar with GeoJSON format, it is just a format for presenting geometrical shapes and geographic data structures usually on the web] and here is a glance of what a GeoJSON might look like.

Therefore, I thought that I will create a web-based application that can easily edit GeoJSON files. So I did my research, and I found a fascinating tool called Geoman which is a graphical widget on top of Leaflet.js that the user can edit the geometry of GeoJSONs. So I thought why not to add to it some attribution editing too! So I combined both Leaflet.js and Geoman and created a web-based Drag N Drop GeoJSON Editor!

The tool features:

• Easy importing process: Instead of adding buttons to import and export, I thought it might me easier for the user to drag and drop the imported file. when you do, the app will detect the spatial extent of the imported file and it will automatically zoom to it. You can add multiple files, too (one at a time)
• Easy exporting process: The ability to export the edited file(s). if more than one files are added, the export will be the combination of them all.

• Unique ids: The tool will add on-the- fly a field called ‘unique_id_geojson’ with unique ids for all features.
• Geometry types: Accepting any GeoJSON with (Multi)Point, (Multi)Linestring, or (Multi)Polygons geometry tupes.
• Styling the layers: if the GeoJSON has a combination of any of the geometries listed above , the tool will automatically separate them into 3 layers and style them differently ((Multi)Linestring, (Multi)Point and (Multi)Polygons).

• Moreover, it will add them into a layer-group so you can turn them on\off.
• Attributes updating: one can click on any feature to update its attribute. The list of its attributes will be lpopulated on the right panel. And when you finish, hit the save button.
• Geometry updating: One can edit the geometry from the widget on the left. If new feature is added, the tool will create empty attribute to be filled and updated!

• Basemaps: to add fun to the process, different basemaps can be used

Feel free to check it up from the link below:

https://mhdhabboub-drag-n-drop-geojson-editor.netlify.app

---

Summary: I have created a Web-based Drag N Drop GeoJSON Editor using Leaflet.js and Geoman that can update both geometry and attributions!