Allow a default lightPreset value
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
## Motivation
Related to https://github.com/mapbox/mapbox-gl-js/issues/12841
Currently, setting the map theme is done after the style is loaded:
```js
map.on('style.load', () => {
map.setConfigProperty('basemap', 'lightPreset', 'night')
})
```
One issue with waiting for the style to load before setting the `lightPreset` value is that if you want a default 'night' then you get a flash of light gray `#f3f0ef` before it sets the colors for the 'night' style.
This flash of gray occurs on initial map load as well as when switching back and forth between styles e.g. satellite.
## Design Alternatives
The current workaround is to provide a full `style` hash while initializing the map:
```js
const map = new mapboxgl.Map({
center: [29, 29],
container: 'map',
minZoom: 1,
projection: 'mercator',
zoom: 1,
style: {
version: 8,
imports: [
{
id: 'basemap',
url: 'mapbox://styles/mapbox/standard',
config: {
lightPreset: 'night',
}
}
],
sources: {},
layers: []
}
})
```
If there's code in place that changes `lightPreset` to 'day' for some visitors (e.g. a site setting to choose day/night/system themes) then their version of the map will get a brief flash of a dark color, but it feels a bit less impactful than the reverse.
~~My main worry with this approach is whatever that `version` is, because changing it breaks the map. I'm unsure if the expectation of `8` is hard coded in the version of Mapbox GL JS in use, or if that's set/expected in a place independent of package updates.~~ The `version` is just [required to be 8](https://docs.mapbox.com/style-spec/reference/root/#version) 🤷
If `lightPreset` was a top-level configuration option on the Map (along with bearing, center, etc), the map could initially load in the chosen color theme and we wouldn't receive flashes of the opposite color.
## Design
### Mock-Up
```js
const map = new mapboxgl.Map({
center: [29, 29],
container: 'map',
minZoom: 1,
projection: 'mercator',
zoom: 1,
lightPreset: 'night'
})
```
### Concepts
### Implementation
🤷 I don't know enough of the internal code to know how to implement this or - to be fair - whether it's possible in the current state.
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 tracing the map constructor options, style.load handling, and setConfigProperty('basemap', 'lightPreset', ...) behavior described in the issue. Determine whether a top-level lightPreset can be applied before the initial style renders and how it should behave when styles switch. Done means the initial map uses the requested preset without a flash of the opposite theme, with the relevant behavior covered by tests if existing coverage is found.
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
- 30/100