Can't configure Easy Button to open Side Bar in Leaflet

Ana Beatriz Lamego Viana 0
Viewed 20

Im new to this and ive been trying for hours to discover what is wrong with my code, I get the error 'Uncaught ReferenceError: ctlSideBar is not defined'

<body>
    
    <div id="side-bar" class="col-md-12"></div>
    
    <div id="mapdiv" class="col-md-11"></div>
    
    
    
    <script>
        var mymap;
        var backgroundlayer;
        var ctlEasybutton;
        var ctlSideBar;
       
        
        $(document).ready(function(){
            mymap = L.map('mapdiv')
            mymap.setView([-15.6019, -56.0996],11);
            backgroundLayer = L.tileLayer('https://tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=547983c172f24d96bd50e5de88061f50');
            mymap.addLayer(backgroundLayer);
            
            ctlSideBar = L.control.sidebar('side-bar').addTo(mymap);
            
            ctlEasybutton = L.easyButton('glyphicon-tasks', function(){
                ctlSidebar.toggle();
            }).addTo(mymap);
            
            
            
        });
    </script>
</body>
leaflet
1 Answers

There is a typo in your button handler code: ctrlSidebar vs ctrlSideBar - note the lower case b.

Also, there might be a mixup between two leaflet-sidebar plugins: leaflet-sidebar and leaflet-sidebar-v2. From the posted code it is not possible to tell which version you use. I assume the second. leaflet-sidebar-v2 has no toggle() method, hence you'd have to use close().

Give this a try and let me know if it worked:

    $(document).ready(function(){

        // [...]

        ctlEasybutton = L.easyButton('glyphicon-tasks', function(){
            ctlSideBar.close();
        }).addTo(mymap); 

    });
strfx0
Related