Leaflet.ToggleableAttribution

Minimalist Leaflet plugin to display the map attribution only when hovered on.

Check the demo!

Requirements

Developed with Leaflet 1.9.3 but so simple it probably works with other versions too.

Usage

Simply add the two files from the src folder to your project like below.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/L.Control.ToggleableAttribution.css"/>
<script src="https://unpkg.com/[email protected]/src/L.Control.ToggleableAttribution.js"></script>

Reference

The ToggleableAttribution control is automatically added to the map with default settings.

If you want to use a custom icon for the control, you need to:

1. Create the map with the toggleableAttributionControl option set to false to avoid creating the control automatically.
2. Create the ToggleableAttribution control with its constructor L.control.toggleableAttribution(options).

The options are the following: Option | Type | Default | Description --- | --- | --- | --- icon | String | i | HTML code for the icon shown when the attribution control is toggled off. prefix | String or false | 'Leaflet' | Inherited from L.Control.Attribution. The HTML text shown before the attributions. Pass false to disable. position | String | 'topright' | Inherited from L.Control. The position of the control (one of the map corners). Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright.'

Example

The example below adds a ToggleableAttribution control with an icon from Font Awesome.

var map = L.map('map', {
    toggleableAttributionControl: false // do not add the control automatically
}).setView([51.505, -0.09], 13);

L.control.toggleableAttribution({ // add the control with custom options
    icon: '<i class="fa-solid fa-circle-info"></i>'
}).addTo(map);

This code is used in the demo.

Styling

The icon can be styled by adding CSS rules to the leaflet-control-attribution-icon class. The attribution control itself can be styled by adding CSS rules to the leaflet-control-attribution class.