A Leaflet plugin to show bootstrap dropdowns. Tested on desktop and mobile versions of Chrome, Edge, Firefox, and Safari.
- Demo Page: demo
- Current Version: v1.0.2
- Tested on desktop and mobile versions of Chrome, Edge, Firefox, and Safari.
Simply include the JS and CSS in the head.
<head>
...
<script src="dist/leaflet-bootstrap-dropdowns.min.js"></script>
<link rel="stylesheet" href="demo.css" />
...
</head>And add the control to the map.
new L.Control.BootstrapDropdowns({
position: "topleft",
className: "menu",
menuItems: [
{
html: '<i class="fas fa-map-marked-alt"></i> Open Street Map',
title: "Open Street Map",
current: true, // current page
},
{
html: '<i class="fas fa-exclamation-triangle"></i> Open Alert',
title: "Open Alert",
afterClick: () => { // callback
alert("Open Alert!");
},
},
{
html: '<i class="fas fa-external-link-square-alt"></i> Leaflet.SimpleLocate',
title: "leaflet-simple-locate",
href: "https://github.com/mfhsieh/leaflet-simple-locate/", // href with target
target: "_blank",
},
{
separator: true, // separator
},
{
html: '<i class="fab fa-github"></i> About',
title: "About",
href: "https://github.com/mfhsieh/leaflet-bootstrap-dropdowns", // href without target
}
],
}).addTo(map);For more details, refer to this demo (code: index.html, demo.css).
| Option | Type | Default | Description |
|---|---|---|---|
| className | String | "" | the custom CSS class name assigned to the control |
| menuItems | List | [] | the menu items in dropdowns (refer to index.html) |
| html | String | refer to menu.svg | the HTML content of the button |
| title | String | "menu" | the "title" attribute of the button |
| target | String | "" | the "target" attribute of the button |
| rel | String | "" | the "rel" attribute of the button |
| ariaLabel | String | "" | the "aria-label" attribute of the button. If it is an empty string, it will be equal to "title". |
- Source Code: Github
- email: mfhsieh at gmail.com
- Github: Github