leaflet-tabmenu

Leaflet.Tabmenu Demo

A leaflet plugin to add a multi tab menu inside the map.

Installation

npm install leaflet-tabmenu

Usage

You can choose to use HTML and/or JavaScript to create the TabMenu or add tabs and panels

<div id="mapid"></div>
<div id="tabmenu" class="leaflet-tabmenu collapsed">
	<!--Tabs-->
	<ul class="leaflet-tabmenu-tabs">
		<li class="leaflet-tabmenu-tab">
			<a href="#settings">
				<i class="fa fa-cog"></i>
				<span>Settings</span>
			</a>
		</li>
	</ul>

	<!--Panels-->
	<div class="leaflet-tabmenu-panels">
		<div class="leaflet-tabmenu-panel" id="settings">
			<h2>Lorem ipsum</h2>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr
		</div>
	</div>
</div>

<!--Some HTML content-->
<div id="somePanel">This is a User panel</div>

var mymap = L.map('mapid').setView([0, 0], 3);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);
var tabMenu = L.control
	.tabmenu({
		position: 'right', //left or right
		container: 'tabmenu', //if no container given it will be created
		autoPan: true, //centers the map on menu open/close,
		width: 400, //menu panel width in px
		tabSize: 60, //menu tabs height/width in px
	})
	.addTo(mymap);

//add custom HTML content
tabMenu.add({
	id: 'home',
	icon: 'fa fa-home',
	title: 'Home',
	content: `
           <div>
                A tabmenu for leaflet
           </div>
       `,
});
//get a HTML element and pass it as content
tabMenu.add({
	id: 'user',
	icon: 'fa fa-user',
	title: 'User',
	className: 'someClass',
	content: document.getElementById('somePanel'),
});
//use a tabmenu button as a link
tabMenu.add({
	id: 'google',
	href: 'https://www.google.de',
	icon: 'fa fa-google',
});

###Methods

tabMenu.open('home'); //open the "home" panel
tabMenu.close(); //close menu
tabMenu.disable('home'); //disable the "home" panel tab
tabMenu.enable('home'); //disable the "home" panel tab
tabMenu.hide('home'); //hide the "home" panel tab
tabMenu.show('home'); //show the "home" panel tab

###Events

tabMenu.on('open', (event) => {
	console.log(event.id);
}); // "open" event that will be fired when a panel has been opened
tabMenu.on('close', (event) => {}); // "close" event that will be fired when a panel has been opened

TabMenu Control options

Property	Type	Default	Description
container	String/HTMLElement	null	The TabMenus container
position	String	'right'	Position of the TabMenu. Possible values are right, left
autoPan	Boolean	false	Centers the map on opening/closing the menu
width	Number	400	Width of the menu panels in px
tabSize	Number	60	Width and Height of the menu tabs in px
className	String	null	A custom class name

TabMenu Contol Methods

Method	Returns	Description
add(options)	this	add a menu panel
remove(id)	this	remove a menu panel
open(id)	this	open a menu panel
close()	this	close/collapse the opened menu panel
disable(id)	this	disable a menu tab button
enable(id)	this	enable a disabled menu tab button
hide(id)	this	hide a menu tab button
show(id)	this	show a hidden menu tab button
setAutoPan(value)	void	set autoPan
setWidth(width)	void	set the TabMenu width
setTabSize(size)	void	set the TabMenu tab size (height and width)

TabMenu add(options) options

Property	Type	Default	Description
id	String	null	The tab/panel ID
icon	String	null	icon of the menu tab
title	String	null	Title of the menu tab
href	String	null	href to a location
content	String/HTMLElement	null	Content of the menu panel
disabled	Boolean	false	If true the tab will be disabled
hidden	Boolean	false	If true the tab won't be visible
className	String	null	A custom class name

Got inspired by https://github.com/turbo87/sidebar-v2/ and used the project as a reference, so a thanks goes to this author!