I am trying to enable two selector menu dropdowns within a webmap pulling data from the same cartodb table. Each drop down is for a different type of route I would like to select. The top selector menu is working as it should, however, the second is not functioning. Am I missing something to enable the second selector? Link to web map and code below.
http://garscube.s3-website-us-west-2.amazonaws.com/
<!DOCTYPE html>
<html>
<head>
<title>Garsube Harriers Training Routes</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="./css/isotope.css" media="screen" />
<link rel="stylesheet" href="./js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/main-theme.css">
<link rel="stylesheet" href="./css/responsive-slider.css">
<link rel="stylesheet" href="./css/animate.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/skin.css">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#selector_menu1{
position: absolute;
top: 125px;
right: 20px;
z-index: 9000;
border:1px; border-style:solid; border-color:#0099ff; background-color:#ffffff; padding: .25em;
}
#selector_menu2{
position: absolute;
top: 165px;
right: 20px;
z-index: 9000;
border:1px; border-style:solid; border-color:#0099ff; background-color:#ffffff; padding: .25em;
}
#maptitle{
position: absolute;
top: 0px;
left: 20px;
}
#maptitleborder{
border-style:solid;
border-color:#287EC7;
}
</style>
<!-- include cartodb css -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
</head>
<body>
<div id='map'></div>
<div class="header">
<section id="header" class="appear">
<div class="navbar navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,7,45,0.5);" data-300="line-height:60px; height:60px; background-color:rgba(0,7,45,.7);">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars color-white"></span>
</button>
<h1><a class="navbar-brand" href="https://www.garscubeharriers.org.uk/" data-0="line-height:95px;" data-300="line-height:55px;">Garscube Harriers Routes
</a></h1>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" data-0="margin-top:26px;" data-300="margin-top:8px;">
<li><a href="#about">INTERVAL SESSIONS</a></li>
<li><a href="#work">PACK SESSIONS</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</section>
</div>
<!--<div id="maptitle">
<h1 style="border:2px; border-style:solid; border-color:#0099ff; background-color:#ffffff; padding: .5em;">Garscube Thursday Routes</h1>
</div>-->
<div id='selector_menu1'>
<select id='selector'>
<option value='interval'>Select Interval Session</option>
<option value='AR400'>Anniesland Road 400m</option>
<option value = 'AR600'>Anniesland Road 600m</option>
</select>
</div>
<div id='selector_menu2'>
<select id='selector'>
<option value='pack'>Select Pack Session</option>
<option value='layer1'>5.6m – QMD to Esquire House</option>
<option value = 'layer2'>6.2m – Canal/ Almond Road</option>
</select>
</div>
<script>
function init(){
var sublayer;
// create leaflet map and define some properties
var map = L.map('map', {
zoomControl: false,
center: [55.894967, -4.313957],
zoom: 13
})
var marker = L.marker([55.902764, -4.316062]).addTo(map);
// add a base layer to map
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attributions">CARTO</a>' }).addTo(map);
var layerUrl = 'https://smitty1788.carto.com/api/v2/viz/7eb2e59e-743e-11e6-b392-0e233c30368f/viz.json' ;
cartodb.createLayer(map,layerUrl)
.addTo(map)
.on('done', function(layer){
sublayer = layer.getSubLayer(0);
var LayerActions = {
pack: function(){
sublayer.setSQL("SELECT * FROM routes");
sublayer.setCartoCSS("#routes {line-color: #FFF;line-width: 0;line-opacity: 0;}");
},
layer1: function(){
sublayer.setSQL("SELECT * FROM routes WHERE objectid = 1");
sublayer.setCartoCSS("#routes {line-color: #1f78b4; line-width: 4; line-opacity: 0.7;}");
return true;
},
layer2: function(){
sublayer.setSQL("SELECT * FROM routes WHERE objectid = 2");
sublayer.setCartoCSS("#routes {line-color: #1f78b4; line-width: 4; line-opacity: 0.7;}");
return true;
;
},
interval: function(){
sublayer.setSQL("SELECT * FROM routes");
sublayer.setCartoCSS("#routes {line-color: #FFF;line-width: 0;line-opacity: 0;}");
},
AR400: function(){
sublayer.setSQL("SELECT * FROM routes WHERE objectid = 3");
sublayer.setCartoCSS("#routes {line-color: #1f78b4; line-width: 4; line-opacity: 0.7;}");
return true;
},
AR600: function(){
sublayer.setSQL("SELECT * FROM routes WHERE objectid = 4");
sublayer.setCartoCSS("#routes {line-color: #1f78b4; line-width: 4; line-opacity: 0.7;}");
return true;
;
}
}
$('#selector').change(function() {
LayerActions[$(this).val()]();
});
});
}
window.onload = init;
</script>
</body>
</html>
