AnsweredAssumed Answered

List of Basemaps opacity

Question asked by AlexSabrina on Nov 18, 2015
Latest reply on Nov 19, 2015 by AlexSabrina

Hi,

I am trying to create in the table of content a way to change  opacity for a list of basemaps?

 

I am using something like this to switch my basemaps and my code is the following:

 

//Basemap List goes her..
                         $("#basemapList li").click(function (e) {
                             switch (e.target.text) {
                                
                                 case "Streets":
                                    
                                     map.setBasemap("streets");
                                     
                                     break;
                                 case "Imagery":
                                     map.setBasemap("hybrid");
                                     break;
                                 case "National Geographic":
                                     map.setBasemap("national-geographic");
                                     break;
                                 case "Topographic":
                                     map.setBasemap("topo");
                                     break;
                                 case "Gray":
                                     map.setBasemap("gray");
                                     break;
                                 case "Open Street Map":
                                     map.setBasemap("osm");
                                     break;
                             }
                             if ($(".navbar-collapse.in").length > 0) {
                                 $(".navbar-toggle").click();
                             }
                         });
                         on(dom.byId("opacity"), "click", updateOpacity);
                         function updateOpacity() {
                             var cOp = map.getLayer(map.basemapLayerIds[1]);
                             var newOp = (op / 100);
                             streets.setOpacity(1.0 - newOp);
                         }

 

 

List:

<div title="Basemaps" class="active dropdown" id="basemapList">
                    <button class="btn btn-default dropdown-toggle" type="button" id="BasemapButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <span class="glyphicon glyphicon-th-large"></span>
                    </button>


                    <a href="" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
                    <ul class="dropdown-menu" id="myDropdown">
                        
                        <li><a href="#">Streets</a></li>
                        <li><a href="#">Imagery</a></li>
                        <li><a href="#">National Geographic</a></li>
                        <li><a href="#">Topographic</a></li>
                        <li><a href="#">Gray</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Open Street Map</a></li>
                    </ul>
                </div>

Outcomes