It would be nice to have a link like www.example.com#tab1 automatically open up the tab with that ID

If you init a container on the right side, the caret that closes the panel, should be flipped. Right now it looks like it would move further out.

Probably we should consider the position at this point:

 if (this.options.closeButton)
                    content += '<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>';

Hi.
I have written a react hook for this library and would really appreciate if you mention my package in this package's readMe file, so it can reach more people who need it.
Thanks.

react-leaflet-sidebar-v2 hook: https://www.npmjs.com/package/react-leaflet-v2-sidebar

Good morning,

I integrated your module in my web app. There is a tab with a Github link. I would like to know how remove this tab.

Thank you.

Can Typerscript support be added for the sidebar? The parent repo has a file that can be dropped-in, or used as a starting point.
leaflet-sidebar.d.ts

Currently gives me the following error:

Property 'sidebar' does not exist on type 'typeof control'.

When trying to do the following (using autopan example):

L.control.sidebar('sidebar', { autopan: true })
    .addTo(map)
    .open('autopan');

And if possible, please add an angular 2+ example.

Hi, I'm trying to combine leaflet sidebars v1 and v2 and it doesn't work. Is that possible in any way?

The original sidebar plugin (v1) provided an isVisible() function that would allow the user to determine whether the sidebar was open or closed.

This is particularly useful feature as it allows toggling of other element's (e.g. dialogs) styles and classes to better resize on the screen when the sidebar is open and closed.

Is it possible to provide something similar for this newer plugin?

I am trying to create some dynamic forms inside of a pane in the form of <script> [js content] </script> but it is not allowed. How might I do this?

Just for information - I created an Angular 8+ wrapper for this control - see https://github.com/runette/ngx-leaflet-sidebar

I was using the leaflet-sidebar-v2 API and because a chain of processes my code was closing the sidebar and opening it in a new tab, while the autopan: true . The center of my map was always getting displaced, all the time the sidebar was being opened again.

It's not the case, but just to understand the bug:
Imagine you have this following button, that all the time you click on it, it closes the sidebar and open a tab. Remembering autopan: true . If you click on it twice. The center of the map will be displaced.

<button id="btn_test">TEST</button>

   $( "#btn_test" ).click(function() {
     ctlSidebar.close(); 
     ctlSidebar.open("home");
   });

It's not a big deal, but it took me so long to realize why it was being caused. And I decided to post it here maybe others face the same or it possibly get corrected in future releases.

Subj
I created it, but it isn't working - not open a pane :-(

Yes, links are true.

Subj, except Firefox.
The original sidebar-v2 works.

Currently, when using the addPanel method using an already existing id, the panels get added on top of each other, which is not ideal. Maybe it would make sense to add an overwrite flag to the method or show a warning if the panel already exists?

Thank you for this very useful plugin.

Is there a vue js wrapper for leaflet sidebar v2 available?
It would be great to be able to use it as a component.

Environment: I'm working in Node, using browserify to bundle all the JS files/libraries into one file, working in localhost, leaflet has been working fine thus far. All the CSS files are loading properly, and the JS is functioning, because I can see the active class get passed around when I click on tabs.

Issue: the actual panels of the sidebar are never visible. When a tab is selected, I can see that its content is present and active in the devtools inspector, but it looks like it's got opacity: 0 or it's stuck behind the map or something. I've tried this in both Firefox and Chrome. All the example projects work in my browser, though I haven't tried them through my localhost server. Edit to mention: I've tried both having the sidebar div inside the map div and having them separate. It doesn't make a difference.

Relevant code:

index.html

<html>
	<head>
		<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
		<link rel="stylesheet" href="node_modules/leaflet-sidebar-v2/css/leaflet-sidebar.min.css">
		<!--[if lte IE 8]>
			<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.ie.css" />
		<![endif]-->
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="assets/css/style.css" />
	</head>
	<body>
		<div id="map">
			<div id="leaf-sidebar"></div>
		</div>
		<script src="./assets/js/bundle.js"></script>
	</body>
</html>

important parts of bundle.js:

let sidebar = L.control.sidebar({
	position: 'left',
	container: 'leaf-sidebar'
}).addTo(map);

sidebar.addPanel({
	id: "home",
	tab: "<i class='fa fa-bars'></i>",
	title: "Home",
	pane: "This is a test home panel!",
}).open('home');

sidebar.addPanel({
	id: "test-box",
	tab: "T",
	title: "Test",
	pane: "<p>lorem ipsum etc</p>",
});

Hello. noerw.

I'm using React, not Typescript.

I am beginner to ES6 or React.

I need help. Can I hear the answer?

Somebody help me plz.

If you create the sidebar via the js api and specify a container id, the id is not set to the HTML element.

This could be fixed by something like:

if (!container){
      container = L.DomUtil.create('div', 'leaflet-sidebar collapsed');
      container.id = this.options.container;
}

Hi,
I noticed that when using the sidebar on the right-hand side (https://noerw.github.io/leaflet-sidebar-v2/examples/position-right.html), the attribution text gets shifted to left instead of under the sidebar menu. I can reproduce this issue 100% of the time in Firefox 74 and Microsoft Edge.

Hi,
I would like to place the .leaflet-sidebar-tabs element (the 40 px bar where the icons are located) horizontally at the bottom of the screen rather than vertically on left or on the right.
I guess that is possible but the question is, how complicated that may be?
I just want to relocate the tabs, the pane (the part which dynamically moves) would remain where it is now (vertically on the left or on the right)
Thanks

On Leaflet v1.5.0+ removing the sidebar from the map does not work:

Uncaught TypeError: Cannot read property 'off' of null (Control.js:100)

After invoking sidebar.onRemove(), Leaflet v1.5.0+ try to use sidebar._map, but .onRemove() has already set sidebar._map to null.

Sorry for my bad English.

Hello,

I'd like to create a sidebar footer in the same manner as the header - where it stays in the same relative space in the screen and the main body ignores it for scrolling purposes. Could you let me know what the css properties the header uses that allows that? I couldn't figure it out from the file.

Thank you!

I'm having an issue with the panel icons going invisible after the initial page load. The issue is only with the top three icons used in the default template.
Initial page load: https://ibb.co/smjhQB1
After clicking through panels : https://ibb.co/NSt8sms

Angular 8 spits out the following 2 errors when running ng build:

ERROR in node_modules/leaflet-sidebar-v2/index.d.ts:50:13 - error TS2416: Property 'on' in type 'Sidebar' is not assignable to the same property in base type 'Evented'.
  Type '{ (type: SidebarEvents, fn: LeafletEventHandlerFn, context?: any): this; (eventMap: SidebarEventHandlerFnMap): this; }' is not assignable to type '{ (type: string, fn: LeafletEventHandlerFn, context?: any): this; (type: "baselayerchange" | "overlayadd" | "overlayremove", fn: LayersControlEventHandlerFn, context?: any): this; (type: "layeradd" | "layerremove", fn: LayerEventHandlerFn, context?: any): this; (type: "add" | ... 18 more ... | "predrag", fn: Leaflet...'.
    Types of parameters 'type' and 'type' are incompatible.
      Type '"baselayerchange" | "overlayadd" | "overlayremove"' is not assignable to type 'SidebarEvents'.
        Type '"baselayerchange"' is not assignable to type 'SidebarEvents'.

50             on(type: SidebarEvents, fn: L.LeafletEventHandlerFn, context?: any): this;
               ~~
node_modules/leaflet-sidebar-v2/index.d.ts:51:13 - error TS2416: Property 'on' in type 'Sidebar' is not assignable to the same property in base type 'Evented'.
  Type '{ (type: SidebarEvents, fn: LeafletEventHandlerFn, context?: any): this; (eventMap: SidebarEventHandlerFnMap): this; }' is not assignable to type '{ (type: string, fn: LeafletEventHandlerFn, context?: any): this; (type: "baselayerchange" | "overlayadd" | "overlayremove", fn: LayersControlEventHandlerFn, context?: any): this; (type: "layeradd" | "layerremove", fn: LayerEventHandlerFn, context?: any): this; (type: "add" | ... 18 more ... | "predrag", fn: Leaflet...'.

51             on(eventMap: SidebarEventHandlerFnMap): this;

These are my package.json entries related to leaflet:

"@types/leaflet": "^1.5.6",
 "leaflet": "^1.6.0",
 "leaflet-sidebar-v2": "^3.2.1",

No idea where to go from here. It works, and shows the sidebar, but any deployment to Heroku fails because of the build error.

please help me

Hello!

The sidebar code contains "Object.assign()" method, which does not supported by IE.

For compatibility with IE, please consider adding the following polyfill:

if ("function" !== typeof Object.assign) {
  Object.assign = function(target, varArgs) { // .length of function is 2
    "use strict";
    if (null == target) { // TypeError if undefined or null
      throw new TypeError("Cannot convert undefined or null to object");
    }

    var to = Object(target);

    for (var index = 1; index < arguments.length; ++index) {
      var nextSource = arguments[index];

      if (null != nextSource) { // Skip over if undefined or null
        for (var nextKey in nextSource) {
          // Avoid bugs when hasOwnProperty is shadowed
          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
    }
    return to;
  };
}

I'm using the addUser() function in my js script but getting an uncaught reference error that the function is not defined.

    var sidebar = L.control.sidebar({ container: 'sidebar'})
      .addTo(myMap)
      .open('home')
    sidebar
      .addPanel({
        id:   'mail',
        tab:  '<i class="fa fa-envelope"></i>',
        title: 'Messages',
        button: function() { alert('opened via JS callback') },
        disabled: true,
    })
    var userid = 0
    function addUser() {
        sidebar.addPanel({
            id:   'user' + userid++,
            tab:  '<i class="fa fa-user"></i>',
            title: 'User Profile ' + userid,
            pane: '<p>user ipsum dolor sit amet</p>',
        });
    }
        

I've added buttons in my html script within the default api panel -

            <p>
                <button onclick="sidebar.enablePanel('mail')">enable mails panel</button>
                <button onclick="sidebar.disablePanel('mail')">disable mails panel</button>
              </p>
              <p>
                <button onclick="addUser()">add user</button> <br><br>
              </p>

Although the example code I'm referencing doesn't include the buttons, I pulled it from the example webpage. (Although it doesn't show up in the HTML source script, when I inspect the button on click I see it in the elements console) The error comes up onclick. (The enable/disable mail panel pulls the same error) https://ibb.co/5R94tmG

I can't un-insert the checkboxes in the panel.
How can I do?

Common .sidebar css class name collides with bootstrap .sidebar.
Is it conceivable to either change this package's .sidebar css classname to .leaflet-sidebar-v2 (for instance) or make this class name a parameter?
Thank you.

By tap on tab - closes just fine.

leaflet-sidebar-v2-3.2.1

At first, the sidebar was created static.
Then, I create panel by API from string via eval. `
String content:

	let panelContent = {
		id: 'weatherTab',                     // UID, used to access the panel
		title: 'Weather',              // an optional pane header
		tab: '<img src="img/logo_tk_weatherservice.png" alt="Weather forecast" width="70%">',  // content can be passed as HTML string,
		pane: `
			<div style="height:100%;">
                         ....
		`,        // DOM elements can be passed, too
	};
	sidebar.addPanel(panelContent);

It works, but <span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span> has width 0.

Hi! I have noticed an issue which happens when calling removePaneland addPanel methods more than twice with the same panel. This leads to the panel not being removed.

I believe the solution here is to change this line from this._tabitems.slice(i, 1); to this._tabitems.splice(i, 1); and do the same for panes.

Best regards!

EDIT updated suggested fix

Hello,

I have install leaflet-sidebar-v2 via npm. However when I try to simply initialize the side bar I get this error. L.Control.Sidebar is not a function

<div #sidebar id="sidebar">
  <app-sidebar></app-sidebar>
</div>

  initializeSideBar() {
    this.sidebar = L.Control.Sidebar('sidebar').addTo(this.map);
  }

Any help is greatly appreciated.

Thank you. Darnell

I have posted this question on GIS stackexchange. And I'm wondering whether it's possible or not.

Inspired by https://github.com/boldtrn/leaflet-popup-sidebar:

Add an option popup, which changes the sidebar behaviour to remove itself from the map when clicking anywhere that is not the sidebar.
Possibly add an additional close button to the header or tab bar.

Hi guys, this is my webmap:

www.mainjoin.eu/map/santiago/

Everything works perfectly: sidebar(v2), autopan, popup content go in sidebar panels fine.

Only a few trouble. At top right I have zoom home button.
When sidebar is close everything go fine: zoom home button center my map.
When sidebar is open the zoom home makes the same thing but the sidebar hide part of my center map.
I'd like a little right-offset on result of zoom home button when sidebar is open.
Something like:

if sidebar.close() = true
	zoomhome
else
	zoomhome.offset

Any advices are welcome, thanks!
Valerio

How to set dymanic sizes of sidebar based on the tab?

I'd want to open a sidebar pane when user clicks a tooltip. I've used previous versions of sidebar + old leaflet, and the method described below worked:

• in my mapdata.js

var tooltipMarker = L.marker([33.65201, -158.34234], {icon: emptyIcon})
.bindTooltip("Tooltip", {permanent: true, direction: 'center', className: 'lab-misc', interactive: true})
.openTooltip().on ('click', function () {sidebar.open('i-tooltip')})
.addTo(continents);

• in html

<div class="leaflet-sidebar-pane" id="i-tooltip">
<h1 class="leaflet-sidebar-header">
Tooltip Title<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
</h1>
<p>A responsive sidebar for mapping libraries</p>
</div>

Now, this method does not work for this version of sidebar, and throws error as it cannot find the html class? How would I go about making something like this work?

I think it's not intuitive to append the sidebar div to document.body instead of the map div. I want the sidebar to be displayed within the map even if that map doesn't span the entire viewport.

I fixed this for me by changing line 33 in the js from

 this._sidebar = L.DomUtil.create('div', 'sidebar collapsed', document.body);

to

 this._sidebar = L.DomUtil.create('div', 'sidebar collapsed', L.DomUtil.get('map'));

Would you too consider that a smarter default or am I missing a point?
Anyways, thanks for your work!

would be nice to host the examples on gh-pages (configured to master branch, root dir), and link to them in readme and repo URL

Hi,
i am using your library for a project, and for my usage i don't need multiple panels, i always have one content panel. so i would like to remove the left side 'tabs' container. is it possible to do it simply or do i have to create a PR ?

Hello! I have found an issue with Typescript support in the latest version. It boils down to an extra letter (or maybe one less than enough?)

In the vanilla module when you add a panel you set the 'pane' field, yet in the Typescript definition it is the 'panel' field. This would cause the panel to load without the content.

I was able to fix the issue by modifying your leaflet-sidebar.js class. The relevant change was data.pane to data.panel.

// Create pane node

if (data.panel)

{

if (typeof  data.panel  ===  'string')

{

// pane is given as HTML string

pane  =  L.DomUtil.create('DIV', 'leaflet-sidebar-pane', this._paneContainer);

content  =  '';

if (data.title)

content  +=  '<h1 class="leaflet-sidebar-header">'  +  data.title;

if (this.options.closeButton)

content  +=  '<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>';

if (data.title)

content  +=  '</h1>';

pane.innerHTML  =  content  +  data.panel;

} else

{

// pane is given as DOM object

pane  =  data.panel;

this._paneContainer.appendChild(pane);

}

pane.id  =  data.id;

Hope this helps!

How can i update content in a tabs, i'm using vuejs

A tab-less button listener can be added via the following js:

/* add an button with click listener */
sidebar.addPanel({
    id: 'click',
    tab: '<i class="fa fa-info"></i>',
    button: function (event) { console.log(event); }
});

It can be done through html (with some help of js) like so:

<ul role="tablist">
    <li><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-gear"></i></a></li>
</ul>

Can the following additions be made so that any anchor with a specific class can be made into a panel-less button? I would do a PR, but I haven't done too much of scss to css build and all, so suggesting it instead.

// css
.leaflet-sidebar-button {
    cursor: pointer;
}

// html
<ul role="tablist">
    <li><a class="leaflet-sidebar-button" onclick="myFunction()"><i class="fa fa-gear"></i></a></li>
</ul>

// js
if ((link.hasAttribute('href') && link.getAttribute('href')[0] !== '#' ) || (link.classList.contains("leaflet-sidebar-button"))
    return;

classList browser support + more info

https://github.com/nickpeihl/leaflet-sidebar-v2/blob/09086d779e4fd04e3a65aa8031e340e8a3691bbe/js/leaflet-sidebar.js#L426
Note: Although the code checks if the first character is '#' (and returns if it doesn't), it doesn't work as expected all the time (i.e. for Angular).

Hello,

I have a problem when using leaflet and the sidebar in combination with AngularJS.

I have some options on the marker and I put the selected marker in a variable called clickedMarker.

$scope.clickedMarker = e.target;

I then open the sidebar tab and try to display the name of the marker, but it doesn't do it.

Object - {{clickedMarker.options.ObjectName}}

If I open or close the developer tool in chrome(F12) the name get's refreshed.

Is it a bug? Any suggestions or workarounds?

Currently, when clicking on a tab icon, open the panel correctly. What I want to do is that the buttons run to the right side of the tab that is displayed. Is this possible?

Loving what you did to improve upon the original! Definitely help kept my code more modular/cleaner, though I did run into a couple of bugs that you may want to fix:

1. Using addPanel in addition to addTo functions will effectively double up on the click events for tabs and close icons. This will cause the bar to open & close quickly and make it seem like nothing's working to the user.

2. Ln 255 should be using setAttribute('role','tab') instead, otherwise the attribute won't appear like the original plugin.

3. Similar to #2, the tab containers (both top and bottom) are missing a setAttribute('role', 'tablist') attribute to match the original sidebar-v2.

Thanks for the work!

I copied the example at https://noerw.github.io/leaflet-sidebar-v2/examples/ to my project, but the result is different and the fa-bars icon is without the top margin, and all others bellow too.

In the example it is correct, like bellow:


I could solve this problem at the close icon, changing from 0 to 10 at the top margin:

.leaflet-sidebar-close { top: 10;

I tried to find where in the css file I could change the top margin of the fa-bars, but was not successful. Any help I would appreciate.

Thanks.