The other day, I posted a question about hiding/showing a legend using a dropdown control. An individual elsewhere suggested I should merely hide/show the legend div using a toggler. I have subsequently successfully implemented a very basic example of hiding/showing a div using dojo/fx/Toggler. However, when I attempt to implement it with the ArcGIS API for Javascript, it doesn't work. I am fairly certain I am likely overlooking the obvious or otherwise making a newbie mistake.
I have posted my code example below (I have not attempted to really style it). Any assistance would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Toggle Legend</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#legend-wrapper {
position: absolute;
left: 25px;
bottom: 25px;
padding: 10px;
background-color: #fff;
}
#legendButton {
position: absolute;
left: 25px;
bottom: 185px;
padding: 10px;
background-color: #fff;
z-index: 100;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/dijit/Legend",
"dojo/fx/Toggler",
"dojo/fx",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(Map,
FeatureLayer,
UniqueValueRenderer,
SimpleMarkerSymbol,
Color,
Legend,
Toggler,
coreFx,
arrayUtils,
dom,
on
) {
var map = new Map("map", {
basemap:"gray",
center: [-98.435731, 35.222876],
zoom: 7,
logo: false,
slider: false
});
var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
var renderer = new UniqueValueRenderer(null, "Type");
var symbol1 = new SimpleMarkerSymbol();
symbol1.setColor(new Color("#ed5151"));
renderer.addValue("National Park", symbol1);
var symbol2 = new SimpleMarkerSymbol();
symbol2.setColor(new Color("#149ece"));
renderer.addValue("National Monument", symbol2);
layer.setRenderer(renderer);
map.addLayer(layer);
var legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "National Park Statistics 2013"
}]
}, "legend");
legend.startup();
var isClicked = false;
var legendToggler = new Toggler({
node: "legend-wrapper",
showFunc: coreFx.wipeIn,
hideFunc: coreFx.wipeOut
});
on(dom.byId("legendButton"), "click", function(e){
if(isClicked===false){
legendToggler.hide();
isClicked=true;
}
else{
legendToggler.show();
isClicked=false;
}
});
});
</script>
</head>
<body>
<button type="button" id="legendButton">Toggle Legend</button>
<div id="map"></div>
<div id="legend-wrapper">
<div id="legend"></div>
</div>
</body>
</html>
