Skip to content

daiyanze/leaflet-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!)

alt text

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');
}
}

About

Create a simple menu for your leaflet map

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published