Styles local to layers

[edenh]

Opening this as a separate ticket as mapbox/mapbox-gl-js#356 is getting long.

An alternative to the current separation between layers and styles is to define the style inline, which might be a little easier to understand. The current separation is more readable for ordering, so maybe this can be an alternative syntax that builds the style classes.

I'm thinking something like this, where the two classes are 'default' and 'night':

{
  "buckets": [
    {
      "id": "background"
      "style": {
        "day": {
          "fill-color": "#fff"
        },
        "night": {
          "fill-color": "#333"
        }
      }
    },
    {
      "id": "osm-bright",
      "filter": {"source": "osm-bright"},
      "layers": [
        {
          "id": "waterway_other",
          "filter": {
            "layer": "waterway",
            "$or": [
              {"type": "ditch"},
              {"type": "drain"}
            ]
          },
          "style": {
            "day": {
              "line-color": "blue",
              "line-width": 5,
              "line-cap": "round"
            },
            "night": {
              "line-color": "black",
              "line-width": 4,
              "line-cap": "round"
            }
          }
        }
      ]
    }
  ]
}

cc @ansis @mourner @tmcw

[mourner]

Adding or removing a class in this case would be hell. :) And a lot more verbose in case of big styles like OSM Bright as you would specify default for every bucket. And of course we loose the clarity of structure. I think separation is better.

[edenh]

Yea, makes sense.