Editor UX Comparison

[lukasmartinelli]

Some screenshots of other map editors.
I left out QGIS because imho how you need to style in QGIS doesn't translate to the web well.

Google Style Wizard

I quite like the 3-drawer thing on the Google Wizard with "Layers > Properties > Editor"

## Mapbox Studio Classic

## Mapbox Studio

[lukasmartinelli]

So we just had a meeting with Jeffrey Johnson and Gretchen Peterson.

Aspects mentioned:

• Make sure users can start right away. Give them a base map to edit. Not first choose the data
• Grouping of layers indeed useful to modify attributes together
• Having data there to style is just as important (luckily OSM2VectorTiles helps us here)
• Collapsing layers not necessarily bad - since it doesn't disturb the map as it stays all in the same column
• XRay mode useful to detect things that gone missing in styling. Hover over data to get info. (Like you style highways and forgot the trunks)
• Often times customers want to style lot's of point symbols. Choose the glyph and label for a given data

Our approach will be

1. Draw some wireframes for the editor
2. Review does from a cartographer standpoint of view (Gretchen Peterson) to check whether flow makes sense
3. Terranodo can produce a nice looking design based on that
4. Implement it

[tmcw]

XRay mode useful to detect things that gone missing in styling. Hover over data to get info. (Like you style highways and forgot the trunks)

If you do implement something similar, please don't call it X-Ray mode - it is, as far as I know, something that folks at Mapbox created the first implementation of and have consistently named since. It's not really a generic term as much as a specific feature from Studio Classic & Studio.

[lukasmartinelli]

If you do implement something similar, please don't call it X-Ray mode - it is, as far as I know, something that folks at Mapbox created the first implementation of and have consistently named since. It's not really a generic term as much as a specific feature from Studio Classic & Studio.
👍 1

Will do. Absolutely understand.

We will take care to make our own decisions and naming in building the editor. The current state is the initial prototype.

[almccon]

@lukasmartinelli Also checkout Mapzen's Tangram Play GUI editor: https://github.com/tangrams/tangram-play

[ThomasG77]

Less visual, but when I maintain Shift + drawing a rectangle to zoom on the extend, I want to see a rectangle. Whereas it works, it's far from being obvious.
To use rotation, drag + maintaining Ctrl works.
In both case, hidden behaviour to explain somewhere IMO.

I would also like to know how you want to manage scales/zoom levels styles. No opinion ATM, just didn't see it in the demo.

[meekjt]

I like how the Maputnik demo has the attribute editor extend below the layer label. The other examples all have drawers that extend to cover a lot of the map content. It might be unavoidable to cover some content with the editor, but I think it should be minimized if possible.

I also like the use of the Material Design icons, I think they are becoming quite familiar to users in general.

[lukasmartinelli]

I like how the Maputnik demo has the attribute editor extend below the layer label. The other examples all have drawers that extend to cover a lot of the map content. It might be unavoidable to cover some content with the editor, but I think it should be minimized if possible.

I also like the accordion style and that it only uses vertical screen real estate.
The only limitation I see with it is that it prevents/makes difficult future styling of multiple layers at the same time. So selecting multiple layers and editing a property in all of them. But don't know whether we will implement this in foreseeable future.

[pka]

For the sake of completeness, a screenshot ot Carto Builder:

[jingsam]

Google Style Wizard is great. We could start from there. However, some issues should be concerned during designing the UX:

1. The UI of editor should be disparity from mapbox-studio style. As Mapbox is watching this project and OSM2Vectortiles, we should make efforts to avoid any illegal issues.
2. The viewport of map should be maximize. If the style panel overlaps half of the screen, it is hard for users to check the change of map style.
3. Most configuration of style parameters should make map react instantly. For example, when users set color of water fill, selecting a color could take effects instantly. Do not popup a modal dialog and require users to press the confirm button to take effects.

[lukasmartinelli]

I think I found my UX style now (design has been the most difficult part actually - the rest is very straightforward).