<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <!--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>change feature layer selection color on the fly</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript">djConfig = { parseOnLoad:true };</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); var selectionToolbar, featureLayer; var syms = {} var selectionToolbar2, featureLayer2; var syms2 = {} function init() { // populate the object used to set the // feature layer selection symbol syms.red = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5])); syms.blue = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5])); syms.green = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5])); syms2.red = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0,0.5])); syms2.blue = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255,0.5])); syms2.green = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,255,0,0.5])); var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) ); var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true }); dojo.connect(map, "onLoad", initSelectToolbar); dojo.connect(map, "onLoad", initSelectToolbar2); var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(baseMapLayer); var content = "<b>Status</b>: ${STATUS}" + "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" + "<br><b>Total Acres</b>: ${APPROXACRE}" + "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters"; var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content); featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate: infoTemplate, outFields: ["*"] }); featureLayer.setDefinitionExpression("PROD_GAS='Yes'"); featureLayer.setSelectionSymbol(syms[dojo.byId('color-select').value]); dojo.connect(featureLayer, "onSelectionClear", function(features) { }); //* // connect to the drop-down's onchange event and // change the feature layer's selection color dojo.connect(dojo.byId('color-select'), 'onchange', function(evt) { featureLayer.setSelectionSymbol(syms[evt.target.value]); }); //*/ map.addLayer(featureLayer); featureLayer2 = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND }); featureLayer2.setDefinitionExpression("FIELD_NAME is not null"); featureLayer2.setSelectionSymbol(syms2[dojo.byId('color-select2').value]); dojo.connect(featureLayer2, "onSelectionClear", function(features) { }); //* // connect to the drop-down's onchange event and // change the feature layer's selection color dojo.connect(dojo.byId('color-select2'), 'onchange', function(evt) { featureLayer2.setSelectionSymbol(syms2[evt.target.value]); }); //*/ map.addLayer(featureLayer2); } function initSelectToolbar(map) { selectionToolbar = new esri.toolbars.Draw(map); var selectQuery = new esri.tasks.Query(); dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) { selectionToolbar.deactivate(); selectQuery.geometry = geometry; featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_ADD); }); } function initSelectToolbar2(map) { selectionToolbar2 = new esri.toolbars.Draw(map); var selectQuery2 = new esri.tasks.Query(); dojo.connect(selectionToolbar2, "onDrawEnd", function(geometry) { selectionToolbar2.deactivate(); selectQuery2.geometry = geometry; featureLayer2.selectFeatures(selectQuery2, esri.layers.FeatureLayer.SELECTION_ADD); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <select id="color-select"> <option>red</option> <option>blue</option> <option>green</option> </select> <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button> <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br> <select id="color-select2"> <option>red</option> <option>blue</option> <option>green</option> </select> <button dojoType="dijit.form.Button" onClick="selectionToolbar2.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button> <button dojoType="dijit.form.Button" onClick="featureLayer2.clearSelection();">Clear Selection</button> <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div> <span id="messages"></span> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <!--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>change feature layer selection color on the fly</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript">djConfig = { parseOnLoad:true };</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); var selectionToolbar, featureLayer; var syms = {} function init() { // populate the object used to set the // feature layer selection symbol syms.red = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5])); syms.blue = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5])); syms.green = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5])); var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) ); var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true }); dojo.connect(map, "onLoad", initSelectToolbar); var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(baseMapLayer); var content = "<b>Status</b>: ${STATUS}" + "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" + "<br><b>Total Acres</b>: ${APPROXACRE}" + "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters"; var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content); featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate: infoTemplate, outFields: ["*"] }); featureLayer.setDefinitionExpression("PROD_GAS='Yes'"); featureLayer.setSelectionSymbol(syms[dojo.byId('color-select').value]); dojo.connect(featureLayer, "onSelectionComplete", sumGasProduction); dojo.connect(featureLayer, "onSelectionClear", function(features) { dojo.byId('messages').innerHTML = "<i>No Selected Fields</i>"; }); //* // connect to the drop-down's onchange event and // change the feature layer's selection color dojo.connect(dojo.byId('color-select'), 'onchange', function(evt) { featureLayer.clearSelection(); featureLayer.setSelectionSymbol(syms[evt.target.value]); }); //*/ map.addLayer(featureLayer); } function initSelectToolbar(map) { selectionToolbar = new esri.toolbars.Draw(map); var selectQuery = new esri.tasks.Query(); dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) { selectionToolbar.deactivate(); selectQuery.geometry = geometry; featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW); }); } function sumGasProduction(features) { var productionSum = 0; //summarize the cummulative gas production to display dojo.forEach(features, function(feature) { productionSum = productionSum + feature.attributes.CUMM_GAS; }); dojo.byId('messages').innerHTML = "<b>Selected Fields Production: " + productionSum + " mcf. </b>"; } dojo.addOnLoad(init); </script> </head> <body class="claro"> <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button> <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br> <select id="color-select"> <option>red</option> <option>blue</option> <option>green</option> </select> <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div> <span id="messages"></span> </body> </html>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
