Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

org.webjars.npm:leaflet-easybutton

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

org.webjars.npm:leaflet-easybutton

WebJar for leaflet-easybutton

  • 2.4.0
  • Source
  • Maven
  • Socket score

Version published
Maintainers
1
Source

L.EasyButton

The easiest way to add buttons with Leaflet — so simple it fits in a gif:

running demo

More running examples and docs


Boilerplate Examples

These use YOUR_LEAFLET_MAP as a placeholder; remember to change it to the variable name of your map.

Hello World

open a popup

var helloPopup = L.popup().setContent('Hello World!');

L.easyButton('fa-globe', function(btn, map){
    helloPopup.setLatLng(map.getCenter()).openOn(map);
}).addTo( YOUR_LEAFLET_MAP );
Map State

set the map's center and use an img for the icon

L.easyButton('<img src="/path/to/img/of/penguin.png">', function(btn, map){
    var antarctica = [-77,70];
    map.setView(antarctica);
}).addTo( YOUR_LEAFLET_MAP );
Button States

change the button's function and appearance

var stateChangingButton = L.easyButton({
    states: [{
            stateName: 'zoom-to-forest',        // name the state
            icon:      'fa-tree',               // and define its properties
            title:     'zoom to a forest',      // like its title
            onClick: function(btn, map) {       // and its callback
                map.setView([46.25,-121.8],10);
                btn.state('zoom-to-school');    // change state on click!
            }
        }, {
            stateName: 'zoom-to-school',
            icon:      'fa-university',
            title:     'zoom to a school',
            onClick: function(btn, map) {
                map.setView([42.3748204,-71.1161913],16);
                btn.state('zoom-to-forest');
            }
    }]
});

stateChangingButton.addTo( YOUR_LEAFLET_MAP );

Download/Install

EasyButton version 2.x.x and up expect Leaflet 1.x.x or higher; for Leaflet 0.7.x use EasyButton 1.3.x.

jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

NPM

npm install --save leaflet-easybutton

Bower

bower install --save Leaflet.EasyButton

Icon Dependencies

If you haven't already, make sure to install/include the icon library of your choice (your lib should have its own instructions) — EasyButton should work with anything!

FAQs

Package last updated on 04 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc