[GIS] Bootstrap and Mapbox: Nav Bar layer selection

bootstrap-frameworkjavascriptleafletmapbox

I am building an interactive mapping solution for my employer and have run into a bit of a hangup. I am working with bootstrap for the first time and cannot figure out how to link the dropdown list option to the function that toggles the layers. I have gotten it to work with a button/checkbox(

<label><input type="checkbox" class="mapLabel" value="roadmap" checked=true/>ROADMAP</label>

), however, I would like to be able to do a multi-select of the dropdown list items to add to the map.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">   
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="#">Test</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Basemap <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a class="mapLabel" value="roadmap" checked=true>Streets</a></li>
        <li><a href="#">Satellite</a></li>
        <li><a href="#">Dark</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Districts <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Precincts</a></li>
        <li><a href="#">Precinct Parts</a></li>
        </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Points <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Address Points</a></li>
        <li><a href="#">Polling Places</a></li>
    </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Draw <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Draw Tool Goes Here</a></li>
      </ul>
    </li>
    <li><a href="#">Export</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a></li>
  </ul>
</div>
</div>
</nav>
<div id='map'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<script src="js/script.js"></script>
</body>
</html>

JS:

L.mapbox.accessToken = 'token here';
var map = L.mapbox.map('map', '', {zoomControl: false})
.setView([34.962497232449145, -92.9168701171875], 14);

var roadmap =     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var satellite = L.tileLayer('http://{s}.tiles.mapbox.com/v3/moklick.lh736gg3/{z}/{x}/{y}.png');
var CartoDB_DarkMatter = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png');

$( ".mapLabel" ).click(function( event ) {
console.log("Click");
    layerClicked = window[event.target.value];

        if (map.hasLayer(layerClicked)) {
            map.removeLayer(layerClicked);
        }
        else{
            map.addLayer(layerClicked);
        } ;
});

Best Answer

You only have a class and value defined for the first list item in the drop-down:

Change: 

<ul class="dropdown-menu">
    <li><a class="mapLabel" value="roadmap" checked=true>Streets</a></li>
    <li><a href="#">Satellite</a></li>
    <li><a href="#">Dark</a></li>
</ul>

To: 

<ul class="dropdown-menu">
    <li><a class="mapLabel" value="roadmap" checked=true>Streets</a></li>
    <li><a class="mapLabel" value="satellite">Satellite</a></li>
    <li><a class="mapLabel" value="dark">Dark</a></li>
</ul>

I'm only guessing what the actual values (layer names) of the second and third layers are; change as needed.

Related Question