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>
Solved! Go to Solution.
Todd,
You have an issue of your requires and vars not being in sequence. Here is the correction ("dojo/_base/array", missing):
require([ "esri/map", "esri/layers/FeatureLayer", "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/dijit/Legend", "dojo/fx/Toggler", "dojo/fx", "dojo/_base/array", "dojo/dom", "dojo/on", "dojo/domReady!" ], function (Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend, Toggler, coreFx, arrayUtils, dom, on ) {
Todd,
You have an issue of your requires and vars not being in sequence. Here is the correction ("dojo/_base/array", missing):
require([ "esri/map", "esri/layers/FeatureLayer", "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/dijit/Legend", "dojo/fx/Toggler", "dojo/fx", "dojo/_base/array", "dojo/dom", "dojo/on", "dojo/domReady!" ], function (Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend, Toggler, coreFx, arrayUtils, dom, on ) {
Todd,
Here is another option using the dojo dropdown button:
<!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.14/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <style> html, body, #map { height: 100%; margin: 0; } #legend { padding: 10px; background-color: #fff; } #dropDownButtonContainer { position: absolute; top: 25px; left: 25px; z-index: 100; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script> require([ "esri/map", "esri/layers/FeatureLayer", "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/dijit/Legend", "dijit/form/DropDownButton", "dojo/dom", "dojo/on", "dojo/parser", "dojo/domReady!" ], function ( Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend, DropDownButton, dom, on, parser ) { parser.parse(); 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 myButton = new DropDownButton({ label: "Legend", dropDown: legend }); dom.byId("dropDownButtonContainer").appendChild(myButton.domNode); }); </script> </head> <body class="claro"> <div id="legend" style="display: none;"></div> <div id="dropDownButtonContainer"></div> <div id="map"></div> </body> </html>
Thank you very much. I will attempt both of these and report back on my findings.
I greatly appreciate the assistance.
Todd
Todd Fagin
Oklahoma Natural Heritage Inventory/
Department of Geography and Environmental Sustainability