L.Control.Credits

A Leaflet control for displaying credits in the corner. Displays an image/logo, and clicking that image/logo will expand to show a brief message with credits and links.

https://github.com/GreenInfo-Network/Leaflet-Control-Credits

https://greeninfo-network.github.io/Leaflet-Control-Credits/

Installation

See index.html for a demo.

Two files are required: leaflet-constrol-credits.js and leaflet-constrol-credits.css

<script type="text/javascript" src="dist/leaflet-control-credits.js"></script>
<link rel="stylesheet" href="dist/leaflet-control-credits.css" />

Then add the control.

L.controlCredits({
    imageurl: './greeninfo.png',
    tooltip: 'Made by GreenInfo Network',
    width: '45px',
    height: '45px',
    expandcontent: 'Interactive mapping<br/>by <a href="https://www.greeninfo.org/" target="_blank">GreenInfo Network</a>',
}).addTo(map);

Options

• imageurl - URL of the image to display in the button.
• width - Specify width of the button & image. Default is 50px
• height - Specify height of the button & image. Default is 50px
• tooltip - A tooltip message displayed when the button is hovered. This is also the ARIA label for the button.
• expandcontent - HTML string which will be displayed on the left when the image/logo button is clicked.

Methods

• expandUi() - Expand the UI to show the left-side HTML content.
• collapseUi() - Collapse the UI to hide the left-side HTML content.
• toggleUi() - Expand the UI if currently collapsed, or collapse if currently expanded.
• isExpanded() - Return true if the content is currently expanded, false if not.
• setHtml(html) - Replace the expanded content with new HTML.