Add customAttribution option to AttributionControl (#7033)

* Add customAttribution option to AttributionControl

* code review fixes

* Assert sort order in test

* Remove incorrect attribution order docs

src/ui/control/attribution_control.js

@@ -7,7 +7,8 @@ import config from '../../util/config';
 import type Map from '../map';
 
 type Options = {
- compact?: boolean
+ compact?: boolean,
+ customAttribution?: string | Array<string>
 };
 
 /**
@@ -16,6 +17,7 @@ type Options = {
  * @implements {IControl}
  * @param {Object} [options]
  * @param {boolean} [options.compact] If `true` force a compact attribution that shows the full attribution on mouse hover, or if `false` force the full attribution control. The default is a responsive attribution that collapses when the map is less than 640 pixels wide.
+ * @param {string | Array<string>} [options.customAttribution] String or strings to show in addition to any other attributions.
  * @example
  * var map = new mapboxgl.Map({attributionControl: false})
  * .addControl(new mapboxgl.AttributionControl({
@@ -111,6 +113,13 @@ class AttributionControl {
  _updateAttributions() {
  if (!this._map.style) return;
  let attributions: Array<string> = [];
+ if (this.options.customAttribution) {
+ if (Array.isArray(this.options.customAttribution)) {
+ attributions = attributions.concat(this.options.customAttribution);
+ } else if (typeof this.options.customAttribution === 'string') {
+ attributions.push(this.options.customAttribution);
+ }
+ }
 
  if (this._map.style.stylesheet) {
  const stylesheet: any = this._map.style.stylesheet;

src/ui/map.js

@@ -61,6 +61,7 @@ type MapOptions = {
  container: HTMLElement | string,
  bearingSnap?: number,
  attributionControl?: boolean,
+ customAttribution?: string | Array<string>,
  logoPosition?: ControlPosition,
  failIfMajorPerformanceCaveat?: boolean,
  preserveDrawingBuffer?: boolean,
@@ -175,6 +176,7 @@ const defaultOptions = {
  * @param {boolean} [options.pitchWithRotate=true] If `false`, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
  * @param {number} [options.clickTolerance=3] The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).
  * @param {boolean} [options.attributionControl=true] If `true`, an {@link AttributionControl} will be added to the map.
+ * @param {string | Array<string>} [options.customAttribution] String or strings to show in an {@link AttributionControl}. Only applicable if `options.attributionControls` is `true`.
  * @param {string} [options.logoPosition='bottom-left'] A string representing the position of the Mapbox wordmark on the map. Valid options are `top-left`,`top-right`, `bottom-left`, `bottom-right`.
  * @param {boolean} [options.failIfMajorPerformanceCaveat=false] If `true`, map creation will fail if the performance of Mapbox
  * GL JS would be dramatically worse than expected (i.e. a software renderer would be used).
@@ -380,7 +382,7 @@ class Map extends Camera {
 
  if (options.style) this.setStyle(options.style, { localIdeographFontFamily: options.localIdeographFontFamily });
 
- if (options.attributionControl) this.addControl(new AttributionControl());
+ if (options.attributionControl) this.addControl(new AttributionControl({ customAttribution: options.customAttribution }));
  this.addControl(new LogoControl(), options.logoPosition);
 
  this.on('style.load', function() {

test/unit/ui/control/attribution.test.js

@@ -154,3 +154,28 @@ test('AttributionControl is hidden if empty', (t) => {
  }
  });
 });
+
+test('AttributionControl shows custom attribution if customAttribution option is provided', (t) => {
+ const map = createMap(t);
+ const attributionControl = new AttributionControl({
+ customAttribution: 'Custom string'
+ });
+ map.addControl(attributionControl);
+
+ t.equal(attributionControl._container.innerHTML, 'Custom string');
+ t.end();
+});
+
+test('AttributionControl shows all custom attributions if customAttribution array of strings is provided', (t) => {
+ const map = createMap(t);
+ const attributionControl = new AttributionControl({
+ customAttribution: ['Some very long custom string', 'Custom string', 'Another custom string']
+ });
+ map.addControl(attributionControl);
+
+ t.equal(
+ attributionControl._container.innerHTML,
+ 'Custom string | Another custom string | Some very long custom string'
+ );
+ t.end();
+});