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();
+});