Emerald: unify and improve visual style about mapbox-gl-styles HOT 8 CLOSED

place all your land use colors next to each other / on top of each other and make sure they look good, ect.

@peterqliu To check out lots of examples of which features commonly overlap each other, you can use the "places" bookmarks in Mapbox Studio to search for various features in styles that uses Streets and Terrain (would be great if we still had this implemented in the Editor, so you could view these places directly in Emerald, but I think checking it out in Mapbox Studio is still helpful).

Redraw highway icons if you need to have harmonious stroke widths and padding

Let me know if you want a hand with anything!

from mapbox-gl-styles.

I spent some time today working on a more cohesive color palette.

With this new palette, I'm advocating for a design that is directly descendent from Mapbox Streets. Mapbox Streets has brand recognition and when we launch on mobile, should try to retain it:

The palette doesn't include everything (For example, I just barely touch on line styles), but it covers pretty good ground and should serve as a solid starting point.

I turned all these colors into style json constants:

    "constants": {
        "@halo": "#ffffff",
        "@background_fill": "#e8e0d8",
        "@building_base": "#d2cbc3",
        "@building_roof": "#dfd8d0",
        "@label_primary": "#3a3836",
        "@label_secondary": "#936d49",
        "@label_park": "#bdd98c",
        "@label_water": "#dcedf9",
        "@road_motorway_fill": "#ed973e",
        "@road_trunk_fill": "#e9c248",
        "@road_case": "#ffffff",
        "@landcover_fill": "#bdd98c",
        "@water_fill": "#73b6e6",
        "@landuse_hospital_fill": "#f0caca",
        "@landuse_industrial_fill": "#dbcde3",
        "@landuse_school_fill": "#f3e9c9",
        "@landuse_sand_fill": "#f0dfaf",
        "@landuse_pitch_fill": "#a3c87b",
        "@landuse_cemetery_fill": "#b0d183",
        "@landuse_parks_fill": "#bdd98c",
    }

from mapbox-gl-styles.

Did some reorg today of poi labels, road labels, oneway arrows, and other high zoom level labeling. This was mainly to improve label density, hierarchy, and classification.

Will merge this into AJ's stylesheet tomorrow morning. Tomorrow I'm mainly going to look at getting all the highway shield variations into the style, and then tweaking line geometries (mainly roads).

from mapbox-gl-styles.

@ajashton @samanpwbb Good news – I was wrong earlier...this totally works:

"icon-image": {
"stops": [[12, "{shield}_{reflen}sm"], [13, "{shield}{reflen}"]]
},

So I reorganized the shields into two layers: all variations of interstate in one layer, everything else in another (so we can make the interstate text white). This will look very broken until Saman makes a sprite that includes ALL the shield varieties, in two sizes. @samanpwbb the current live style has different text sizes for the different shield types, but I think that all shields should look good with the same text size in them. If they don't, I think the icons should be adjusted since the shield system is intended so you can style all shields in one code block.

from mapbox-gl-styles.

@samanpwbb can you describe how these colors are more unified and improved? It certainly looks more like the Streets style, but also more clashing and more disharmonious to me. Compare the current palette with the previous:

vs.

So far, this seems more like a preference for bold colors, than outright improvement. Actualy, if the goal is a less obtrusive palette for developers to put stuff on top of, then I feel it's much less successful.

from mapbox-gl-styles.

With this new palette, I'm advocating for a design that is directly descendent from Mapbox Streets

I agree that Streets is a great style in its own right, but a big reason we're launching with Emerald is that it's stylistically similar to Google and Apple. In order to convince developers to take the risk with Mapbox, I think the most important feeling to foster is legitimacy and familiarity, and the style goes a long way in providing that reassurance. Whatever brand recognition Mapbox Streets wields still (as yet) pales in comparison to these incumbents.

from mapbox-gl-styles.

Once we get the style using constants it'll be really easy to swap palettes. Let's do that first and iterate from there.

from mapbox-gl-styles.

Closing, lets make this two separate maps.

from mapbox-gl-styles.