CODEWITHSUNDEEP
javascriptleafletsidebar
Heather
Heather

Reputation: 141

Adding Leaflet layer control to sidebar

I'm using the Leaflet sidebar V2 plugin and am wondering if it is possible to put a leaflet layer control menu into the sidebar? Any help is greatly appreciated! Thanks!

Upvotes: 4

Views: 5291

Answers (2)

Severin
Severin

Reputation: 183

The Solution with getContainer(); works well:

var control = L.Routing.control(L.extend(
        {},
        {
            waypoints: [],
            ...
        }))
        .addTo(map);

var oldLayerControl = control.getContainer();
var newLayerControl = jQuery("#siedebarRoutingContainer");
newLayerControl.append(oldLayerControl);

and CSS:

.leaflet-routing-geocoder-result{  /* leaflet routing machine -> src -> autocomplete.js Zeile 20 */
   z-index:99999999999 !important;
}

Inspired by https://codepen.io/ItsMeStevieG/pen/QRgWNR

Upvotes: 0

user8640340
user8640340

Reputation:

Just use this hint. It removes the L.control element from the map container and adds it to a new parent. You can do this for the sidebar straight forward.

HTML:

 <div id="sidebar" class="sidebar collapsed">
   <div class="sidebar-tabs">
    <ul role="tablist">
     <li>....</li>
     <li>....</li>
    </ul>
 </div>
 <div class="sidebar-content">
   <div class="sidebar-pane" id="">  
    <h1 class="sidebar-header">...</h1>
    <div id="example"> <!--Here the layer control menu will be added--></div>    
 </div>
</div>

JS: 

var layer = L.control.layers(baseMaps, overlayMaps).addTo(map);

  var htmlObject = layer.getContainer();
  var a = document.getElementById('example')
  function setParent(el, newParent){
    newParent.appendChild(el);
  }
  setParent(htmlObject, a);

For me, this solution worked well.

Upvotes: 2

Related Questions