Plugin for Leaflet library that adds a new control class.
To create a menu-like component that can be implemented as a native leaflet control and control the interaction.
See storybook hosted on github.io
-
- a) get the npm package
npm i --save leaflet.control.select
- a) get the npm package
-
- b) download/clone/fork this repository and use dist folder (you can also build it (see
How to develop
))
- b) download/clone/fork this repository and use dist folder (you can also build it (see
-
- include the original leaflet js and css
-
- define
L.Control.Select
instance (see options or example page)
- define
var map = L.map("map", { maxZoom: 14 }).setView([49, 18], 11);
var items = [
{ label: "sunny", value: "☼" },
{ label: "half-sunny", value: "🌤" },
{ label: "half-raining", value: "🌦" },
{ label: "raining", value: "🌨" },
{ label: "tornado", value: "🌪" }
];
L.control
.select({
position: "topleft",
selectedDefault: defaultValue,
items: items,
onSelect: function(newItemValue) {
drawMarker(newItemValue);
}
})
.addTo(map);
npm install
to get all modules needed for the developmentnpm run build
to create the minified .js code
- the content of menu, a collection of objects with label and value keys (if no labels are provided, values will be used as labels)
simple items example:
{ label: 'option 1', value: 'user-o' },
{ label: 'option 2', value: 'bullhorn' },
{ label: 'option 3', value: 'book' },
{ label: 'option 4', value: 'car' },
{ label: 'option 5', value: 'cog' }
nested items example:
[
{
label: "group 1",
value: "g1",
items: [
{ label: "option 1", value: "g11" },
{ label: "option 2", value: "g12" },
{ label: "option 3", value: "g13" },
{
label: "group 3",
value: "g3",
items: [
{ label: "option 1", value: "g131" },
{ label: "option 2", value: "g132" },
{ label: "option 3", value: "g133" }
]
}
]
},
{ label: "option 5", value: "g5" },
{
label: "group 2",
value: "g2",
items: [
{ label: "option 6", value: "g21" },
{ label: "option 7", value: "g22" }
]
}
];
- true possible to choose more items at the same time (radio / checkbox mode)
- value or list of values to be selected at the initialization
- id for the wrapper div element
- additional class of the wrapper div element
- icon for the control button
- icon for checked item
- icon for unchecked item
- icon for checked group (a group with a checked item)
- icon for unchecked group (a group without a checked item)
- function emmited after the menu is open
- function emmited after the menu is closed
- function emmited after an item is selected, returns the selected item
- function emmited after the group is clicked, returns the group item
- closes the menu
- unit tests
- better code documentation
- more methods