GeoJSON editor
See original GitHub issueNow we support inline GeoJSON (added in #559) it’s possible to easily add small features to the map, but unfortunately it still isn’t very easy. I suggest we add a GeoJSON editor to Maputnik to add/edit GeoJSON from the data sources modal.
I’ve taken a first attempt at this, looking for feedback on the approach, note it’s still in early stages, questions I want to answer
- Should we add this?
- In the basic concept if the UI correct?
- Are there any other requirements that we should consider?
Lets see it in action
I’ve added a new button Edit in editor
, note that the default for the GeoJSON (JSON)
is now an empty FeatureCollection
This opens a modal for editing the GeoJSON
I can now draw a polygon using the GUI tools
When I close the editor the GeoJSON is written back to the <input/>
in the sources modal
You can also then edit point by clicking on the line/point/polygon and dragging the handles
There is a demo here https://1661-84182601-gh.circle-artifacts.com/0/artifacts/build/index.html
Note that it’s reasonably early in development. I wanted to get feedback before proceeding, the styling is really basic at the moment (or just not present)
Features
- Supports basic LineString/Point/Polygon
- Double click to ‘end’ shape (LineString/Polygon)
- Editing of existing features
- Keyboard shortcuts
backspace
- removeescape
- select modep
- add pointl
- add lines
- add polygonc
- cancel shape creatione
- end shape creation
Missing
- Editing the properties of GeoJSON features
- Doesn’t support polygons with holes (winding order) - hard to solve
- Can’t ‘close’ the path on polygons, so currently if you create a square the start/end points won’t be locked together - easy to solve
- Can create new point in Polygon/LineString once created - easy to solve
- Translate/rotate - shouldn’t be to hard with turf.js hopefully, although probably not one for v1 of this feature.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:7 (6 by maintainers)
👍
It turns out that in GeoJSON/MapboxGL (not 100% sure which at the moment) if you want to draw a line crossing over the dateline you just keep going negative/positive. So a line across the date line to the west would be
[[-170, 30], [-200, 30]]
or something like that, if you edit the JSON in the editor you can make it work. I think I’ve worked out how to fix the UI also (fix to come)Thanks for the feedback
Interesting idea. I think for me personally, inline geojson in a Mapbox-GL style is not something I would want to use for this kind of use case. I’d rather have the people managing the data using the simplest possible editor, focused strictly on data - and all the styling etc handled elsewhere.