Add identity function example

[sarahkleins]

Launch Checklist

• Briefly describe the changes in this PR
• Code review @lucaswoj @mollymerp
• Copy and style review

This PR adds an example using the identity function for data-driven styling, responding to this issue.

[lucaswoj]

All that's visible of this title in the page's fixed-width sidebar is

Style lines using data-driven styling an..

Is there a way we can word the title to capture the intent of the example ("Add identity function example")
visible in the sidebar? Perhaps one of these titles:

Style lines using an identity property function
Style lines using an identity function
Style using an identity function
Style using an identity property function

[lucaswoj]

You can use the string 'red' here 😄

'properties': {
    'color': 'red',
}

[sarahkleins]

Thanks @lucaswoj! I added the red and blue variables here to show the output color is controllable (the colors are a little more muted than the 'red' and 'blue' string output). But if you think the string should be here can certainly change.

[lucaswoj]

This example would be more readable if we used simpler geometries (shorter lines, fewer lines, or points)

[lucaswoj]

We have a standard of using inline sources when there is a 1 source : 1 layer relationship. See #3901 for an example and a little more context.

[sarahkleins]

@lucaswoj Sorry 😬 I'm a little unclear on this -- should the source obj be added as the value to the layer's source property?

[mollymerp]

yep instead of calling map.addSource separately, you can declare the source inline in the addLayer function

map.addLayer({
  id: 'lines', // this will be the layer _and_ source id
  type: 'line',
  source: {
    type: 'geojson',
    data: {...}
  },
  paint: {...}
})

[lucaswoj]

Instead, the property value (in this case, 'color') on the datasource source will be the direct output.

The word "source" is more idiomatic than "datasource" in the context of Mapbox GL.

[lucaswoj]

The indentation here looks a little off

[sarahkleins]

Good for another round of review here @mollymerp @lucaswoj

[mollymerp]

@sarahkleins the tests are failing on eslint, so once that is fixed (npm run lint -- --fix should get rid of most of them) and all the tests pass go ahead and merge.