leaflet-menu

Menu for leaflet map. Works well together with Easy Button. This menu style is created and modified based on Leaflet.contextmenu (by aratcliffe).(Thank you aratcliffe!)

Demo ( Click me to see demo )

How to download/install

Bower

bower install --save Leaflet.Menu

Copy Paste

leaflet.menu.js

leaflet.menu.css

How to start

1. Add leaflet.menu.min.css and leaflet.menu.min.js (Load leaflet.js first)

   <link rel="stylesheet" href="../src/leaflet.menu.css"></link>
   
   <script src="some_path/leaflet.js"></script>
   <script src="some_path/leaflet.menu.js"></script>
   ```html

2. Write code

   var map = L.map('map').setView([35, 139.7]);
   var menu = L.leafletMenu(map, {
           items: {
               AlertCenterLocation: {
                   onClick: function () {
                       alert(map.getCenter().toString());
                   },
               },
           }
   });
   var menuButton = L.easyButton({
       states: [{
           stateName: 'show-menu',
           icon: 'fa fa-tasks',
           title: 'Show Menu',
           onClick: function (btn, map) {
               menu.options.button = btn;
               menu.show();
               btn.state('hide-menu');
           }
       },{
           stateName: 'hide-menu',
           icon: 'fa fa-tasks',
           title: 'Hide Menu',
           onClick: function (btn, map) {
               menu.hide();
               btn.state('show-menu');
           }
       }],
       id: 'styles-menu',
   });
   menuButton.addTo(map);

3. Have fun with it

Methods

Initialize Menu Object

// LeafletMap : The leaflet map object
// Options : The options for menu
var menu = L.leafletMenu(LeafletMap, Options)

Show Menu

menu.show()

Hide Menu

menu.hide()

Remove Menu Div Element

menu.removeMenu()

Options

Property	Type	Description
mapID	String	The Leaflet map element ID.
items	Object	The items that you want to add to menu.
button	Object	The Easy Button object.

Options > items

Property	Type	Description
[Menu item]	Object	The Menu Item

Example: (The property under your item should be either 'href' or 'Onclick'. It throws an error if you use both)

items: {
    GoToGoogle: function(){
        href: 'http://www.google.com',
},
    AlertMeSomething: function(){
        Onclick: alert('Something');
}
}