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?

enter image description here

closed as off-topic by PolyGeo May 10 at 9:59

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – PolyGeo
If this question can be reworded to fit the rules in the help center, please edit the question.

  • similar: sjbus dealing with the San Juan bus including T5 heading to El Morro – john mangual Jul 14 '15 at 2:59

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;}

all routes will be accessible to your users. enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.