Make new behavior overridable; update docs and examples

changelog/upgrade-notes.md

@@ -2,6 +2,12 @@
 
 ### Next version
 
+#### Attributions are not collapsible for `ol/source/OSM`
+
+When a map contains a layer from a `ol/source/OSM` source, the `ol/control/Attribution` control will be shown with the `collapsible: false` behavior.
+
+To get the previous behavior, configure the `ol/control/Attribution` control with `collapsible: true`. 
+
 ### v5.2.0
 
 #### Removal of the `snapToPixel` option for `ol/style/Image` subclasses

examples/accessible.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
@@ -12,11 +11,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/canvas-tiles.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import {OSM, TileDebug} from '../src/ol/source.js';
@@ -20,11 +19,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: fromLonLat([-0.1275, 51.507222]),
     zoom: 10

examples/center.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -45,11 +44,6 @@ const map = new Map({
     vectorLayer
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 

examples/custom-controls.js

@@ -48,11 +48,7 @@ class RotateNorthControl extends Control {
 
 
 const map = new Map({
-  controls: defaultControls({
+  controls: defaultControls().extend([
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([
     new RotateNorthControl()
   ]),
   layers: [

examples/device-orientation.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {toRadians} from '../src/ol/math.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -16,11 +15,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 

examples/export-map.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -18,11 +17,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/export-pdf.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import WKT from '../src/ol/format/WKT.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -26,11 +25,6 @@ const vector = new VectorLayer({
 const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/feature-animation.js

@@ -2,7 +2,6 @@ import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import {unByKey} from '../src/ol/Observable.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {easeOut} from '../src/ol/easing.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -19,11 +18,6 @@ const map = new Map({
       })
     })
   ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   target: 'map',
   view: new View({
     center: [0, 0],

examples/geojson.js

@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Circle from '../src/ol/geom/Circle.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -174,11 +173,6 @@ const map = new Map({
     vectorLayer
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/geolocation-orientation.js

@@ -2,7 +2,6 @@ import Geolocation from '../src/ol/Geolocation.js';
 import Map from '../src/ol/Map.js';
 import Overlay from '../src/ol/Overlay.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import LineString from '../src/ol/geom/LineString.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
@@ -22,11 +21,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 

examples/geolocation.js

@@ -2,7 +2,6 @@ import Feature from '../src/ol/Feature.js';
 import Geolocation from '../src/ol/Geolocation.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -20,11 +19,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 

examples/igc.js

@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import IGC from '../src/ol/format/IGC.js';
 import {LineString, Point} from '../src/ol/geom.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -93,11 +92,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [703365.7089403362, 5714629.865071137],
     zoom: 9

examples/layer-clipping-webgl.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {WEBGL} from '../src/ol/has.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -20,11 +19,6 @@ if (!WEBGL) {
   const map = new Map({
     layers: [osm],
     target: 'map',
-    controls: defaultControls({
-      attributionOptions: {
-        collapsible: false
-      }
-    }),
     view: new View({
       center: [0, 0],
       zoom: 2

examples/layer-clipping.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
@@ -11,11 +10,6 @@ const osm = new TileLayer({
 const map = new Map({
   layers: [osm],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/layer-swipe.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -18,11 +17,6 @@ const bing = new TileLayer({
 const map = new Map({
   layers: [osm, bing],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/localized-openstreetmap.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js';
 
@@ -34,11 +33,6 @@ const map = new Map({
     openSeaMapLayer
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     maxZoom: 18,
     center: [-244780.24508882355, 5986452.183179816],

examples/min-max-resolution.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
@@ -26,11 +25,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [653600, 5723680],
     zoom: 5

examples/mouse-position.js

@@ -17,11 +17,7 @@ const mousePositionControl = new MousePosition({
 });
 
 const map = new Map({
-  controls: defaultControls({
+  controls: defaultControls().extend([mousePositionControl]),
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([mousePositionControl]),
   layers: [
     new TileLayer({
       source: new OSM()

examples/moveend.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {getBottomLeft, getTopRight} from '../src/ol/extent.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {toLonLat} from '../src/ol/proj.js';
@@ -14,11 +13,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/navigation-controls.js

@@ -6,11 +6,7 @@ import OSM from '../src/ol/source/OSM.js';
 
 
 const map = new Map({
-  controls: defaultControls({
+  controls: defaultControls().extend([
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([
     new ZoomToExtent({
       extent: [
         813079.7791264898, 5929220.284081122,

examples/permalink.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
@@ -29,11 +28,6 @@ const map = new Map({
       source: new OSM()
     })
   ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   target: 'map',
   view: new View({
     center: center,

examples/rotation.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
@@ -12,11 +11,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [14200000, 4130000],
     rotation: Math.PI / 6,

examples/scale-line.js

@@ -8,11 +8,7 @@ import OSM from '../src/ol/source/OSM.js';
 const scaleLineControl = new ScaleLine();
 
 const map = new Map({
-  controls: defaultControls({
+  controls: defaultControls().extend([
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([
     scaleLineControl
   ]),
   layers: [

examples/teleport.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
@@ -11,11 +10,6 @@ const map = new Map({
       source: new OSM()
     })
   ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/vector-osm.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import OSMXML from '../src/ol/format/OSMXML.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {bbox as bboxStrategy} from '../src/ol/loadingstrategy.js';
@@ -121,11 +120,6 @@ const raster = new TileLayer({
 map = new Map({
   layers: [raster, vector],
   target: document.getElementById('map'),
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [739218, 5906096],
     maxZoom: 19,

examples/wmts-ign.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {getWidth} from '../src/ol/extent.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat, get as getProjection} from '../src/ol/proj.js';
@@ -10,11 +9,6 @@ import WMTSTileGrid from '../src/ol/tilegrid/WMTS.js';
 
 const map = new Map({
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     zoom: 5,
     center: fromLonLat([5, 45])

examples/wmts.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {getWidth, getTopLeft} from '../src/ol/extent.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {get as getProjection} from '../src/ol/proj.js';
@@ -48,11 +47,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [-11158582, 4813697],
     zoom: 4

src/ol/control/Attribution.js

@@ -16,9 +16,9 @@ import {visibleAtResolution} from '../layer/Layer.js';
  * @property {HTMLElement|string} [target] Specify a target if you
  * want the control to be rendered outside of the map's
  * viewport.
- * @property {boolean} [collapsible=true] Specify if attributions can
+ * @property {boolean} [collapsible] Specify if attributions can
- * be collapsed. If you use an OSM source, should be set to `false` — see
+ * be collapsed. If not specified, sources control this behavior with their
- * {@link https://www.openstreetmap.org/copyright OSM Copyright} —
+ * `attributionsCollapsible` setting.
  * @property {boolean} [collapsed=true] Specify if attributions should
  * be collapsed at startup.
  * @property {string} [tipLabel='Attributions'] Text label to use for the button tip.
@@ -70,6 +70,12 @@ class Attribution extends Control {
      */
     this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;
 
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.overrideCollapsible_ = options.collapsible !== undefined;
+
     /**
      * @private
      * @type {boolean}
@@ -145,12 +151,12 @@ class Attribution extends Control {
   }
 
   /**
-   * Get a list of visible attributions.
+   * Collect a list of visible attributions and set the collapsible state.
    * @param {import("../PluggableMap.js").FrameState} frameState Frame state.
    * @return {Array<string>} Attributions.
    * @private
    */
-  getSourceAttributions_(frameState) {
+  collectSourceAttributions_(frameState) {
     /**
      * Used to determine if an attribution already exists.
      * @type {!Object<string, boolean>}
@@ -186,9 +192,8 @@ class Attribution extends Control {
         continue;
       }
 
-      const collapsible = source.getAttributionsCollapsible();
+      if (!this.overrideCollapsible_ && source.getAttributionsCollapsible() === false) {
-      if (collapsible !== undefined && !collapsible) {
+        this.setCollapsible(false);
-        this.setCollapsible(collapsible);
       }
 
       if (Array.isArray(attributions)) {
@@ -221,7 +226,7 @@ class Attribution extends Control {
       return;
     }
 
-    const attributions = this.getSourceAttributions_(frameState);
+    const attributions = this.collectSourceAttributions_(frameState);
 
     const visible = attributions.length > 0;
     if (this.renderedVisible_ != visible) {

test/spec/ol/control/attribution.test.js

@@ -95,4 +95,23 @@ describe('ol.control.Attribution', function() {
     expect(attribution.length).to.be(1);
   });
 
+  it('renders attributions as collapsible if configured with collapsible set to true', function() {
+    map.getControls().clear();
+    map.addControl(new Attribution({collapsible: true}));
+    const source = new TileSource({
+      projection: 'EPSG:3857',
+      tileGrid: createXYZ(),
+      attributions: 'foo',
+      attributionsCollapsible: false
+    });
+    source.getTile = tileLoadFunction;
+    map.addLayer(new TileLayer({
+      source: source
+    }));
+    map.renderSync();
+
+    const attribution = map.getTarget().querySelectorAll('.ol-attribution.ol-uncollapsible');
+    expect(attribution.length).to.be(0);
+  });
+
 });