toggling a list of paths in Leaflet [closed]

Question

I drew a bus map of San Juan, Puerto Rico in leaflet.js.

Using the layers control I let users toggle the bus routes they want to see. Unfortunately, the list of 45 or so bus routes is too long to display on the page. Route 21 is hidden behind the Leaflet link, and there are more routes beyond that.

How can I let users see all their options in the layer control popup?

Answer 1

If you'll replace your style code with this:

<style type='text/css'>
  #map { height: 300px; width:625px; }
  td { width:150px; }
  th { width:150px; }
  div#route {width:150px; background-color:#F0F0F0;}
  .leaflet-control-layers-overlays{ height: 250px; width:60px; overflow-y: scroll;}
</style>

all routes will be accessible to your users.