Dim basemap

ScottWilson2 · ‎01-21-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎01-21-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎01-21-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ScottWilson2 · ‎01-21-2020

Perfect, thank you Robert

ScottWilson2 · ‎01-21-2020

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

RobertScheitlin__GISP · ‎01-21-2020

Scott,

Sure the correct code would be:

overLayGraLayer.add(overLayGra);