Dim basemap

120
4
Jump to solution
01-21-2020 03:47 AM
ScottWilson2
New Contributor II

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

ScottWilson2
New Contributor II

Perfect, thank you Robert

0 Kudos
ScottWilson2
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Scott,

   Sure the correct code would be:

overLayGraLayer.add(overLayGra);