mapbox / mapbox/mapbox-gl-js

Option to keep certain styles and layers on setStyle()

Open
#4,006 35 comments 43 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature :green_apple: needs discussion :speech_balloon:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

> Injecting custom layers into Mapbox core styles is a common use case and confusing to users, especially when a user wants to swap out the core style and keep the custom layers.

## Design Alternatives

#3979 current approach
#4000 alternative approach (draw-back: need for predefined nested styles)

## Design

I would like to suggest an option that would allow the user to copy some layers/sources over to a new style to keep them after setting a new style.

### Mock-Up

```JS
//layers appended to the end of the new layer array (in order)
setStyle('mapbox://styles/mapbox/' + layerId + '-v9', {
copySources: ['states'],
copyLayers: ['states']
})

// layer added before another layer in the new layer array (like addLayer(layer, before))
setStyle('mapbox://styles/mapbox/' + layerId + '-v9', {
copySources: ['states'],
copyLayers: [{'states':'waterway-label' }]
})
```
OR

```JS
//layers appended to the end of the new layer array (in order)
setStyle('mapbox://styles/mapbox/' + layerId + '-v9', {
copy: {
sources: ['states'],
layers: ['states']
}
})

```

### Concepts

It would work like a normal setStyle but after the new style is loaded the copying from the old to the new style would take place before the map gets updated.

### Implementation

the copying-code likely could get called at the end of the style-diffing procedure and could look something like that lodash-pseudocode:
```JS
var style = _.union( newStyle, _.pick( oldStyle, copyoption ))
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the setStyle entry point and the style-diffing procedure mentioned in the issue. Compare the proposed copySources/copyLayers and nested copy options, then determine how selected sources and layers should carry into a replacement style; done means the chosen items persist after setStyle without disrupting the new style.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.