mapbox / mapbox/mapbox-gl-js

Allow a default lightPreset value

Open
#13,001 0 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged feature :green_apple:
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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.