Comments (10)
@lukasmartinelli Also checkout Mapzen's Tangram Play GUI editor: https://github.com/tangrams/tangram-play
from maputnik.
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.
from maputnik.
For the sake of completeness, a screenshot ot Carto Builder:
from maputnik.
Google Style Wizard is great. We could start from there. However, some issues should be concerned during designing the UX:
- 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.
- 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.
- 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.
from maputnik.
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
- Draw some wireframes for the editor
- Review does from a cartographer standpoint of view (Gretchen Peterson) to check whether flow makes sense
- Terranodo can produce a nice looking design based on that
- Implement it
from maputnik.
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.
from maputnik.
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.
from maputnik.
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.
from maputnik.
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.
from maputnik.
I think I found my UX style now (design has been the most difficult part actually - the rest is very straightforward).
from maputnik.
Related Issues (20)
- Where to see currently available MapLibre GL JS version HOT 2
- Add support for terrain settings HOT 3
- Reduce docker image size
- [react18] Replace react-aria-menubutton with react-select HOT 4
- Remove storybook HOT 1
- Live performance benchmarks HOT 1
- Migration fix-ups in https://maplibre.org/maputnik HOT 2
- Run old versions of Maputnik HOT 3
- Why does https://maplibre.org/maputnik fetch http://localhost:8000/styles ? HOT 7
- [Feature] let us filter! HOT 2
- Inspect's popup truncates the property values HOT 4
- MapTiler Access Token does not get added to URLs HOT 5
- Cannot type "0.5" in an Opacity field
- Re-initialize map view after changing style HOT 22
- Switching to OpenLayers and back to MapLibre hides all styles HOT 1
- `maputnik.github.io` should use `maplibre.org/maputnik` editor HOT 6
- unable to upload style HOT 5
- Tiles do not load when first loading another style HOT 4
- Upgrade codemirror
- add toggle `localIdeographFontFamily` options of MapLibre GL JS for CJK fonts HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from maputnik.