Default attribution (#3618)

* Set attribution to be on by default

* Update logo

* Fix lint

* Add changelog

* Fixed tests

* Update change log, update map API

* Update README.md

* Fix build and definitions

* Add more time to test

* Updated a note about attribution

* reduce changes in tests

* Revert icon change

* revert size change, add logo example

* revert unneeded changes

Author: HarelM

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### ✨ Features and improvements
 
+- ⚠️ Change attribution to be on by default, change `MapOptions.attributionControl` to be the type that the control handles, removed `MapOptions.customAttribution` ([#3618](https://github.com/maplibre/maplibre-gl-js/issues/3618))
+Note: showing the logo of MapLibre is not required for using MapLibre.
 - ⚠️ Changed cooperative gesture config and removed the strings from it in favor of the locale variable ([#3621](https://github.com/maplibre/maplibre-gl-js/issues/3621))
 - ⚠️ Changed the terrain enable disable locale key to match the other keys' styles, updated the typings to allow using locale with more ease ([#3621](https://github.com/maplibre/maplibre-gl-js/issues/3621))
 - Add "opacity" option and "setOpacity" method to Marker ([#3620](https://github.com/maplibre/maplibre-gl-js/pull/3620))
@@ -13,6 +15,7 @@
 ## 4.0.0-pre.5
 
 ### ✨ Features and improvements
+
 - ⚠️ Remove all global getters and setters from `maplibregl`, this means the the following methods have changed:
   `maplibregl.version` => `getVersion()`
   `maplibregl.workerCount` => `getWorkerCount()`, `setWorkerCount(...)`
@@ -21,6 +24,7 @@
   This is to avoid the need to use a global object and allow named exports/imports ([#3601](https://github.com/maplibre/maplibre-gl-js/issues/3601))
 
 ### 🐞 Bug fixes
+
 - Fix wheel zoom to be into the same direction above or under the horizon ([#3398](https://github.com/maplibre/maplibre-gl-js/issues/3398))
 - Fix _cameraForBoxAndBearing not fitting bounds properly when using asymettrical camera viewport and bearing.
 

README.md

@@ -1,4 +1,6 @@
-![MapLibre Logo](https://maplibre.org/img/maplibre-logo-big.svg)
+<p align="center">
+  <img src="https://maplibre.org/img/maplibre-logo-big.svg" alt="MapLibre Logo">
+</p>
 
 # MapLibre GL JS
 

src/css/svg/maplibregl-ctrl-logo.svg

@@ -7,7 +7,7 @@ import type {StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
 /**
  * The {@link AttributionControl} options object
  */
-type AttributionControlOptions = {
+export type AttributionControlOptions = {
     /**
      * If `true`, the attribution control will always collapse when moving the map. If `false`,
      * force the expanded attribution control. The default is a responsive attribution that collapses when the user moves the map on maps less than 640 pixels wide.
@@ -20,6 +20,11 @@ type AttributionControlOptions = {
     customAttribution?: string | Array<string>;
 };
 
+export const defaultAtributionControlOptions: AttributionControlOptions = {
+    compact: true,
+    customAttribution: '<a href="https://maplibre.org/" target="_blank">MapLibre</a>'
+};
+
 /**
  * An `AttributionControl` control presents the map's attribution information. By default, the attribution control is expanded (regardless of map width).
  * @group Markers and Controls
@@ -34,7 +39,7 @@ type AttributionControlOptions = {
 export class AttributionControl implements IControl {
     options: AttributionControlOptions;
     _map: Map;
-    _compact: boolean;
+    _compact: boolean | undefined;
     _container: HTMLElement;
     _innerContainer: HTMLElement;
     _compactButton: HTMLElement;
@@ -46,7 +51,7 @@ export class AttributionControl implements IControl {
     /**
      * @param options - the attribution options
      */
-    constructor(options: AttributionControlOptions = {}) {
+    constructor(options: AttributionControlOptions = defaultAtributionControlOptions) {
         this.options = options;
     }
 
@@ -57,7 +62,7 @@ export class AttributionControl implements IControl {
     /** {@inheritDoc IControl.onAdd} */
     onAdd(map: Map) {
         this._map = map;
-        this._compact = this.options && this.options.compact;
+        this._compact = this.options.compact;
         this._container = DOM.create('details', 'maplibregl-ctrl maplibregl-ctrl-attrib');
         this._compactButton = DOM.create('summary', 'maplibregl-ctrl-attrib-button', this._container);
         this._compactButton.addEventListener('click', this._toggleAttribution);

src/ui/control/attribution_control.test.ts

@@ -5,7 +5,7 @@ export const defaultLocale = {
     'FullscreenControl.Exit': 'Exit fullscreen',
     'GeolocateControl.FindMyLocation': 'Find my location',
     'GeolocateControl.LocationNotAvailable': 'Location not available',
-    'LogoControl.Title': 'Mapbox logo',
+    'LogoControl.Title': 'MapLibre logo',
     'NavigationControl.ResetBearing': 'Reset bearing to north',
     'NavigationControl.ZoomIn': 'Zoom in',
     'NavigationControl.ZoomOut': 'Zoom out',

src/ui/control/attribution_control.ts

@@ -15,7 +15,7 @@ import {Camera, CameraOptions, CameraUpdateTransformFunction, FitBoundsOptions}
 import {LngLat} from '../geo/lng_lat';
 import {LngLatBounds} from '../geo/lng_lat_bounds';
 import Point from '@mapbox/point-geometry';
-import {AttributionControl} from './control/attribution_control';
+import {AttributionControl, AttributionControlOptions, defaultAtributionControlOptions} from './control/attribution_control';
 import {LogoControl} from './control/logo_control';
 import {RGBAImage} from '../util/image';
 import {Event, ErrorEvent, Listener} from '../util/evented';
@@ -91,14 +91,12 @@ export type MapOptions = {
      */
     bearingSnap?: number;
     /**
-     * If `true`, an {@link AttributionControl} will be added to the map.
-     * @defaultValue true
-     */
-    attributionControl?: boolean;
-    /**
-     * Attribution text to show in an {@link AttributionControl}. Only applicable if `options.attributionControl` is `true`.
+     * If set, an {@link AttributionControl} will be added to the map with the provided options.
+     * To disable the attribution control, pass `false`.
+     * Note: showing the logo of MapLibre is not required for using MapLibre.
+     * @defaultValue compact: true, customAttribution: "MapLibre ...".
      */
-    customAttribution?: string | Array<string>;
+    attributionControl?: false | AttributionControlOptions;
     /**
      * If `true`, the MapLibre logo will be shown.
      * @defaultValue false
@@ -371,7 +369,7 @@ const defaultOptions = {
     pitchWithRotate: true,
 
     hash: false,
-    attributionControl: true,
+    attributionControl: defaultAtributionControlOptions,
     maplibreLogo: false,
 
     failIfMajorPerformanceCaveat: false,
@@ -658,7 +656,7 @@ export class Map extends Camera {
         if (options.style) this.setStyle(options.style, {localIdeographFontFamily: options.localIdeographFontFamily});
 
         if (options.attributionControl)
-            this.addControl(new AttributionControl({customAttribution: options.customAttribution}));
+            this.addControl(new AttributionControl(typeof options.attributionControl === 'boolean' ? undefined : options.attributionControl));
 
         if (options.maplibreLogo)
             this.addControl(new LogoControl(), options.logoPosition);

src/ui/default_locale.ts

@@ -36,7 +36,7 @@ describe('test min build', () => {
         const decreaseQuota = 4096;
 
         // feel free to update this value after you've checked that it has changed on purpose :-)
-        const expectedBytes = 772550;
+        const expectedBytes = 773333;
 
         expect(actualBytes - expectedBytes).toBeLessThan(increaseQuota);
         expect(expectedBytes - actualBytes).toBeLessThan(decreaseQuota);

src/ui/map.ts

@@ -19,7 +19,8 @@
         container: 'map', // container id
         style: 'https://demotiles.maplibre.org/style.json', // style URL
         center: [0, 0], // starting position [lng, lat]
-        zoom: 1 // starting zoom
+        zoom: 1, // starting zoom
+        maplibreLogo: true
     });
 </script>
 </body>

test/build/min.test.ts

@@ -3,7 +3,7 @@
   "metadata": {
     "test": {
       "height": 256,
-      "operations": [["idle"], ["wait", 100]]
+      "operations": [["idle"], ["wait", 500]]
     }
   },
   "center": [