I am trying to change the color of certain features within a feature layer. Here is my code:
The if statement isn't too important, but when that condition is true, I want those features to have a certain color, and when the condition is not true, I want those features to be black. What seems to be happening, is the features only get their symbol / color from the layer (response.features.layer.renderer.symbol).
Am I doing something wrong here? Any help or guidance would be much appreciated.
Michael,
The standard way to do this is to add the result feature (graphic) to the views graphics layer with your desired symbology. So basically you are overlaying a graphic with your symbology on top of the existing feature.
Hi Robert,
Thanks for the reply. I'm not sure I understand what you are referring to. Would you be able to provide an example or documentation of sorts?
Sure here is a modified sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Change Feature Color</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#menu {
padding: 1em;
}
#navy {
background-color: #25427c;
}
#green {
background-color: #039962;
}
#turqoise {
background-color: #a2f9f5;
}
.color-btn {
border: 1px solid rgb(173, 172, 172);
width: 40px;
height: 20px;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/views/MapView"
], function (
Map,
PopupTemplate,
FeatureLayer,
MapView
) {
//Create the map
var map = new Map({
basemap: "gray"
});
//Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117.08, 34.10],
zoom: 12
});
view.popup.viewModel.highlightEnabled = false;
view.ui.add("menu", "top-right");
var template = new PopupTemplate({
title: "Trail run",
content: "{name}"
});
featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
outFields: ["*"],
popupTemplate: template
});
map.add(featureLayer);
function setTrailColor(color) {
view.graphics.removeAll();
var query = featureLayer.createQuery();
query.where = "name = 'Morton Peak - great run. great trail'"
featureLayer.queryFeatures(query).then(function (response) {
response.features.map(function(graphic){
var gra = graphic.clone();
graphic.layer.renderer.getUniqueValueInfo(graphic).then(function(uniqueValueInfo){
var sym = uniqueValueInfo.symbol.clone();
sym.color = color;
gra.symbol = sym;
view.graphics.add(gra);
});
});
}).catch(function(err){
console.error(err);
});
}
document.getElementById("navy").addEventListener("click", function () {
setTrailColor("#25427c");
});
document.getElementById("green").addEventListener("click", function () {
setTrailColor("#039962");
});
document.getElementById("turqoise").addEventListener("click", function () {
setTrailColor("#a2f9f5");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="menu" class="esri-widget">
<h4>Change Morton Peak Trail Color</h4>
<button id="navy" class="color-btn"></button>
<button id="green" class="color-btn"></button>
<button id="turqoise" class="color-btn"></button>
</div>
</body>
</html>