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>
