Hey everybody,I was looking at this example, that lets me toggle layers via checkboxes. I tried to implement it into my application, but I just can't get it to work. Everything works, but the checkboxes won't show up in my TOC.<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Map with legend</title> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style> html, body { height: 97%; width: 98%; margin: 1%; } #rightPane { width: 30%; } #pane1 { border: solid #97DCF2 1px; } #header{ border: solid #C0C0C0 2px; background-color:#C0C0C0 } #HomeButton { position: absolute; top: 98px; left: 26px; z-index: 50; } #legendPane { border: solid #97DCF2 1px; } </style> <script src="http://js.arcgis.com/3.8/"></script> <script> var map; require([ "dojo/parser", "esri/map", "esri/dijit/HomeButton", "esri/layers/FeatureLayer", "dojo/on", "esri/dijit/Legend", "dojo/_base/array", "dijit/form/CheckBox", "esri/dijit/BasemapGallery", "esri/dijit/Geocoder", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/screenUtils", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!" ], function( parser, Map, HomeButton, FeatureLayer, on, Legend, array, CheckBox, BasemapGallery, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils, Color, domConstract, BorderContainer, ContentPane, AccordionContainer ) { parser.parse(); //Create the map var map = new Map("map", { center: [-80.734, 28.297], zoom: 10, basemap: "topo" }); //Add a home button var home = new HomeButton({ map:map }, "HomeButton"); home.startup(); //Add Feature Layers var cities = new FeatureLayer( "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var rivers = new FeatureLayer( "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var states = new FeatureLayer( "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", { mode: FeatureLayer.MODE_ONDEMAND, opacity: 0.5, outFields: ["*"] }); //add the legend map.on("layers-add-result", function (evt) { var layerInfo = array.map(evt.layers, function (layer, index) { return { layer: layer.layer, title: layer.layer.name }; }); if (layerInfo.length > 0) { var legendDijit = new Legend({ map: map, layerInfos: layerInfo }, "legendDiv"); legendDijit.startup(); } //add check boxes array.forEach(layerInfo, function (layer) { var layerName = layer.title; var checkBox = new CheckBox({ name: "checkBox" + layer.layer.id, value: layer.layer.id, checked: layer.layer.visible, onChange: function (evt) { var clayer = map.getLayer(this.value); clayer.setVisibility(!clayer.visible); this.checked = clayer.visible; } }); //add the check box and label to the TOC domConstruct.place(checkBox.domNode, "toggle", "after"); var checkLabel = domConstruct.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after"); domConstruct.place("<br />", checkLabel, "after"); }); }); map.addLayers([states, rivers, cities]); //Create the Basemap var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function(msg) { console.log("basemap gallery error: ", msg); }); //Create the Address Search geocoder = new Geocoder ({ arcgisGeocoder: false, geocoders: [ { url: "http://<server URL>/gissrv/rest/services/Geocode/Address_Locator_WKID2881/GeocodeServer", name: "Brevard County", placeholder: "Find a place", outfields: "*", }], map:map }, "search"); geocoder.startup(); geocoder.on("select", showLocation); // Zoom to the result and put a point function showLocation(evt) { map.graphics.clear(); var point = evt.result.feature.geometry; var symbol = new SimpleMarkerSymbol() .setStyle("square") .setColor(new Color([255,0,0,0.5])); var graphic = new Graphic(point, symbol); map.graphics.add(graphic); map.infoWindow.setTitle("Search Result"); map.infoWindow.setContent(evt.result.name); map.infoWindow.show(evt.result.feature.geometry); }; }); </script> </head> <body class="tundra"> <!--[if IE 7]> <style> html, body { margin: 0; } </style> <![endif]--> <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> <strong>Brevard County Test Map</strong> </div> <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"> <div data-dojo-type="dijit/layout/AccordionContainer"> <div data-dojo-type="dijit/layout/ContentPane" id="pane1" data-dojo-props="title:'Base Maps', selected:false"> <div id="basemapGallery"></div> </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Address Search'"> <div id="search"></div> i.e. 2725 Judge Fran Jamieson Way, Melbourne </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Layers'"> <span style="padding: 10px 0;">Click to toggle each layer on or off</span> <div id="toggle" style="padding: 2px 2px;"></div> </div> <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true"> <div id="legendDiv"></div> </div> </div> </div> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;"> <div id="HomeButton"></div> </div> </div> </body> </html>
Any help would be greatly appreciated!Tim
