Skip to content

GreenInfo-Network/Leaflet-Control-Credits

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.