Style spec: provide a mechanism for composing styles
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
tl;dr: The style spec needs a mechanism that allows for 'composing' styles / style layers.
A common use case for GL JS and GL Native is dynamically annotating an otherwise static "basemap" style with markers, routelines, areas-of-interest, etc. This poses difficulties at present, because the dynamic layers usually need to be placed somewhere in the middle of the "basemap" layers, which means:
- Knowing where in the stack to place the layer depends on detailed knowledge of the basemap style's implementation. Concretely, this often means inspecting Mapbox-provided styles like Mapbox Streets or Outdoors to find the right layer id before which to insert new layers, and hardcoding that layer id into a site/app's implementation.
- Manipulating style layers in an unweildy manner. Especially if the dynamic content involves adding/updating more than just one or two style layers, using the basic
addLayer(),set{PaintLayout}Property()APIs can lead to spaghetti-like 🍝 code.
"Smart setStyle" could provide some relief on number 2, since it allows authors to just write a function that produces the style they want. However, without a mechanism for composing styles, it only moves the problem, it doesn't solve it: a 'reactive' style-building function would still have to do ad-hoc surgery on the basemap to produce the desired style.
Existing proposals:
- "placeholder areas" or "marks": add a way to identify a certain stack of layers or a certain location in the list of layers within a style, so that those stacks / locations can be referred to in, e.g.,
addLayer()(and maybe things like toggling visibility). - "nested styles": add a
stylelayer type that recursively includes the layers from a different style, so that basemap styles could be shipped in multiple pieces (mapbox-streets-v9-bottom,mapbox-streets-v9-top) that authors could combine with their own layers.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the existing addLayer(), set{PaintLayout}Property(), and setStyle() APIs with the proposals in issues 4173 and 4000. Define a concrete composition model and its interaction with layer ordering before identifying implementation and test entry points; done means the style spec supports composing basemap and dynamic layers without hardcoded layer IDs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100