turbo87/leaflet-sidebar

A responsive sidebar for Leaflet maps

leaflet-sidebar

A responsive sidebar plugin for Leaflet, a JS library for interactive maps.

Please also have a look at sidebar-v2, the tabbed successor of this library.

Examples

Examples are available in the examples folder and on Github Pages:

• Basic example
• mapbox.js listing-markers example
• Example with 2 sidebars

Using the plugin

See the included examples for usage.

Usage

Add a content container somewhere in your document:

<div id="sidebar">
    <h1>leaflet-sidebar</h1>
</div>

Create a new L.Control.Sidebar and add it to the map:

var sidebar = L.control.sidebar('sidebar', {
    position: 'left'
});

map.addControl(sidebar);

The sidebar will be hidden on startup, use the following methods to show or hide it:

// Show sidebar
sidebar.show();

// Hide sidebar
sidebar.hide();

// Toggle sidebar visibility
sidebar.toggle();

// Check sidebar visibility
var visible = sidebar.isVisible();

If you want the sidebar to be visible on startup use the following snippet after adding it to the map:

setTimeout(function () {
    sidebar.show();
}, 500);

Do not call show() directly after adding the control to the map. The setTimeout will work around some CSS quirks for you.

The content of the sidebar can be changed dynamically:

sidebar.setContent('test <b>test</b> test');

If you need more flexibility you can use sidebar.getContainer() to get the content container element or use e.g. jQuery on the <div id="sidebar"> element.

Options

The sidebar can be configured with these options:

• position: Can be left (default) or right and shouldn't need explaining.
• closeButton: Can be true (default) or false. If true a close button will be added to the sidebar.
• autoPan: Can be true (default) or false. If true the map will be shifted when the sidebar is shown.

Events

Whenever the visibility of the sidebar is changed, an event is fired on the sidebar instance. You can listen for these events like this:

sidebar.on('hidden', function () {
    console.log('Sidebar is now hidden.');
});

Available events:

• show: Show animation is starting, sidebar will be visible.
• shown: Show animation finished, sidebar is now visible.
• hide: Hide animation is starting, sidebar will be hidden.
• hidden: Hide animation finished, sidebar is now hidden.

Note that the shown and hidden events depend on transitionend/webkitTransitionEnd which might not be supported by all browsers yet.

Compatibility

leaflet-sidebar was developed to work with Leaflet 0.6.4 and should work fine with v0.7 too. I have no information whether it works well with older versions.

The leaflet-sidebar plugin has been tested on the following systems and browsers:

• Ubuntu: Firefox, Chrome
• Mac OS X: Firefox, Chrome, Safari
• Android 4.3: Firefox, Chrome, Opera
• iOS: Safari
• Windows XP: Internet Explorer 6 (failed!)

License

leaflet-sidebar is free software, and may be redistributed under the MIT license.

leaflet-sidebar's Issues

z-index

I am needing to set the close button's z-index in leaflet-beta-2 to 800 to show up. Everything else seems to work fine.

Version 0.2.1 is not in NPM?

Thx for your help !

sidebar blocks other buttons

Hey,

while everything works fine on local devices (firefox/chrome), i got the following problem on mobile devices:
When the sidebar is active and displayed on the map, i cant click any of my other buttons (f.e. locate button, search button). But im able to pan through the map. Any solution to fix this prob?

Greetz from Germany

Publish releases to npm

Would be useful to see your releases published on npm so it can be easily used with Browserify.

How can i use this in react.js ?

I want to use this on react.js app to open popup on right side when click on marker, so can you please help me to do that

Thanks

Close button doesn't work.

Hi
I am first tester. It is definitely useful control

Now first issue:

In my opinion Close button doesn't work even it is enabled.

does not work with HTML5

when HTML5 declaration is used, blank screen is displayed on calling this library.
when anything is put in front of the declaration such as (invalid code BTW):

<span style="display:none;"></span><!DOCTYPE html>
<html lang="en">

it will work OK.

L.Mixin.Events is deprecated

L.Mixin.Events is deprecated and events fired in the L.Control.Sidebar class aren't working in newer Leaflet versions.

I think it shoud be replaced with

includes: L.Evented || L.Mixin.Events

to maintain compatibility with older Leaflet versions, as stated in this issue.

When get bounds center object to map look like is not center

how not to count the sidebar as part of the map?

plugin don't work in my project

Hi everyone, I created an app with leaflet (1.0.3) and I have integrated leaflet-sidebar but when I go to my browser I get an error message in the console that tells me: "Uncaught TypeError: L.Control.Sidebar is not a function ". Yet when I go to the source tab of the inspector the file L.Control.Sidebar.js is loaded. Does anyone have an idea of what shit ??

Thank you ;)

as I can block the sidebar?

as I can block the sidebar?
if you click the map, the sidebar is hidden.
I just want to hide if I click the x.

Geojson handling?

Can this handle geojson marker dataset, and present a field in the sidebar (i.e,, address, phone, email)?

Create a bower.json

Grunt doesn't automatically inject the source files into my project when installed with bower. Here is a start:

{
  "name": "leaflet-sidebar",
  "version": "0.1.5",
  "main": ["src/L.Control.Sidebar.js", "L.Control.Sidebar.css"],
  "description": "A responsive sidebar plugin for Leaflet, a JS library for interactive maps.",
  "license": "MIT",
  "ignore": [
    "gulpfile.js",
    "package.json",
    "examples",
    "component.js",
    ".travis.yml"
  ]
}

Sidebar appear from the side when zoom level changed on the browser

When i zoom out with browser ,sidebar appears from the corner,is this problem fixed with the v2 ?

No CloseButton in sidebar

Hi everyone,
First of all, thank you for this useful leaflet-sidebar plugin.
I've got into troubles trying to use it with [email protected] JS and CSS: sidebar appears and toggle/show/hide behaviours work fine but no CloseButton in the top right corner whereas it clearly appears in the HTML code... This makes UX on small devices kinda limited!
Debug console returns the "Deprecated include of L.Mixin.Events" info since Leaflet v1.0.
I found this Mixin > Evented solution on GitHub : https://github.com/jgravois/esri-leaflet-geocoder/commit/c2b96b60c63a9a880707f59f7b68406860fd57d2
So I commented "includes: L.Mixin.Events," in L.Control.Sidebar.js and added "includes: L.Evented.prototype," instead but it didn't change anything.
Any idea?
Thanks a lot in advance for your help,
Cheers,

• Yann

Npm installs a different version

Hi, I love this control, nice and simple.

I have this issue though, when I check the code on the repo there is this method:

setContent: function (content) {
    setContent: function (content) {
        var container = this.getContainer();

        if (typeof content === 'string') {
            container.innerHTML = content;
        } else {
            // clean current content
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }

            container.appendChild(content);
        }

        return this;
    },

which does exactly what I need. But after installing via npm install leaflet-sidebar the mentioned method looks like this:

    setContent: function (content) {
        this.getContainer().innerHTML = content;
        return this;
    },

Is there a way you can sync npm version to this one? Or shall I go for the install from repo option?

Municipality borders not showing

For some reason municipality borders are not drawn with the same piece of code as it did for my CV map. Why? Are the borders even needed?

Additionally, the municipality borders do not match the shoreline in the background map; it looks awful. What should we do to them?

Examples not working

show(), hide(), toggle() not working

I'm trying to make

setTimeout(function () {
    sidebar.show();
}, 500);

work, but it has no effect.

I've set a breakpoint, and have verified that this gets called, and that sidebar object is initialized at this point.

any help would be appreciated.

Max width feature

It would be interesting to have a max-width option. But with the responsive feature it may be complicated to have it.

Set sidebar width

I'd love to see the ability to set the sidebar width. Neither of the following seem to do it for me:

sidebar.getContainer().width = 100;
document.getElementById("sidebar").width = 100;

Changing sidebar position on-the-fly

Hallo,

trying to give the users an option to choice wether wants the sidebar on the right or left

this is how i defined my Sidebar:

var sidebar= L.control.sidebar('sidebar', {
	position: 'left',
	autoPan: false
});
map.addControl(sidebar);
sidebar.show();

what i tried in console:

>> sidebar.options.position = 'right'
<< "right"
>> sidebar.hide()
<< undefined
>> sidebar.show()
<< undefined

what i am expecting:
after calling sidebar.show() sidebar change the position to the right

what i am getting:
sidebar still on the left

I am using leaflet 1.3.1

Conflict with plugin twentytwenty

Hi.

I use the twentytwenty plugin in the sidebar on a map created with Leaflet 1.4.0.

There was a problem with 'mousedown' stop, if I remove the line in L.Control.Sidebar.js, the whole map moves, if you leave the line, then twentytwenty does not work correctly (the stripe does not move the image separating the image).

L.marker([70.30,` -126.32], {icon: DivIcon}).addTo(map).on('click', onMarkerClick);
function onMarkerClick(e) {
    $.ajax({
        type: "POST",
        url: 'index.php?object=1',
        success: function(data) {
            $('#sidebar').html(data);
            setTimeout(function () {
                $(".twentytwenty-container").twentytwenty({default_offset_pct: 0.5, click_to_move: true, no_overlay: true});
            },300);
            SideBar.show();
        }
    });
}

and

<div class="twentytwenty-container">
    <img src="/objects/58/001.jpg" />
    <img src="/objects/58/002.jpg" />
</div>

How to make it possible to work 'mousedown' in div.twentytwenty-container without affecting the map?

PopUps for the markers (Venues)

Add PopUp info for markers

Load file inside sidebar

Hello,

How can i load a file and insert it into the sidebar div ?
I have many markers, and each one have a seperate file with datas to be shown in the sidebar, i have tried the .setContent function, but i do have a php function that runs a query that must be displayed in the sidebar.

thank you

Cannot read property 'prototype' of undefined

Has anyone faced this error? leafletjs version 0.7.7, used with Mapquest maps. A bunch of other plugins do work so I guess I am missing a little something
Thanks

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at L.Control.Sidebar.js:3

Leaflet >=1.1.0 L.DomEvent.fakestop()

L.DomEvent._fakestop() is L.DomEvent.fakestop() since Lealfet 1.1.0, which causes issues with opening bootstrap dropdowns in the sidebar.

This should fix and allow backward compatibility in addTo() and removeFrom() methods (synthax untested)

var fakeStop = L.version === '1.1.0' || '1.2.0' ? L.DomEvent.fakeStop || stop : L.DomEvent._fakeStop || stop;

will try to make a PR soon, but if someone does it before me - it would be nice to have the stop events listeners activated and deactivated from an external private function to addTo() and removeFrom() so they are all in one place.

Using plugin in R Leaflet

I cannot get the plugin to work in R.
I have unsuccessfully tried to follow this guide: https://gist.github.com/timelyportfolio/8f6c8cc27597466351ad377e6774c30f#using-arbitrary-leaflet-js-plugins-with-leaflet-for-r

This is where I'm currently at:

`sidebarPlugin <- htmlDependency("leaflet-sidebar", "0.2.0",
                                src = c(href = "https://github.com/Turbo87/leaflet-sidebar.git"),
                                script = "src/L.Control.Sidebar.js")

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

testLeaflet <- leaflet() %>%
  addTiles %>%
  registerPlugin(sidebarPlugin)%>%
  onRender("function(el, x) {
      var sidebar = L.control.sidebar('sidebar', {
      position: 'left'}).addTo(this);
      map.addControl(sidebar).addTo(this);
      sidebar.show().addTo(this);
  }")

`
Does anyone have any guidance on what I should do?

Close button not showing on Jsfiddle

Hi, trying to investigate some unexpected event handling behaviour I set up a jsfiddle. There even basic functionality seems to be broken: https://jsfiddle.net/A1an/kt0fkvxc/

I get the "Hello World" text on top left of the map, then, even though the events seem to be fired and handled correctly, nothing changes in the map and the panel is not shown at all. Any idea what could be going wrong?

Hold Sidebar v2 width when printing

Thanks for this plugin. I've been waiting to use it and finally am able. My goal is to put an extensive legend in the sidebar. Could you tell me if there's a way I can restrict the width of the sidebar when doing a print-screen? When I try the sidebar expands the full width of the map. Thanks!

CSS on touch device

To follow Leaflet on mobile touch device you need add

.leaflet-touch .leaflet-sidebar > .leaflet-control {
box-shadow: none;
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}

code for many markers

Im a beginner in leaflet and html coding. Im trying to create a map with this sidebar plugin ( https://github.com/turbo87/leaflet-sidebar/)I can make a map with many markers and plugin from "demo example", but I don't know, how to create a "dynamic" content in slidebar which shows atributes from each marker separately. Thanks for anythink ! Jakub

My simple code:

<script>
    var map = L.map('map');

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; OpenStreetMap contributors'
    }).addTo(map);

    var sidebar = L.control.sidebar('sidebar', {
        closeButton: true,
        position: 'left'
    });
    map.addControl(sidebar);
    sidebar.setContent('aaaaaaa');   

    setTimeout(function () {
        sidebar.show();
    }, 500);
    var marker = L.marker([49.46, 17.11]).addTo(map).on('click', function () {
        sidebar.toogle()
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    sidebar.setContent('aaaaaaa');   

    map.on('click', function () {
        sidebar.hide();
    });
    });

    map.setView([49, 17], 5);
</script>

Improve readme

Hi. The readme currently does not state how to dynamically set the content properly. I would have liked a working example. See https://gis.stackexchange.com/a/365449/157497

Thanks in advance.

Two sidebars are not working

I can not run examples

Sidebar out map div

Hi eb,
Can I put the Sidebar out of th map div?

I tried, this is my webmap with sidebar inside the map div, everthong works:

www.mainjoin.eu/map/sidebar_in_map_div

And this is the webmap when I put the sidebar out the map div:

www.mainjoin.eu/map/sidebar_out_map_div

But here the point and polygon in map disappear.

My goal is confine the sidebar in a 50% left div:
div id="sideleft" style="width:50%;float:left;"

and confine the map in a 50% right:
div id="map" style="width:50%;float:right;"

Thanks for any tip
Valerio

Close panel on map click

hi

I'm trying to get this behavior, but I am succeeding by chance someone has solved?

Many markers

Hi,

Thank you for this great sidebar plugin.

I would like to know how to create sidebars link to each markers.
I created new markers and when I click on it the new sidebar (2) opens back the sidebar 1 (instead of show hover). Is that possible to close the open sidebar and we click on a new marker ?

Thx in advance,

Deprecated include of L.Mixin.Events

I am getting a deprecated function warning:
"Deprecated include of L.Mixin.Events: this property will be removed in future releases, please inherit from L.Evented instead."

Find out how to link getJSON-function to localhost

At the moment markers are shown only on the version that is uploaded to the server. In order to edit the code in local environment, we need to find out how to set up a localhost so that we can link to files in the editors computer.

Alternatively we need to find other way to go around the problem of linking jQuery functions to data sources from other servers than the one where index.html is located.

[accessibility] Keyboard and screen reader support for the close button

• The control is not focusable, it should be a <button type="button"> or role="button" (with tabindex="0" or <a href="#">).
• aria-label or title can be used to allow screen reader users to understand what the control is for.
  For example title="Close sidebar".

Add 'openButton' option

It would be nice if there is a button or div where the sidebar can be explicitely opened when clicking on it. E.g. for my project http://graphhopper.com/maps most of the time the sidebar is in the way but one needs a way to click on a rather small area to show up the sidebar.

Close button hidden due low z-index

to solve the problem I have set my own close class

.close {
z-index: 800 !important;
}

Leaflet 1.1.0. Geojson layer. 'Sidebar will be hidden'

I'm using Leaflet 1.1.0 and want to toggle sidebar while clicking on features from .geojson layer. I currently work with polygon objects.
open sidebar (demo version):

         function openSidebar(e) {
            sidebar.toggle();
        }

defining OnEachFeature:

        function onEachFeature(feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: openSidebar
            });
        } 

open .geojson:

        var otgLayer = L.geoJson(otg, {
            style: regStyle,
            onEachFeature: onEachFeature,
        }).addTo(map)

While clicking on feature, there is the following in the console:

Sidebar will be visible.
Sidebar will be hidden.

The sidebar works fine with Leaflet 0.7 when it is a .geosjon polygon
The sidebar works fine with Leaflet 1.1.0 when it is a marker

callback on animation end

great job with this plugin, I am using it in many web maps!

I was trying to to understand if I can insert a callback at the end of the animation of opening or closing the panel.
I have long studied the code that deals animation effect
but I could not tell if it is a possible solution to this....

bye!

Conflict with angular ui-bootstrap dropdown button?

I try to make the sidebar and an angular ui-bootstrap dropdown button work together. But the problem is if I initialize the sidebar, the dropdown button will break into a button and a list. If I comment the sidebar initialization code, the dropdwon button will be grouped as usual. Is there a conflict?

My code is shown below and here is a plunker example.

index.html

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
    <head>
        <title>Map Sidebar Dropdown Hell</title>

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
        <link rel="stylesheet" href="http://cdn.rawgit.com/Turbo87/leaflet-sidebar/master/src/L.Control.Sidebar.css">
        <link rel="stylesheet" href="style.css">

        <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
        <script src="http://cdn.rawgit.com/Turbo87/leaflet-sidebar/master/src/L.Control.Sidebar.js"></script>
        <script src="script.js"></script>
    </head>

    <body >
    <div id="content" ng-controller="DropdownCtrl">
      <div id="map"></div>
      <div id="sidebar">
        this is a sidebar.
      </div>

    <!-- Single button -->
    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

    </div>
    </body>

</html>

script.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope) {
      var map = new L.Map('map', {
            zoom: 10,
            minZoom: 8,
            maxZoom: 12
        }); 
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12});
            map.setView(new L.LatLng(-36.5, 143.98), 6);
            map.addLayer(osm);

    // Comment following lines to group the button and dropdown list
    var sidebar = L.control.sidebar('sidebar', {
            position: 'left'
        });

    map.addControl(sidebar);
    sidebar.show();

});

"contextmenu" event propogation of map on panel

Hi,

I use "contextmenu" event in order to listening right click event on the map. But when I wanted to select something on the sidebar with right mouse button this event triggers on map.

I solved this with below workaround:

# This patch file was generated by NetBeans IDE
# It uses platform neutral UTF-8 encoding and \n newlines.
--- HEAD
+++ Modified In Working Tree
@@ -61,6 +61,7 @@
         // Make sure we don't drag the map when we interact with the content
         var stop = L.DomEvent.stopPropagation;
         L.DomEvent
+            .on(content, 'contextmenu', stop)
             .on(content, 'click', stop)
             .on(content, 'mousedown', stop)
             .on(content, 'touchstart', stop)

Thanks and regards,
Okan.

Fancybox not working in sidebar

Hi,

I'm trying to use the Fancybox library in the sidebar of a map made with leaflet 1.3.1.
When I click on a marker, I get from the database a list of photos associated to the marker. Then I open the sidebar to display them inside the sidebar with Fancybox, but photos don't "open" with fancybox (then open in a new tab of the browser).
The code works fine if it's not contained in the leaflet sidebar.

<a class="fancybox thumbnail" rel="gallery" href=myphoto.jpg" title="myphoto">
<img class="img-responsive" src="myphoto.jpg"/>
</a>

<script>
$(function() {				
	$(".fancybox").fancybox({			
		'titlePosition'  : 'inside'		 
	});
});
</script>

I found a similar question about using fancybok in a leaflet popup, but it does not change anything when I specify in my leaflet map javascript:

$(function() {		
	my_map.control.sidebar.on('shown', function () {
		$(".fancybox").fancybox({			
			'titlePosition'  : 'inside'		 
		});
	});
});

Any idea?
Thanks!

.

.

Active area

Can you support this plugin https://github.com/Mappy/Leaflet-active-area or some thing with the same fetures ?

Plugin does not work with twitter-bootstrap button dropdown

I added a dropdown from twitter bootstrap to the sidebar,I found that the dropdown will not open.

The markup looks like this:

    <div id="sidebar">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="query-layer-select" data-toggle="dropdown">
                Select Layer<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="query-layer-select">

                    <li role="presentation">
                        <a href="#" role="menuitem" tabindex="-1">NEW YORK</a>
                    </li>

                    <li role="presentation">
                        <a href="#" role="menuitem" tabindex="-1">HEATHROW</a>
                    </li>

                    <li role="presentation">
                        <a href="#" role="menuitem" tabindex="-1">LONDON</a>
                    </li>

                    <li role="presentation">
                        <a href="#" role="menuitem" tabindex="-1">PARIS</a>
                    </li>

                    <li role="presentation">
                        <a href="#" role="menuitem" tabindex="-1">BERLIN</a>
                    </li>

            </ul>
        </div>
    </div>

I have set up a plunk here http://plnkr.co/edit/YjBx47
Try running it in full screen