ArcGIS Javascript API - addLayers -
i working on project trying add feature layers arcgis online web map application using javascript api user can toggle layers on , off through html tick box. layers importing correctly , displayed when tick boxes bypassed can work tickboxes. have hacked code arcgis samples etc must small thing keep missing!
here code - want layers toggle on , off on top of constant base map based on checkboxes user ticks on , off
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!--the viewport meta tag used improve presentation , behavior of samples on ios devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>select feature layer</title> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> <style> html, body, #mapdiv { padding: 0; margin: 0; height: 100%; } #messages{ background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 20px; z-index: 40; } </style> <script src="http://js.arcgis.com/3.10/"></script> <script> var map; require([ "esri/map", "esri/layers/featurelayer", "esri/tasks/query", "esri/geometry/circle", "esri/graphic", "esri/infotemplate", "esri/symbols/simplemarkersymbol", "esri/symbols/simplelinesymbol", "esri/symbols/simplefillsymbol", "esri/renderers/simplerenderer", "esri/config", "esri/color", "dojo/dom", "dojo/domready!", "dojo/on", "dojo/query", "dojo/domready!", "esri/layers/arcgisdynamicmapservicelayer", "esri/layers/imageparameters", ], function ( map, featurelayer, query, circle, graphic, infotemplate, simplemarkersymbol, simplelinesymbol, simplefillsymbol, simplerenderer, esriconfig, color, dom, on, query, arcgisdynamicmapservicelayer, imageparameters ) { // use proxy page if url generated page greater 2000 characters // // should not needed query & select functions performed on client esriconfig.defaults.io.proxyurl = "/proxy"; map = new map("mapdiv", { basemap: "streets", center: [-120.303130, 36.542750], zoom: 5, slider: false }); //add census block points in on demand mode. note info template has been defined when //selected features clicked popup window appear displaying content defined in info template. var offices = new featurelayer("url", { infotemplate: new infotemplate("block: ${block}", "${*}"), outfields: ["*"] }); var northridge = new featurelayer("url", { infotemplate: new infotemplate("block: ${block}", "${*}"), outfields: ["*"] }); var associates = new featurelayer("url", { infotemplate: new infotemplate("block: ${block}", "${*}"), outfields: ["*"] }); // selection symbol used draw selected census block points within buffer polygon var symbol = new simplemarkersymbol( simplemarkersymbol.style_circle, 12, new simplelinesymbol( simplelinesymbol.style_null, new color([247, 34, 101, 0.9]), 1 ), new color([207, 34, 171, 0.5]) ); offices.setselectionsymbol(symbol); //make unselected features invisible var nullsymbol = new simplemarkersymbol().setsize(10); var redcircle = new simplemarkersymbol().setsize(8); offices.setrenderer(new simplerenderer(nullsymbol)); on(dom.byid("layer0checkbox"), "change", updatelayervisibility); on(dom.byid("layer1checkbox"), "change", updatelayervisibility); on(dom.byid("layer2checkbox"), "change", updatelayervisibility); function updatelayervisibility() { var inputs = query(".list_item"); var inputcount = inputs.length; //in application layer 2 on. visiblelayerids = [2]; (var = 0; < inputcount; i++) { if (inputs[i].checked) { visiblelayerids.push(inputs[i].value); } } if (visiblelayerids.length === 0) { visiblelayerids.push(-1); } map.addlayers(visiblelayerids); } }); </script> </head> <body> <br /> <br /> layer list : <span id="layer_list"><input type='checkbox' class='list_item' id='layer0checkbox' value="northridge" />earthquake <input type='checkbox' class='list_item' id='layer1checkbox' value="offices" />offices <input type='checkbox' class='list_item' id='layer2checkbox' value="associates" />associates </span><br /> <br /> <div id="mapdiv"></div> </body> </html>
done long time ago
changevlayervisibility: function(names) { ext.array.each(map.graphicslayerids, function(id) { map.getlayer(id).setvisibility(names.indexof(id) !== -1); }); }, check example here: http://smart-tech-group.com/arcgismap/ map-related logic stored in http://smart-tech-group.com/arcgismap/app/view/arcmapviewer.js js-newbie then, feel free argue on code style;)
Comments
Post a Comment