Hi Turbo87,

I am using the sidebar-v2 for our mobile friendly GIS/Map viewer, and it works really good!!!
Town of Qualicum Beach Zoning Map

However, the sidebar is not working with "ol.control.FullScreen" with Openlayers API. The sidebar disappeared after I click the FullScreen control. Moreover, the sidebar actually works just fine if I click F11 by making my browser full-screen.

Thanks 👍

Hi,
im using this code to add a Google earth layer to my map:
https://github.com/shramov/leaflet-plugins/blob/master/layer/tile/Google.js
(Which works fine without the sidebar)

And I added a sidebar based on the Leaflet-example:
https://github.com/Turbo87/sidebar-v2/blob/gh-pages/examples/index.html
(Which works fine with Open Street Map or Mapquest)

But I get an error when I try to combine both:
The area behind the sidebar (small if closed/collapsed, bigger if opened) is grey and the Google Earth Layer is moved to the right of it.

The Overlay-Layers are not affected by this, so the base map has a wrong position relative to them.

Image with sidebar closed:

Image with sidebar opened, the features that used to be in the Serengeti park in the east of Lake Victoria have now moved over the water:

PS:
If I place the DIV for the sidebar after the Leaflet-Map-DIV (or inside it), the whole area for the open sidebar is always grey (and the Google Earth layer moved), even if the sidebar is closed:

PS2.:
Happens in Firefox, Opera and Chrome.

I'm trying using sidevar-v2 with a cartodb map but I cant make it work

While working with the leaflet sidebar-v2 on a smartboard, I noticed that the mouse click events on the sidebar tabs were not being captured, and that only touch events were being captured.
This issue stems from several lines of code in the sidebar plugin which don't add a click event listener if the device has touchscreen capabilities, so for device which has both a touch screen and a mouse, the sidebar wont work when using the mouse.
var e = this._hasTouchStart ? 'touchstart' : 'click';
After doing some testing with IE, Chrome, and Firefox on a standard windows desktop, a mac desktop, a nexus tablet, and a smartboard, it appears that having the touchstart event capture is redundant since the default click event in leaflet is already capturing both touch and click events.

I will shortly be submitting a pull request to address this issue, by removing
this._hasTouchStart = L.Browser.touch && ('ontouchstart' in document.documentElement);
and changing
var e = this._hasTouchStart ? 'touchstart' : 'click';
to
var e = 'click';

Hi,

Is there an easy way of keeping the active sidebar-tab highlighted, even when the sidebar is closed?

Thanks for such a great project!

Hi! I'm just starting to use sidebar with bower and was wondering if there wasn't an issue with bower.json:

"main": [
"css/gmaps-sidebar.js",
"css/leaflet-sidebar.js",
"css/ol2-sidebar.js",
"css/ol3-sidebar.js",
"js/jquery-sidebar.js",
"js/leaflet-sidebar.js"
],

Shouldn't the css files be with .css instead of .js ?

Hi
I am trying to dynamically add panels to a sidebar instance.
I am using JQuery to create a ".sidebar-pane" div and append this to the ".sidebar-content" div.
I also create an <a> with the href set to the id of the sidebar-pane and the role set to tab. I append this to <ul> list under the sidebar-tabs div.

All in all, the markup looks correct, and the button appears on the sidebar.
However, it doesn't respond to any click events (the sidebar panel does not show). Is there anything I need to do to get the click event to register, or is there a better way of dynamically inserting new panes?

Thanks for your help!

Because events are not preventDefault'ed on _onClick assignment, page is scrolling to tab's title when you click the icons.

When the bar is map under a Bootstrap Header, clicking in "open" makes the bar go to the top again.

When a tab pane is long and thus has scrollbars it would be nice to remember that scrolling position when switching to another tab and then back again. Would this be an easy fix?

Thanks again for creating Leaflet sidebar-v2. Would you consider adding a close button in the upper-right corner, similar to the one that appears in your older leaflet sidebar? This small feature would make the action more intuitive for many users. -Jack

Would it be hard to add some better error handling for when the sidebar div is not present?

It should check if the sidebar HTML is present and if not, just return out. Right now, if the DIV isn't present, it causes Mapbox/Leaflet to throw errors and the map is not able to be initialized.

Any ideas?

Because sidebar v2 has been made for fullscreen maps, it's hard to use smaller maps in pages. If you ever tried, you'd see map controls are moved into middle of your map. Here is temporary solution for this:

1. move your sidebar div into your map div.
2. change this line (.sidebar.collapsed ~ .sidebar-map .leaflet-left) to this (.sidebar.collapsed ~ .leaflet-control-container .leaflet-left)

I told this is temporary because it's not a mobile friendly solution of the problem. It's ok on big screens but you may have problems with mobile views. There can be better way to fix it by the author.

Great tool here. Looking forward to a full implementation with datatables. Right now I'm having trouble clicking on the icon (map pin) to open the sidebar. I tried on your example page as well and it's not working there either (for me). Thanks!

I'm using Firefox and tested in Chrome, IE and Nightly as well.

Er, just found on StackExchange that v2 doesn't have the interactive element enabled yet. That little tidbit would've saved me a few hours :). No gripes though, working with v1 and hope to contribute to v2 as well. 👍

There should be some documentation.

One trivia I already found: The sidebar HTML has to come before the leaflet map div, otherwise it overlays the zoom buttons. Maybe that's also a bug?

I think one enhancement that I would like to see on this great tool is making the sidebar width draggable. I have started playing with the code to enabled this option but I am wondering if anyone has experimented with this already.

Hi Turbo87

Thanks for creating sidebar-v2 for Leaflet, which is wonderful.

Question: Can you suggest code to make the home tab visible on startup (ideally, with a setTimeOut function), as you did with leaflet-sidebar?

Here's my current test of your tool, with modified CSS to display only the home tab.
http://jackdougherty.github.io/bikemapcode/testSidebarV2.html

thanks
Jack

Are there any plans to add AutoPan to this version as in v1?

Currently I've got a few tabs, each overflowing. If I'm scrolled midway through one tab, and switch to another, I end up scrolled midway through it too. I believe the expected behaviour would be to always jump to the top of the tab?

i think the .sidebar('sidebar', {position: 'right'}) doesn't work in openlayers example. how do i make it work in openlayers?

Browsing through this library, I am slightly confused (doesn't take much) - is this a sidebar for any js app, or is it for maps only ? Is the maps-specific css just so that it can blend in better ?

Also, can panels appear stacked (like a toolbox) rather than tabbed (ie one at a time)

Finally - has anyone got / done / know of a material-theme for the sidebar ?

thanks

I'd like to place a sidebar on the right side of the screen.
I've tried
L.control.sidebar('sidebar', {position: 'topright'})
But that doesn't work.
I've tried re-ordering the divs but that didn't work either.

How can I move the sidebar to the right side?

This is something simple but I could not display the icons of the toolbar when I tried to reproduce the example in a local repository. Everything is working well but icons are not visible.

Hi,

when tab closed, panel was still active. you should add close button function this command for leaflet

for (i = this._panes.length - 1; i >= 0; i--) {
            child = this._panes[i];
            if (L.DomUtil.hasClass(child, 'active'))
                L.DomUtil.removeClass(child, 'active');
  }

I am working on some API functions, namely

addPanel(id, tabHTML, panelHTML) // may accept DOM elements, or HTML strings
removePanel(id) 
getPanelContent(id)
setPanelContent(id, content)

This enables dynamically changing the sidebar content.
It also makes the HTML code obsolete, as it may be created in the initialisation function.

I will submit a PR in the next weeks..

How can I link sidebars in a way that when I go to the url http://turbo87.github.io/sidebar-v2/examples/index.html#profile the Profile tab will be open?

The native Google Maps UI elements are not positioned properly on mobile devices. This will most likely need some remote debugging as there doesn't seem to be a way to use the mobile Google Maps UI on desktop computers.

How can I make the first item of the sidebar opened by default?
Thanks

Semi-related to #6, is it possible to position the sidebar after the zoom control to prevent the zoom control moving when the sidebar is expanded?

On android devices, when the tab content is longer than the tab, and a user is scrolled down on the page, the first time a user clicks on any links on the tab has the effect of scrolling the tab back to the top of the page. I tested this issue on your examples on a small device using the links to Leaflet and OpenLayers that you have in your examples near the top of your main tabs, and both the Google example and the leaflet example had this scrolling issue, but the Open Layers example did not.

I've used https://github.com/brunob/leaflet.fullscreen to add a full screen button on my map. Everything works fine when going fullscreen, including all controls placed on the map, except the sidebar. In fullscreen mode it stays behind the map but it still pushes all the other map controls on the left side (including the zoom control) like it's still there.
Is there a way to display the sidebar properly in fullscreen mode?

Many thanks,

Ioannis

Preferably for OpenLayers v2 and v3

Hi there,

I was having an issue with working with href attribute. The href attribute modifies the url and can mess up any routing that I had set up. So to avoid breaking my routing, Instead of doing

<ul class="sidebar-tabs" role="tablist">
    <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
    <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
    <li><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
    <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>

I made the html look like this.

<ul class="sidebar-tabs" role="tablist">
    <li><a data-tab="#home" role="tab"><i class="fa fa-bars"></i></a></li>
    <li><a data-tab="#profile" role="tab"><i class="fa fa-user"></i></a></li>
    <li><a data-tab="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
    <li><a data-tab="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>

Then i had to change some of the js. Replacing all calls getting the hash to getting dataset.tab.
So this worked as a quick fix but I'm not sure if it is the best idea. All tags should have an href so the html tags should probably be changed if you remove the href.

Maybe it would work better if you pass it in as an option to the leaflet-sidebar? I'm not sure if you have any thoughts on this but I thought it was interesting.

Just wondering if it were possible to support scrolling the content in the sidebar via the scrollwheel.

How can i add standard link button on side bar? For example; show modal button on side bar. When i push it then modal show but side bar panel never show. Thanks...

A JavaScript API is needed to programmatically open/close the sidebar

• Leaflet API
• jQuery API

Hi there, firstly just a major thanks for such a beautiful sidebar!

As per the following image you can see we are trying to go for a very flat design and editing some of the css we have semi achieved this 👍 http://postimg.org/image/y6hfg7mpt/

However we would like to add some other content along the sidebar-tabs, in particular some text. See the following picture for a rough idea http://postimg.org/image/t8rgbzvep/

The dividers I guess would be cool but nothing major for now.

Hello,

Is it posibile to make the zoom in/out control not to move when clicking on the sidebar? I would like to make this posible when the sidebar si small and below the zoom in/out control.

Thanks,
Corina

I have som js code to open the sidebar with the content of the infowindow, but I cant open the right pane of the sidebar, here is my code

 L.control.sidebar('sidebar').open(); //open sidebar
document.getElementById("name").innerHTML = data.name; // I have inside the pane of the sidebar <span id="name"></span>

How could I open the right pane of the sidebar?

Thanks

Hi there!
I just recognized that npm install sidebar-v2 fails. Is the package not published?

Cheers

Thank you for sharing this very good work. It is helpful.

One question: In the mobile mode, the sidebar is "covering up" the map (hovering on top it). Would it be possible to make sidebar go above / below the map (in the mobile mode) so that both map and sidebar content can be viewed simultaneously (at-least partially).

The reason I am asking is, I have objects moving on the map, while their related info (such as speed etc.) are present in the sidebar. This works great in the desktop mode, to display info side-by-side with moving objects on the map. In the mobile mode, the map disappears below the sidebars. Thought it would be great if the sidebar instead of covering up the map, goes above / below the map (like in typical bootstrap grid system).

The sidebar does not open on click when I try the leaflet example:
http://turbo87.github.io/sidebar-v2/examples/index.html

I use Google Chrome version 37.0.2062.124 m. There are no javascript errors reported.

see http://googlegeodevelopers.blogspot.de/2015/09/new-controls-style-for-google-maps.html

this requires font-awesome to work properly.
My package manager didn't resolve this dependency so the sidebar didn't show up properly for me.

Just in case someone else has the same issue.

Hi,

I almost just copy/paste the samples in my code, modifying only the leaflet-sidebar.js and leaflet-sidebar.css urls to fit my dev environment.

I can see the collapsed sidebar on the left, I can see the tabs icons. But when clicking on it, nothing happens. The sidebar does not expand to the right, content is not displayed. The tab element does not acquire que "active" class.

I'm using Leaflet 0.7.3, Firefox 32.03. JS and CSS urls are valid, they are downloaded (see it on the Firefox dev console).

Here is the code :
https://gist.github.com/Zofren/5b39aa3d0a89b4fb3a7b

Thanks for your plugin.
Would it possible to have in addition to left, right get the up, down effect.

On firefox 35.0.1, using navbar-top-fixed from bootstrap as a top menu, having a map underneath in a row div. When clicking the tabs, my window position is moved down. Leaflet.

<header class="header clearfix navbar navbar-fixed-top" style="padding:0; background-color: #484848; margin-bottom: 0px; border-radius: 0px;z-index: 3000;" >
  <div class="container" style='margin-left: 0px;'>
    <div class="row">
    </div> 
  </div>
</header>
    <div class="row">
       <div class="col-md-12" style="padding:0px; margin-top: 65px;">
            <div id="map" style="height:600px" ></div>
    <!-- **************************************** MAP TABS ***************************************** -->
     <div id="sidebar" class="sidebar collapsed" style="top:85px;">
        <!-- Nav tabs -->
        <ul class="sidebar-tabs" role="tablist">
            <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
            <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
            <li><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
            <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
        </ul>

        <!-- Tab panes -->
        <div class="sidebar-content active">
            <div class="sidebar-pane" id="home">
                <h1>sidebar-v2</h1>

                <p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>

                <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="sidebar-pane" id="profile"><h1>Profile</h1></div>
            <div class="sidebar-pane" id="messages"><h1>Messages</h1></div>
            <div class="sidebar-pane" id="settings"><h1>Settings</h1></div>
        </div>
    </div>
            </div>

    </div>
'''

The sidebar should emit events when something happens

• Leaflet API
• jQuery API

The default settings for the sidebar does not allow deeplinking to a particular tab, although the url address is updated when a users selects a tab identify which tab is shown.