mapbox / mapbox/mapbox-gl-js

Ability to dynamically update 'customAttribution' value for AttributionControl

Open
#7,585 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation

Currently there is no easy/safe way to update the 'customAttribution' property for an 'AttributionControl'.

In my specific case, I am looking to use custom basemaps with Mapbox GL JS which has a range of imagery dates available based on the current region of the map being viewed. I would like to use the `AttributionControl` to firstly provide an attribution to the custom basemap providers, but also include the imagery date for the region of the map being viewed. This requires me to fetch and update the imagery date each time the map view is changed.

The current documentation/Typescript typings does not show any available properties for an `AttributionControl` object. However after logging the object, we can see that the following properties exist:
```
{
options: {
customAttribution: string
},
...,
_updateAttributions: () => void
}
```

In certain cases I have managed to update the customAttribution value as such (Typescript):
```
const attributionControl = new mapboxgl.AttributionControl({
customAttribution: ''
});
map.addControl(attributionControl, 'bottom-right');

const attributionValue = 'This is a test';
(attributionControl as any).options.customAttribution = attributionValue;
```

Which has worked successfully when the call is made just once. However attempting to update the `customAttribution` frequently causes no visible update in the DOM. In order to overcome this issue I have had to do add the following:
```
(attributionControl as any)._updateAttributions();
```

## Design Alternatives

N/A

## Design

It would be great if there could be a `setAttribution` function added to the `mapboxgl.AttributionControl` class to allow the user to dynamically change the `customAttribution` property, but perhaps the other `compact` property could do with a similar function.

### Mock-Up
As there is already a"private" and undocumented function `_updateAttributions()`, this could be implemented quite simply, e.g.:

```
// @types/mapbox-gl/index.d.ts
export class AttributionControl extends Control {
constructor(options?: { compact?: boolean, customAttribution?: string | string[] });
setAttribution(customAttribution: string): void;
}

// mapbox-gl/src/ui/control/attribution_control.js
class AttributionControl {
...
setAttribution(customAttribution: string) {
this.options.customAttribution = customAttribution;
this._updateAttributions();
}
...
}
```

### Concepts
N/A

### Implementation
As per mockup

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 with mapbox-gl/src/ui/control/attribution_control.js and the AttributionControl declaration in @types/mapbox-gl/index.d.ts. Read the existing _updateAttributions() flow, then verify that the public API updates customAttribution and the rendered attribution when called repeatedly; done means the behavior and TypeScript signature match the requested interface.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.