0

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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>
0

Because you have two different dropdown menus, you need to give them two different ids attributes:

<div id='selector_menu1'>
    <select id='selector'>
        <option value='interval' selected>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='selector2'>
        <option value='pack' selected>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>

Similarly, you have to create two different LayerActions variables:

var LayerActions2 = {
    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;
    }

}

var LayerActions = {
    interval: function(){
        sublayer.setSQL("SELECT * FROM routes");
        sublayer.setCartoCSS("#routes {line-color: #FFF;line-width: 0;line-opacity: 0;}");
        console.log('hola');
    },
    AR400: function(){
        console.log('hola');
        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(){
        console.log('hola');
        sublayer.setSQL("SELECT * FROM routes WHERE objectid = 4");
        sublayer.setCartoCSS("#routes {line-color: #1f78b4; line-width: 4; line-opacity: 0.7;}");
        return true;
    } 
}

Finally, you have to associate the first with the second via JQuery:

$('#selector').change(function() {
     LayerActions[$(this).val()]();
}); 

$('#selector2').change(function() {
     LayerActions2[$(this).val()]();
}); 

If you replace your code with mine should work. But I have also checked that your routes dataset only contains 2 rows (objectids 1 and 2), so you will not get any result when implementing the first dropdown.

  • ramiroaznar Thank you so much! I will try this out today and make sure I implement the changes correctly. I am slowly adding more data to the routes dataset, which will end up with roughly 15 rows once all is said and done. I am still new to web mapping so I am slowly learning what I am sure are basic lessons to the more experienced out there. – Howard Smith Sep 8 '16 at 13:13
  • Glad to hear that. Please, mark my answer as correct if you think your question is solved. – ramiroaznar Sep 8 '16 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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