Fairly new to JS api: need help toggling feature layers served by AGO

AZendel · ‎12-10-2013

We have an organizational account. I've created a feature service that shows the same census tracts symbolized different ways (this is just a test scenario). For each layer in ArcMap, I set up the class breaks symbology and turned off the fields that I didn't want to display. Then I published the service to AGO and shared the service definition and features with "everyone". The service is accessible here - at least for now; we'll probably remove this particular demo once we have something working: http://www.arcgis.com/home/item.html?id=deeafd46294240a49f06c8e84e8f09b0

Now we want to be able to display these three layers on top of a basemap (likely one of the ESRI-provided base maps) and allow the map users to toggle the individual layers. But we don't want to do this in the 'canned' AGO maps -- we don't want to embed this: http://bit.ly/JceTvp. We want to create javascript map with some check boxes to toggle the layers on and off, much like this sample. I understand that there is a difference between a ArcGISDynamicMapServiceLayer and a FeatureLayer. I've also unsuccessfully tried to create a simple JS map with one base map layer and one of these feature layers. Are there any good and complete examples that show how we might do this. Is this even possible with AGO feature services and JS?

Ultimately, we'll need map div's on several web pages that will discuss various demographic and other regional indicators.

KellyHutchins · ‎12-10-2013

Here's some sample code that shows how to toggle the feature layer visibility for the layers in the web map. The key to this is the rresponse from createMap that provides access to the operational layers in the web map.

<!DOCTYPE html>   <html>   <head>   <title>Create a Web Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>     html,body,#mapDiv,.map.container{       padding:0;       margin:0;       height:100%;     }     #layerList{       background-color: #fff;       position: absolute !important;       z-index: 99;       padding:10px;       top:10px;       right:20px;     }   </style>    <script>var dojoConfig = { parseOnLoad:true };</script>   <script src="http://js.arcgis.com/3.7compact/"></script>   <script>      var map;          require([       "esri/map",       "esri/arcgis/utils",       "dojo/_base/array",       "dojo/dom-construct",       "dojo/on",       "dojo/domReady!"       ], function (Map, arcgisUtils, array, domConstruct, on) {         arcgisUtils.createMap("f8ec60a8c38047e78571b4b77eb706a4", "mapDiv").then(function (response) {         map = response.map              //Get the layers in the map.          var operationalLayers = response.itemInfo.itemData.operationalLayers;         array.forEach(operationalLayers , function(layer){           //create a checkbox and label for each layer in the map            var cbox = domConstruct.create("input",{             type: "checkbox",             name: layer.title,             value: layer.id,             checked: layer.visibility           },"layerList");                      var cbox_label = domConstruct.create("label",{             htmlFor: layer.title,             innerHTML: layer.title + "</br>"           },"layerList");             //When the checkbox is clicked change the layer visibility            on(cbox, "click", function(evt){             //Find the layer based on the layer id             var layerid = evt.target.value;             var layer = map.getLayer(layerid);             layer.setVisibility(evt.srcElement.checked);            });            })       });     });   </script>    </head>    <body>     <div id="mapDiv"></div>     <div id="layerList"></div>   </body>   </html>

View solution in original post

KellyHutchins · ‎12-10-2013

Here's some sample code that shows how to toggle the feature layer visibility for the layers in the web map. The key to this is the rresponse from createMap that provides access to the operational layers in the web map.

<!DOCTYPE html>   <html>   <head>   <title>Create a Web Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>     html,body,#mapDiv,.map.container{       padding:0;       margin:0;       height:100%;     }     #layerList{       background-color: #fff;       position: absolute !important;       z-index: 99;       padding:10px;       top:10px;       right:20px;     }   </style>    <script>var dojoConfig = { parseOnLoad:true };</script>   <script src="http://js.arcgis.com/3.7compact/"></script>   <script>      var map;          require([       "esri/map",       "esri/arcgis/utils",       "dojo/_base/array",       "dojo/dom-construct",       "dojo/on",       "dojo/domReady!"       ], function (Map, arcgisUtils, array, domConstruct, on) {         arcgisUtils.createMap("f8ec60a8c38047e78571b4b77eb706a4", "mapDiv").then(function (response) {         map = response.map              //Get the layers in the map.          var operationalLayers = response.itemInfo.itemData.operationalLayers;         array.forEach(operationalLayers , function(layer){           //create a checkbox and label for each layer in the map            var cbox = domConstruct.create("input",{             type: "checkbox",             name: layer.title,             value: layer.id,             checked: layer.visibility           },"layerList");                      var cbox_label = domConstruct.create("label",{             htmlFor: layer.title,             innerHTML: layer.title + "</br>"           },"layerList");             //When the checkbox is clicked change the layer visibility            on(cbox, "click", function(evt){             //Find the layer based on the layer id             var layerid = evt.target.value;             var layer = map.getLayer(layerid);             layer.setVisibility(evt.srcElement.checked);            });            })       });     });   </script>    </head>    <body>     <div id="mapDiv"></div>     <div id="layerList"></div>   </body>   </html>

AZendel · ‎12-11-2013

Thanks for the very quick and very helpful reply. Your sample helps us get our first part of the project rolling nicely. I think that would make a very good example to add to the Samples page on the ArcGIS JS API

Another question, though: do we have to put our feature service layers into a AGO map to add them to a JS map? It seems to me that we should be able to reference individual layers since we can view all of the REST endpoint data for them. Any examples on doing that?

Thanks again!

KellyHutchins · ‎12-11-2013

Hi Alex,

Yes you could do this without a web map by just adding the layers to the map. Take a look at the following sample for an example of how to add the layers to the map:

https://developers.arcgis.com/en/javascript/jssamples/fl_ondemand.html

The benefit of using web maps is that you can write less code. In ArcGIS Online you can create the map, add layers, define symbology, setup popup windows then save the map and use it in the JSAPI. All the info you defined in the web map will persist so you don't have to spend time writing code to define the popup, render layers etc.

AZendel · ‎12-12-2013

Thanks for another quick and very helpful response, Kelly. I was able to create a 'from scratch' map that functioned as expected.