Hi previously you could add a title to the button so when someone hovers over it you can see what it is - can this be added back in or explain how this can be done . I see it can be done using the states array but seems a bit of an overkill is you just want a simple button with title and are not interested in state changes.
Any thoughts or is states the way to go - thanks

Thanks for your plugin, it works like a charm!
What would be the best way to remove the button during runtime again?

Can you please help.
I am trying to use Easybutton in this leaflet solution: [http://dail.aws.dk/]
It uses jQuery to swith between 2 pages (address search and the leaflet map).

When I try to use Easybutton I get this error: "Uncaught TypeError: Cannot read property 'apply' of undefined" (easy-button.js:316).

Best regard
Jhv

I compared the repo and my node_modules, I don't have easy-button.d.ts.

Any suggestions ?

Relates to my previous question it seems at some point the source css and js files were moved to the

src

directory - and no release was made with these changes.

My build failed as it could no longer find these files as they have moved.

In the future would it possible to tag any changes (especially breaking) as a new release v0.0.2 (or theoretically v0.1.0)

Thanks

Hi.
Tell me, please, have any the possibilities to change the state of the button, without pressing the button? for example, I have a single-page application, and when I click on the "Home" link, the button state must be changed to default

http://danielmontague.com/projects/easyButton.js/v1/examples/#animating-states

I did as the tutorial is explaining but the animation doesn't work prorperly in any browser.
After you click on the button the image is scaling to 0 but the next image isn't scaling to 1 to take his place, more exactly after further investigations the second image is scaling to 1 but the position is wrong.

To fix it i had to comment the position

 .easy-button-button .button-state{
  display: block;
  width: 100%;
  height: 100%;
  /*position: relative;*/
}

in easy-button.css

But if you comment this line the images in the button are no more in the center and so are ugly to see : http://puu.sh/nR0hB/90fc32dcaa.jpg

I thought I had an error but it was my stupidity. Thank you for this wonderful plug-in.

As a user when I click an easyButton button, a smaller dash line representing that it's being hovered over appears over the icon. However even after the button is clicked the dashed line remains and only disappears when user clicks somewhere else on screen.

Default buttons within Leaflet don't have this issue.

Could you please add a new parameter to the EasyButton creation? It would allow for a setting of a custom class to the element of the control.

Options in L.Control.EasyButtons would look something like this:

options: {
    position: 'topleft',
    title: '',
    intentedIcon: 'fa-circle-o',
    customBtnClass: ''
},

and then in the onAdd function:

this.link = L.DomUtil.create('a', 'leaflet-bar-part ' + this.options.customBtnClass, container);

and then of course the appropriate new parameter in the L.easyButton function.

Thank you very much!

The unpkg import is failing with a 404:
https://unpkg.com/[email protected]/src/easy-button.js

This works however:
https://unpkg.com/[email protected]

perhaps update documentation?

when I check version on bower using

bower list

it returns the following

L.EasyButton#bd1dd296cc

I would expect

L.EasyButton#0.0.1

Looking at the releases I see you have tagged a version v0 - Can I suggest you create another release i.e. v0.0.1 which follows the semantic versioning supported by bower.

We ran into an issue recently which seems to stem from the fact that the button element does not have the attribute type="button" on it. The problem this is causing is that an input elsewhere on the page will attempt to click on the easy button when a user focuses on the input and presses enter.

I believe this issue is related to: http://stackoverflow.com/questions/12325066/button-click-event-fires-when-pressing-enter-key-in-different-input-no-forms.

enough said

Hi, I submitted a request to add EasyButton on cdn.js

cdnjs/cdnjs#10741

I don't entirely know what I'm doing, hopefully it looks about right. If not, please feel free to delete/modify it.

As a user when a button is clicked the symbol of that button changes. Same would apply to to the tooltip text.

Hey,

how to refer to control.state of other buttons?

For example if you have two buttons: buttonA & buttonB:

how to set the control.state of buttonB via buttonA?

We've recently noticed that with Internet Explorer 11 button sizes are not always sizing properly to match the icon/glyph placed on the button, while Chrome, Firefox, and Safari render the buttons just fine. After a little trial and error, I seem to have narrowed this down to the the use of an explicit size of 26px in the definition of .leaflet-bar button:hover in easy-button.cs. If I change the width/height from 26px to 100%, the problem goes away and the button sizes render fine.

Old, before local change:
.leaflet-bar button,
.leaflet-bar button:hover {
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
width: 26px
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}

After change:
.leaflet-bar button,
.leaflet-bar button:hover {
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
width: 100%;
height: 100%;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}

Could someone please review this and see if a change is warranted to easy-button.cs?
Thanks,
Dave

Hello every one, how enable and disable a button, any example.

Thank you

hi,

Thanks for the plugin - quite useful. But I have been running into a problem when trying to remove the control. I have added the control using the sample code in the examples as shown below. But no matter which method I try it will throw one error or the other and I am unable to remove the control. I am using the lastest version of Easybutton and 1.x.x version of leaflet

var coffeeShopMap = L.map('disable-example', {scrollWheelZoom: false})
coffeeShopMap.setView({lat:37.45, lng:-122.17}, 14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(coffeeShopMap);

var findCoffee = L.easyButton( 'fa-coffee', function(control){
  alert('"expensive query here"');
  /* HERE I INTEND TO REMOVE THE BUTTON, AFTER CARRYING OUT SOME TASKS */
});

findCoffee.addTo(coffeeShopMap);

Now no matter what method I use ( I scoured the internet over this for hours now ), it will not remove the control. I get stack error when I replace 'removeFrom' with 'remove' as explained in other issue / post etc. Any pointers would be greatly helpful. This shouldn't have taken so much time as I am fairly ok with JS.

There is an easy way to change the button size?

Thanks.

Makes it easier to implement if I can just bower install --save leaflet.easybutton

How to implement drag from button to map and create a marker there?

Hello any question how enable and disable a button, any example in v0, it is more easy for me.

Thank you againt.

I saw that You can set title as tool tip of button but examples only show that is it available only in buttons with many states. Can I have a button with title in default behavior?

Hi please can you add this to bower if possible - thanks

Could You create a release of version 1.3.x, which is compatible with Leaflet 0.7.x, with TypeScript definitions? That could be very helpful.
Thank You in advance.

Browsing Bower makes it look like people (myself included) are pretty bad about following bower's package naming convention, even among leaflet-specific plugins.

@MarkAPhillips, It looks like you're the user here with the most bower experience; would you prefer the package to be named leaflet-easybutton or leaflet.easybutton?

Thanks!

I'm not sure if this is a problem that anyone has encountered but since I followed the same code from the example I thought it should not have a problem. I hope anyone could tell me what's wrong in my code below.

I tested out individual icons in separate easy buttons and it's valid. But using them in states, only the first (default icon) would show up. Upon clicking it to transition to the next state, the icon of that state does not show up.

 var animatedToggle = L.easyButton({
              id: 'animated-marker-toggle',
              type: 'animate',
              states: [{
                stateName: 'default-map',
                title: 'Default map',
                icon: 'fa fa-files-o',
                onClick: function(control) {
                  //remove side-by-side
                  control.state('trigger-side-by-side');
                }
              },{
                stateName: 'trigger-side-by-side',
                title: 'Network map',
                icon: 'fa fa-file-o',
                onClick: function(control) {
                  //add side-by-side control
                  control.state('default-map');
                }
              }]
            });
            animatedToggle.addTo(map);

Is it possible to place a button on 'bottomright' without using states?
If so, how?

Wow as easy as advertised (Thanks for making this!). Just one thing, in the docs the stateName and control.state calls don't have the same name, I made the two corrections below:

var scatteredMarkerMap = L.map('toggle-map', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scatteredMarkerMap);

var markerGroup = L.layerGroup([
      L.marker([37.8, -91]), L.marker([38.8, -86]), L.marker([47.8, -106]),
      L.marker([31.8, -90]), L.marker([39.8, -96]), L.marker([33.8, -100]) ]);

var toggle = L.easyButton({
  states: [{
//    stateName: 'adding-markers',
    stateName: 'add-markers',
    icon: 'fa-map-marker',
    title: 'add random markers',
    onClick: function(control) {
      scatteredMarkerMap.addLayer(markerGroup);
      control.state('remove-markers');
    }
  }, {
    icon: 'fa-undo',
//    stateName: 'removing-markers',
    stateName: 'remove-markers',
    onClick: function(control) {
      scatteredMarkerMap.removeLayer(markerGroup);
      control.state('add-markers');
    },
    title: 'remove markers'
  }]
});
toggle.addTo(scatteredMarkerMap);

Hi, this looks really useful - but what is the licence of the code?

please tag newer versions:

2.1.0 -> e511419
2.1.1 -> e390f88
2.2.0 -> e2ee29f

The bower.json and package.json files define Leaflet 0.7 as a depencency (BTW having two different version identifiers). As the release of Leaflet 1.0 is nearly final now:
Maybe you could add a note to the README which leaflet versions currently are supported by your plugin. That would help users who plan to update from Leaflet 0.7.x to 1.0

Love the idea for the plugin!

I tried to implement a super simple example using just an icon and an alert function, but I keep getting a leaflet.js error Cannot read property 'topleft' of undefined.

L.easyButton('fa-question', 
    function (){alert('I have a Question!')}
);

I'm using the current version of leaflet (V. 0.7.2), although I also tried the version listed in the demo site (V. 0.7.1).

Since I was unable to implement my own example, I tried copying one from the demo site, but there seems to be a syntax error. It looks like you're passing in an options object, but there is no opening curly brace. From the demo site:

L.easyButton('fa-strikethrough', 
    function (){
        $('h1').css('text-decoration','line-through')
    },
    'Interact with the document'
})

Maybe I'm missing something obvious, but here is a jsfiddle of where I am stuck.

Would it make sense to be able to set a custom style upon creation of an EasyButton the same way it is done here (i.e width, height, background image & color)? From what I tried, I wasn't able to set the style for a single element only in the leaflet-bar.

I believe the programmer should always explicitely provide the map to which this button shall be added, or at least have an option to not add the button to the map at the time the button is created.

This would allow adding of the previously created button dynamically at the programmer-specified time (which could help code organisation), or adding of one button with the same callback to multiple maps.

Another use case is the one I'm having now - I use Leaflet + AngularJS + Angular-Leaflet-Directive. Here I need to create the button beforehands and then "insert" it to the map by extending the $scope object. I don't really have any "map" object to pass to EasyButton. It looks something like this in angular controller:

angular.extend($scope, {
    controls: {
        custom: [ customLocateControl ]
    },
});

where customLocateControl is a button created beforehands. And then in the html

<leaflet controls="controls"></leaflet>

You see, only the HTML angular directive works with the map and inserts the controls.

I could use the EasyButton to create the customLocateControl if it didn't try to add the button to the map immediately upon creation.

how could I add one?

I want to put inside EasyButton a checkboxes or, for example, span block binded with bootstrap-daterangepicker. But I'm facing the issue under Firefox, when events doesn't go inside a button element:
https://jsfiddle.net/evxz483h/2/

Can you add an option which would allow to create button with div tag instead of button?
Or don't need to complicate EasyButton, and the better way is creating my own fork?

I noticed this on the Animated Toggle button example however it may apply to others as well just I have not checked.

http://danielmontague.com/projects/easyButton.js/v1/examples/#animated-toggle

As a user, when I click the Animated Toggle button in rapid succession the map also zooms in (By default the map zooms in on a double click event) It should not do this when clicking the button.

You need to have a function something like:

If cursor.onHover on animatedToggleButton:
disable.map.doubleclickToZoom;

Hey !

First, thanks for you work ;)

Is it possible to hide a button after we placed it on the map ? And to make it reappears after ?

Thanks !

Hi Cliff,
how can I create a "link to" button using Leaflet.Easy.Button?
Thanx.

Lorenzo

It would be cool to use this with an npm/browserify stack instead of just bower.

In the bower.json file, I think a

"dependencies": {
"leaflet": "~0.7.3"
}

Block is missing. This caused me a problem because bower was loading EasyButton first, and crashed because leaflet was not loaded before.

I'm having trouble showing some FA icons, and others (like the globe) don't look the same as what's depicted on the FA website, so I'm thinking something here needs to be rebuilt to use the latest version of Font Awesome?

Hello,

I recently cleaned out my node_modules folder and reinstalled them via npm install. Prior to the update I had v2.2.0. After the update I was provided v2.2.2.

I'm now unable to build my project which utilizes leaflet v1.0.3.

Here's my dependency block:

"dependencies": {
    "leaflet": "=1.0.3",
    "leaflet-easybutton": "^2.2.0"
}

And the output of npm ls -depth 0 leaflet leaflet-easybutton:

[email protected] /Users/me/Code/myapp
├── [email protected] 
└── [email protected] 

And here are the build errors:

ERROR in [at-loader] ./node_modules/leaflet-easybutton/src/easy-button.d.ts:24:51 
    TS2694: Namespace '"/Users/username/Code/fo/fo-web-angular/node_modules/@types/leaflet/index".L' has no exported member 'Map'.
ERROR in [at-loader] ./node_modules/leaflet-easybutton/src/easy-button.d.ts:29:20 
    TS2304: Cannot find name 'ControlPosition'.
ERROR in [at-loader] ./node_modules/leaflet-easybutton/src/easy-button.d.ts:35:20 
    TS2304: Cannot find name 'ControlPosition'.
ERROR in [at-loader] ./node_modules/leaflet-easybutton/src/easy-button.d.ts:45:53 
    TS2694: Namespace '"/Users/username/Code/fo/fo-web-angular/node_modules/@types/leaflet/index".L' has no exported member 'Map'.
ERROR in [at-loader] ./node_modules/leaflet-easybutton/src/easy-button.d.ts:51:34 
    TS2507: Type 'typeof Control' is not a constructor function type.
ERROR in [at-loader] ./node_modules/leaflet-easybutton/src/easy-button.d.ts:55:31 
    TS2507: Type 'typeof Control' is not a constructor function type.

If I lock leaflet-easybutton to v2.2.0, everything works fine.

Any thoughts on what would be the issue?

Hello,
If I want to create a series of button from a loop and recover the loop identifier in the event function. How can I recover the loop identifier?

Example :

for (var i = 0; i < 3; i++) {
  L.easyButton( '<span class="easy-button">&equiv;</span>', 
    function(){
      alert(i);
   }).addTo(map);
};

Regards,
Pev

You have a new tagName option to set the button's tag name in master which is nice.
Can you make a new release which contains this feature?

@celdia we can continue the issues over here

> bower install Leaflet.Easybutton --save-dev
bower cached        git://github.com/CliffCloud/Leaflet.EasyButton.git#1.0.0
bower validate      1.0.0 against git://github.com/CliffCloud/Leaflet.EasyButton.git#1.0.0
bower ENOTFOUND     Package Leaflet.Easybutton not found

It seems I can still install L.EasyButton though. When I manually add Leaflet.Easybutton to my bower.json file and

bower list

I get the following:

├── L.EasyButton#1.0.0 extraneous
├── Leaflet.EasyButton not installed

Maybe there is a naming issue or registration issue

as would suggest that it is all lower case e.g.

leaflet.easybutton

see https://github.com/bower/bower.json-spec#name for naming conventions for packages