Hi, i'm following this example to map the boundary of my authority. In my code below, i highlight the counties with a red border and dim the layer. I would like to reverse the dim effect, instead, i would like the basemap to be dimmed and the feature layer not dimmed. How can i achieve this effect? I have followed this example, which dims the basemap, but it also dims my feature layer. I don't want my feature layer to be dimmed, just everything that surrounds it. https://community.esri.com/thread/94149 thanks Feature layer hover | ArcGIS API for JavaScript 3.31 ! 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 > Feature Layer - display results as an InfoWindow onHover / title > link rel = "stylesheet" href = "https://js.arcgis.com/3.31/dijit/themes/tundra/tundra.css" > link rel = "stylesheet" href = "https://js.arcgis.com/3.31/esri/css/esri.css" > style > html , body , #mapDiv { padding : 0 ; margin : 0 ; height : 100 % ; } #mapDiv { position : relative ; } / style > script src = "https://js.arcgis.com/3.31/" > / script > script > var map , dialog ; require ( [ "esri/map" , "esri/layers/FeatureLayer" , "esri/symbols/SimpleFillSymbol" , "esri/symbols/SimpleLineSymbol" , "esri/renderers/SimpleRenderer" , "esri/graphic" , "esri/lang" , "esri/Color" , "dojo/number" , "dojo/dom-style" , "dijit/TooltipDialog" , "dijit/popup" , "dojo/domReady!" ] , function ( Map , FeatureLayer , SimpleFillSymbol , SimpleLineSymbol , SimpleRenderer , Graphic , esriLang , Color , number , domStyle , TooltipDialog , dijitPopup ) { map = new Map ( "mapDiv" , { basemap : "topo" , center : [ - 80.94 , 33.646 ] , zoom : 8 , slider : false } ) ; var southCarolinaCounties = new FeatureLayer ( "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3" , { mode : FeatureLayer . MODE_SNAPSHOT , outFields : [ "NAME" , "POP2000" , "POP2007" , "POP00_SQMI" , "POP07_SQMI" ] } ) ; southCarolinaCounties . setDefinitionExpression ( "STATE_NAME = 'South Carolina'" ) ; var symbol = new SimpleFillSymbol ( SimpleFillSymbol . STYLE_SOLID , new SimpleLineSymbol ( SimpleLineSymbol . STYLE_SOLID , new Color ( [ 255 , 0 , 0 ] ) , 2 ) , new Color ( [ 125 , 125 , 125 , 0.25 ] ) ) ; southCarolinaCounties . setRenderer ( new SimpleRenderer ( symbol ) ) ; map . addLayer ( southCarolinaCounties ) ; map . on ( "load" , function ( ) { map . graphics . enableMouseEvents ( ) ; } ) ; } ) ; / script > / head > body class = "tundra" > div id = "mapDiv" > / div > / body > / html >

Scott, Here is one solution: ! 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 > Feature Layer - display results as an InfoWindow onHover / title > link rel = "stylesheet" href = "https://js.arcgis.com/3.31/dijit/themes/tundra/tundra.css" > link rel = "stylesheet" href = "https://js.arcgis.com/3.31/esri/css/esri.css" > style > html , body , #mapDiv { padding : 0 ; margin : 0 ; height : 100 % ; } #mapDiv { position : relative ; } / style > script src = "https://js.arcgis.com/3.31/" > / script > script > var map ; require ( [ "esri/map" , "esri/layers/FeatureLayer" , "esri/symbols/SimpleFillSymbol" , "esri/symbols/SimpleLineSymbol" , "esri/renderers/SimpleRenderer" , "esri/graphic" , "esri/lang" , "esri/Color" , "dojo/number" , "dojo/dom-style" , "esri/geometry/geometryEngine" , "esri/tasks/QueryTask" , "esri/tasks/query" , "esri/SpatialReference" , "dojo/domReady!" ] , function ( Map , FeatureLayer , SimpleFillSymbol , SimpleLineSymbol , SimpleRenderer , Graphic , esriLang , Color , number , domStyle , geometryEngine , QueryTask , Query , SpatialReference ) { map = new Map ( "mapDiv" , { basemap : "topo" , center : [ - 80.94 , 33.646 ] , zoom : 8 , slider : false } ) ; var southCarolinaCounties = new FeatureLayer ( "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3" , { mode : FeatureLayer . MODE_SNAPSHOT , outFields : [ "NAME" , "POP2000" , "POP2007" , "POP00_SQMI" , "POP07_SQMI" ] } ) ; southCarolinaCounties . setDefinitionExpression ( "STATE_NAME = 'South Carolina'" ) ; var symbol = new SimpleFillSymbol ( SimpleFillSymbol . STYLE_SOLID , new SimpleLineSymbol ( SimpleLineSymbol . STYLE_SOLID , new Color ( [ 255 , 0 , 0 ] ) , 2 ) , new Color ( [ 125 , 125 , 125 , 0.25 ] ) ) ; var QT = new QueryTask ( "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" ) ; var scQuery = new Query ( ) ; scQuery . where = "STATE_NAME = 'South Carolina'" ; scQuery . outSpatialReference = new SpatialReference ( 102100 ) ; scQuery . outFields = [ "STATE_NAME" ] ; scQuery . returnGeometry = true ; QT . execute ( scQuery , function ( results ) { var mapExtent = map . extent . expand ( 9 ) ; console . info ( results ) ; var overlayGeom = geometryEngine . difference ( mapExtent , results . features [ 0 ] . geometry ) ; var overLayGra = new Graphic ( overlayGeom , symbol2 ) ; map . graphics . add ( overLayGra ) ; } ) ; var symbol2 = new SimpleFillSymbol ( SimpleFillSymbol . STYLE_SOLID , new SimpleLineSymbol ( SimpleLineSymbol . STYLE_SOLID , new Color ( [ 255 , 255 , 255 , 0 ] ) , 0 ) , new Color ( [ 255 , 255 , 255 , 0.80 ] ) ) ; map . addLayer ( southCarolinaCounties ) ; map . on ( "load" , function ( ) { map . graphics . enableMouseEvents ( ) ; } ) ; } ) ; / script > / head > body class = "tundra" > div id = "mapDiv" > / div > / body > / html >

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dim basemap

ScottWilson2

Hi, i'm following this example to map the boundary of my authority. In my code below, i highlight the counties with a red border and dim the layer. I would like to reverse the dim effect, instead, i would like the basemap to be dimmed and the feature layer not dimmed.

How can i achieve this effect?

I have followed this example, which dims the basemap, but it also dims my feature layer. I don't want my feature layer to be dimmed, just everything that surrounds it.

https://community.esri.com/thread/94149

thanks

Feature layer hover | ArcGIS API for JavaScript 3.31

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN>
 
 <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Feature Layer <SPAN class="operator token">-</SPAN> display results <SPAN class="keyword token">as</SPAN> an InfoWindow onHover<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/dijit/themes/tundra/tundra.css"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/esri/css/esri.css"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
 html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #mapDiv <SPAN class="punctuation token">{</SPAN>
 padding<SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
 margin<SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
 height<SPAN class="punctuation token">:</SPAN><SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 #mapDiv <SPAN class="punctuation token">{</SPAN>
 position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
 <SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">,</SPAN> dialog<SPAN class="punctuation token">;</SPAN>
 <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
 <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/lang"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/number"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-style"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"dijit/TooltipDialog"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dijit/popup"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN>
 <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
 Map<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN>
 SimpleFillSymbol<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol<SPAN class="punctuation token">,</SPAN>
 SimpleRenderer<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> esriLang<SPAN class="punctuation token">,</SPAN>
 Color<SPAN class="punctuation token">,</SPAN> number<SPAN class="punctuation token">,</SPAN> domStyle<SPAN class="punctuation token">,</SPAN>
 TooltipDialog<SPAN class="punctuation token">,</SPAN> dijitPopup
 <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo"</SPAN><SPAN class="punctuation token">,</SPAN>
 center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">80.94</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">33.646</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
 zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8</SPAN><SPAN class="punctuation token">,</SPAN>
 slider<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> southCarolinaCounties <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT<SPAN class="punctuation token">,</SPAN>
 outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"NAME"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP2000"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP2007"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP00_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP07_SQMI"</SPAN><SPAN class="punctuation token">]</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 southCarolinaCounties<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"STATE_NAME = 'South Carolina'"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
 SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
 <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
 SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
 <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN>
 <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 
 southCarolinaCounties<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleRenderer</SPAN><SPAN class="punctuation token">(</SPAN>symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>southCarolinaCounties<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">enableMouseEvents</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tundra"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

rscheitlin

Scott,

Here is one solution:

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Feature Layer <SPAN class="operator token">-</SPAN> display results <SPAN class="keyword token">as</SPAN> an InfoWindow onHover<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/dijit/themes/tundra/tundra.css"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/esri/css/esri.css"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
    html<SPAN class="punctuation token">,</SPAN>
    body<SPAN class="punctuation token">,</SPAN>
    #mapDiv <SPAN class="punctuation token">{</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #mapDiv <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/lang"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/number"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-style"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/tasks/QueryTask"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/tasks/query"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/SpatialReference"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/domReady!"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN>
      SimpleFillSymbol<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol<SPAN class="punctuation token">,</SPAN>
      SimpleRenderer<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> esriLang<SPAN class="punctuation token">,</SPAN>
      Color<SPAN class="punctuation token">,</SPAN> number<SPAN class="punctuation token">,</SPAN> domStyle<SPAN class="punctuation token">,</SPAN> geometryEngine<SPAN class="punctuation token">,</SPAN>
      QueryTask<SPAN class="punctuation token">,</SPAN> Query<SPAN class="punctuation token">,</SPAN> SpatialReference
    <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
        basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo"</SPAN><SPAN class="punctuation token">,</SPAN>
        center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">80.94</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">33.646</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8</SPAN><SPAN class="punctuation token">,</SPAN>
        slider<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> southCarolinaCounties <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>
        <SPAN class="string token">"https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
          mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT<SPAN class="punctuation token">,</SPAN>
          outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"NAME"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP2000"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP2007"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP00_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP07_SQMI"</SPAN><SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      southCarolinaCounties<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"STATE_NAME = 'South Carolina'"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
        SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
          SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
          <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN>
        <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
      <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> QT <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> scQuery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"STATE_NAME = 'South Carolina'"</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>outSpatialReference <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SpatialReference</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">102100</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"STATE_NAME"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
      
      QT<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>scQuery<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> mapExtent <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">9</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> overlayGeom <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">difference</SPAN><SPAN class="punctuation token">(</SPAN>mapExtent<SPAN class="punctuation token">,</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> overLayGra <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>overlayGeom<SPAN class="punctuation token">,</SPAN> symbol2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>overLayGra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> symbol2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
        SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
          SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
          <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN>
        <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.80</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
      <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>southCarolinaCounties<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">enableMouseEvents</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tundra"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

rscheitlin

Scott,

Sure the correct code would be:

overLayGraLayer.add(overLayGra);

ScottWilson2

Hi Robert, is it possible to put the overLayGra onto a separate graphics layer?

The wider context is that i'm plotting a marker on the map, each time the map is clicked i clear out any previous points using: map.graphics.clear();

This is causing the overlay graphic to disapear when the map is clicked twice!

I have commented out this line:

// map.graphics.add(overLayGra);

// Add the overlay to a separate Graphics Layer

overLayGraLayer = new esri.layers.GraphicsLayer();
overLayGraLayer.id = 'overLayGraLayer';
map.addLayer(overLayGraLayer);

overLayGraLayer.graphics.add(overLayGra);

But i get an error:

TypeError: overLayGraLayer.graphics.add is not a function

Basically, would would like it that map.graphics.clear() has no effect on the overlay graphic.

thanks for your help

ScottWilson2

Perfect, thank you Robert

rscheitlin

Scott,

Here is one solution:

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Feature Layer <SPAN class="operator token">-</SPAN> display results <SPAN class="keyword token">as</SPAN> an InfoWindow onHover<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/dijit/themes/tundra/tundra.css"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/esri/css/esri.css"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
    html<SPAN class="punctuation token">,</SPAN>
    body<SPAN class="punctuation token">,</SPAN>
    #mapDiv <SPAN class="punctuation token">{</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #mapDiv <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.31/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/lang"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/number"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-style"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/tasks/QueryTask"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/tasks/query"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/SpatialReference"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/domReady!"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN>
      SimpleFillSymbol<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol<SPAN class="punctuation token">,</SPAN>
      SimpleRenderer<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> esriLang<SPAN class="punctuation token">,</SPAN>
      Color<SPAN class="punctuation token">,</SPAN> number<SPAN class="punctuation token">,</SPAN> domStyle<SPAN class="punctuation token">,</SPAN> geometryEngine<SPAN class="punctuation token">,</SPAN>
      QueryTask<SPAN class="punctuation token">,</SPAN> Query<SPAN class="punctuation token">,</SPAN> SpatialReference
    <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
        basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo"</SPAN><SPAN class="punctuation token">,</SPAN>
        center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">80.94</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">33.646</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8</SPAN><SPAN class="punctuation token">,</SPAN>
        slider<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> southCarolinaCounties <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>
        <SPAN class="string token">"https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
          mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT<SPAN class="punctuation token">,</SPAN>
          outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"NAME"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP2000"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP2007"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP00_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP07_SQMI"</SPAN><SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      southCarolinaCounties<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"STATE_NAME = 'South Carolina'"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
        SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
          SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
          <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN>
        <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
      <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> QT <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> scQuery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"STATE_NAME = 'South Carolina'"</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>outSpatialReference <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SpatialReference</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">102100</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"STATE_NAME"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
      scQuery<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
      
      QT<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>scQuery<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> mapExtent <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">9</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> overlayGeom <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">difference</SPAN><SPAN class="punctuation token">(</SPAN>mapExtent<SPAN class="punctuation token">,</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> overLayGra <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>overlayGeom<SPAN class="punctuation token">,</SPAN> symbol2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>overLayGra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> symbol2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
        SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
          SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
          <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN>
        <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.80</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
      <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>southCarolinaCounties<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">enableMouseEvents</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tundra"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.