Hide attribution container if empty so as not to show in compact maps

dist/mapbox-gl.css

@@ -214,6 +214,9 @@ a.mapboxgl-ctrl-logo {
     font-weight: bold;
     margin-left: 2px;
 }
+.mapboxgl-attrib-empty {
+    display: none;
+}
 /*stylelint-enable*/
 .mapboxgl-ctrl-scale {
     background-color: rgba(255,255,255,0.75);

src/ui/control/attribution_control.js

@@ -131,7 +131,12 @@ class AttributionControl {
             }
             return true;
         });
-        this._container.innerHTML = attributions.join(' | ');
+        if (attributions.length) {
+            this._container.innerHTML = attributions.join(' | ');
+            this._container.classList.remove('mapboxgl-attrib-empty');
+        } else {
+            this._container.classList.add('mapboxgl-attrib-empty');
+        }
         // remove old DOM node from _editLink
         this._editLink = null;
     }

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

@@ -121,3 +121,39 @@ test('AttributionControl has the correct edit map link', (t) => {
         });
     });
 });
+
+test('AttributionControl is hidden if empty', (t) => {
+    const map = createMap();
+    const attribution = new AttributionControl();
+    map.addControl(attribution);
+    map.on('load', () => {
+        map.addSource('1', { type: 'vector' });
+    });
+
+    const container = map.getContainer();
+
+    const checkEmptyFirst = () => {
+        t.equal(attribution._container.innerHTML, '');
+        t.equal(container.querySelectorAll('.mapboxgl-attrib-empty').length, 1, 'includes empty class when no attribution strings are provided');
+
+        map.addSource('2', { type: 'vector', attribution: 'Hello World' });
+    };
+
+    const checkNotEmptyLater = () => {
+        t.equal(attribution._container.innerHTML, 'Hello World');
+        t.equal(container.querySelectorAll('.mapboxgl-attrib-empty').length, 0, 'removes empty class when source with attribution is added');
+        t.end();
+    };
+
+    let times = 0;
+    map.on('data', (e) => {
+        if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
+            times++;
+            if (times === 1) {
+                checkEmptyFirst();
+            } else if (times === 2) {
+                checkNotEmptyLater();
+            }
+        }
+    });
+});