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 )
bower install --save Leaflet.Menu
-
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
-
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);
-
Have fun with it
// LeafletMap : The leaflet map object
// Options : The options for menu
var menu = L.leafletMenu(LeafletMap, Options)
menu.show()
menu.hide()
menu.removeMenu()
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. |
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');
}
}