├── LICENSE
├── README.md
└── L.Control.Button.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Jerroyd Moore
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | leaflet-button
 2 | ==============
 3 | 
 4 | A simple button control for the [Leaflet](http://leafletjs.com) map framework
 5 | 
 6 | 
 7 | ## Options
 8 | The button can be configured with these options
 9 |  - **position**: the position of the button. Valid positions are the normal positions for leaflet controls: `topright`,
10 |  `topleft`, `bottomright`, and `bottomleft`.
11 |  - **className**: additional css classes you wish to add to the button.
12 |  - **toggleButton**: Turns the button into a toggle button. The value of toggleButton will be the css Class that is toggled on and off.
13 | 
14 | ## A Simple Example
15 | 
16 | ```javascript
17 | var button = new L.Control.Button('Click me');
18 | button.addTo(map);
19 | button.on('click', function () {
20 |     alert('you clicked the button!');
21 | });
22 | ```
23 | 
24 | ## Adding a Toggle button
25 | Setting the option `toggleButton` will turn button into a toggle button. The value you set `toggleButton`
26 | is the css class added to the button, so you can style against it.
27 | 
28 | In your click handler, you can use the `isToggled()` method to peform conditional actions
29 | ```javascript
30 | var button = new L.Control.Button('Toggle me', {
31 |   toggleButton: 'active'
32 | });
33 | button.addTo(map);
34 | button.on('click', function () {
35 |     if (button.isToggled()) {
36 |         sidebar.hide();
37 |     } else {
38 |         sidebar.show();
39 |     }
40 | });
41 | ```
42 | 
43 | ## Further Customizing your button
44 | You can use an existing button in your document instead of the default button.
45 | ```html
46 | <button id="helpbutton" role="button" class="btn btn-primary">Learn More</button>
47 | ```
48 | Create a new button using a reference to the existing button:
49 | ```javascript
50 | var button = new L.Control.Button(L.DomUtil.get('helpbutton'), { toggleButton: 'active' });
51 | button.addTo(map);
52 | button.on('click', function () {
53 |     window.location.href = 'http://www.yourdomain.com/help'
54 | });
55 | ```
56 | 
57 | ## Example of Integrating it with [L.sidebar](https://github.com/Turbo87/leaflet-sidebar)
58 | ```html
59 | <button id="helpbutton" role="button" class="btn btn-primary">Learn More</button>
60 | <div id="helpsidebar">
61 |     <h1>Quick Reference Guide</h1>
62 |     <div>This is the quick help document where you can find useful information about the map you're looking at!
63 | </div>
64 | ```
65 | create the sidebar and button in javascript, and link them together using the click handler
66 | ```javascript
67 | sidebar = L.control.sidebar('helpsidebar', { position: 'right' });
68 | sidebar.addTo(map);
69 | 
70 | helpButton = new L.Control.Button(L.DomUtil.get('helpbutton'), { toggleButton: 'active' });
71 | helpButton.addTo(map);
72 | helpButton.on('click', function () {
73 |     if (helpButton.isToggled()) {
74 |         sidebar.hide();
75 |     } else {
76 |         sidebar.show();
77 |     }
78 | });
79 | ```
80 | 


--------------------------------------------------------------------------------
/L.Control.Button.js:
--------------------------------------------------------------------------------
 1 | // Author: Jerroyd Moore
 2 | 
 3 | L.Control.Button = L.Control.extend({
 4 |     includes: L.Mixin.Events,
 5 |     options: {
 6 |         position: 'topright',
 7 |     },
 8 |     initialize: function (label, options) {
 9 |         L.setOptions(this, options);
10 |         var button = null;
11 | 
12 |         if (label instanceof HTMLElement) {
13 |             button = label;
14 |             try {
15 |                 button.parentNode.removeChild(button);
16 |             } catch (e) { }
17 |         } else if (typeof label === "string") {
18 |             button = L.DomUtil.create('button', this.options.className);
19 |             button.innerHTML = label;
20 |         } else {
21 |             throw new Error('L.Control.Button: failed to initialize, label must either be text or a dom element');
22 |         }
23 | 
24 |         L.DomUtil.addClass(button, this.options.position);
25 | 
26 |         this._container = button;
27 | 
28 |         return this;
29 |     },
30 |     isToggled: function () {
31 |         return L.DomUtil.hasClass(this._container, this.options.toggleButton);
32 |     },
33 |     _fireClick: function (e) {
34 |         this.fire('click');
35 | 
36 |         if (this.options.toggleButton) {
37 |             var btn = this._container;
38 |             if (this.isToggled()) {
39 |                 L.DomUtil.removeClass(this._container, this.options.toggleButton);
40 |             } else {
41 |                 L.DomUtil.addClass(this._container, this.options.toggleButton);
42 |             }
43 |         }
44 |     },
45 |     onAdd: function (map) {
46 |         if (this._container) {
47 |             L.DomEvent.on(this._container, 'click', this._fireClick, this);
48 |             var stop = L.DomEvent.stopPropagation;
49 |             L.DomEvent.on(this._container, 'mousedown', stop)
50 |                       .on(this._container, 'touchstart', stop)
51 |                       .on(this._container, 'dblclick', stop)
52 |                       .on(this._container, 'mousewheel', stop)
53 |                       .on(this._container, 'MozMozMousePixelScroll', stop)
54 |             this.fire('load');
55 | 
56 |             this._map = map;
57 |         }
58 | 
59 |         return this._container;
60 |     },
61 |     onRemove: function (map) {
62 |         if (this._container && this._map) {
63 |             L.DomEvent.off(this._container, 'click', this._fireClick, this);
64 |             L.DomEvent.off(this._container, 'mousedown', stop)
65 |                       .off(this._container, 'touchstart', stop)
66 |                       .off(this._container, 'dblclick', stop)
67 |                       .off(this._container, 'mousewheel', stop)
68 |                       .off(this._container, 'MozMozMousePixelScroll', stop)
69 | 
70 |             this.fire('unload');
71 |             this._map = null;
72 |         }
73 | 
74 |         return this;
75 |     }
76 | });
77 | 
78 | L.control.button = function (label, options) {
79 |     return new L.Control.Button(label, options);
80 | };
81 | 


--------------------------------------------------------------------------------