question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Now 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 Screen Shot 2019-10-21 at 11 46 08

This opens a modal for editing the GeoJSON Screen Shot 2019-10-21 at 11 46 21

I can now draw a polygon using the GUI tools Screen Shot 2019-10-21 at 11 47 00

When I close the editor the GeoJSON is written back to the <input/> in the sources modal Screen Shot 2019-10-21 at 11 47 35

You can also then edit point by clicking on the line/point/polygon and dragging the handles Screen Shot 2019-10-21 at 12 04 04

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 - remove
    • escape - select mode
    • p - add point
    • l - add line
    • s - add polygon
    • c - cancel shape creation
    • e - 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:open
  • Created 4 years ago
  • Reactions:1
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
orangemugcommented, Oct 23, 2019

I would suggest to split the code/map window vertically instead of horizontally. Like it is now, there is a lot of unused space in the code part and the width/height ratio of the map is not optimal.

👍

Currently it’s not possible to create features across the dateline. How to handle the case if multiple worlds are visible? Do coordinates located in additional worlds use a different lon range than -180/180 ?

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

0reactions
stevagecommented, Nov 28, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

geojson.io | powered by Mapbox
A quick, simple tool for creating, viewing, and sharing spatial data.
Read more >
The Most Powerful Online GeoJSON Editor - Geoman.io
The most advanced and powerful GeoJSON Editor and GeoJSON Viewer. Create and edit any data in a simple and fast way. Then copy,...
Read more >
Vector | GeoJSON Editor
A Simple GeoJSON data editor for GIS people.
Read more >
GeoJSON editor
GeoJSON editor. View on Github. Select All Download. Toggle Panel. To navigate, press the arrow keys. BESbswy.
Read more >
Draw and Edit with GeoJson.io - Hands-On Data Visualization
GeoJson.io is a popular open-source web tool to convert, edit, and create GeoJSON files. The tool was originally developed by Tom MacWright in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found