Im trying to use a renderer and a legend on data from a featureSet, it displayes symbols and popups but the renderer failes.
the data comes from a featureLayer but I display it with view.graphics so I think that may be the problem. Still I cant find an add graphic(maybe addAttachment but I could not make it work) .
this is my code:
https://codepen.io/segev-salman/pen/MdmrLB
Do I need a new featureLayer or can I use the one with the url to the service to be displayed with the renderer with queryed data and if not do i really have to insert the data manually after the query does it just bring me back graphics or changes the layer?
Solved! Go to Solution.
Segev,
Here is what I think you are really after. If you are going to use a FeatureLayer and just want that layer to show features based on a SQL statement, then you set the layers definitionExpression.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
'dojo/dom',
'dojo/on',
'esri/Map',
'esri/views/MapView',
'esri/tasks/support/Query',
'esri/layers/GraphicsLayer',
'esri/Graphic',
'esri/tasks/QueryTask',
'esri/layers/FeatureLayer',
'esri/widgets/Legend',
], function (
dom, on, Map, MapView, Query, GraphicsLayer, Graphic, QueryTask, FeatureLayer, Legend
) {
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543, 34.02700],
zoom: 13
});
var symbol = {
type: "simple-marker",
style: "diamond",
size: 14,
color: [230, 0, 169, 0.29], // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255, 0.5],
width: 1.5 // points
}
};
var popupTemplate = {
title: "la_county_labor_centrs",
content: "Out of population of {TOTAL_POP} people, {POP_LABOR} are working." // All of the fields
};
////////////////// renderer options//////////
const less35 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#fffcd4",
style: "circle",
size: 8,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
const less50 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#b1cdc2",
style: "circle",
size: 10,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
const more50 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#38627a",
style: "circle",
size: 12,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
const more75 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#0d2644",
style: "circle",
size: 14,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
///////////////////////////////
var renderer = {
type: "class-breaks", // autocasts as new ClassBreaksRenderer()
field: "POP_LABOR",
normalizationField: "TOTAL_POP",
legendOptions: {
title: "% of labor workers out of population"
},
defaultSymbol: symbol,
defaultLabel: "no data",
classBreakInfos: [{
minValue: 0,
maxValue: 0.3499,
symbol: less35,
label: "< 35%"
},
{
minValue: 0.35,
maxValue: 0.4999,
symbol: less50,
label: "35 - 50%"
},
{
minValue: 0.5,
maxValue: 0.7499,
symbol: more50,
label: "50 - 75%"
},
{
minValue: 0.75,
maxValue: 1.0,
symbol: more75,
label: "> 75%"
}
]
};
var layer = new FeatureLayer({
url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureServer/0',
renderer: renderer,
popupTemplate: popupTemplate,
title: "LA County Labor Points"
});
map.add(layer);
view.ui.add(dom.byId('population'), "top-right");
var legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
on(dom.byId('population'), 'change', function (e) {
var population = e.target.value;
if (population.length > 0) {
layer.definitionExpression = "TOTAL_POP > " + population;
}
});
});
</script>
</head>
<body>
<select id="population" name="population">
<option value="" selected="selected">Select Population</option>
<option value="2500">2,500</option>
<option value="5000">5,000</option>
<option value="7500">7,500</option>
</select>
<div id="viewDiv"></div>
</body>
</html>
found applyedits.addFetures and im using the same featureLayer the renderer dosest work yet but this is the new code
Segev,
Here is what I think you are really after. If you are going to use a FeatureLayer and just want that layer to show features based on a SQL statement, then you set the layers definitionExpression.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
'dojo/dom',
'dojo/on',
'esri/Map',
'esri/views/MapView',
'esri/tasks/support/Query',
'esri/layers/GraphicsLayer',
'esri/Graphic',
'esri/tasks/QueryTask',
'esri/layers/FeatureLayer',
'esri/widgets/Legend',
], function (
dom, on, Map, MapView, Query, GraphicsLayer, Graphic, QueryTask, FeatureLayer, Legend
) {
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543, 34.02700],
zoom: 13
});
var symbol = {
type: "simple-marker",
style: "diamond",
size: 14,
color: [230, 0, 169, 0.29], // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255, 0.5],
width: 1.5 // points
}
};
var popupTemplate = {
title: "la_county_labor_centrs",
content: "Out of population of {TOTAL_POP} people, {POP_LABOR} are working." // All of the fields
};
////////////////// renderer options//////////
const less35 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#fffcd4",
style: "circle",
size: 8,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
const less50 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#b1cdc2",
style: "circle",
size: 10,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
const more50 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#38627a",
style: "circle",
size: 12,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
const more75 = {
type: "simple-marker", // autocasts as new simple-markerSymbol()
color: "#0d2644",
style: "circle",
size: 14,
outline: {
width: 1.5,
color: [255, 255, 255, 0.5]
}
};
///////////////////////////////
var renderer = {
type: "class-breaks", // autocasts as new ClassBreaksRenderer()
field: "POP_LABOR",
normalizationField: "TOTAL_POP",
legendOptions: {
title: "% of labor workers out of population"
},
defaultSymbol: symbol,
defaultLabel: "no data",
classBreakInfos: [{
minValue: 0,
maxValue: 0.3499,
symbol: less35,
label: "< 35%"
},
{
minValue: 0.35,
maxValue: 0.4999,
symbol: less50,
label: "35 - 50%"
},
{
minValue: 0.5,
maxValue: 0.7499,
symbol: more50,
label: "50 - 75%"
},
{
minValue: 0.75,
maxValue: 1.0,
symbol: more75,
label: "> 75%"
}
]
};
var layer = new FeatureLayer({
url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureServer/0',
renderer: renderer,
popupTemplate: popupTemplate,
title: "LA County Labor Points"
});
map.add(layer);
view.ui.add(dom.byId('population'), "top-right");
var legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
on(dom.byId('population'), 'change', function (e) {
var population = e.target.value;
if (population.length > 0) {
layer.definitionExpression = "TOTAL_POP > " + population;
}
});
});
</script>
</head>
<body>
<select id="population" name="population">
<option value="" selected="selected">Select Population</option>
<option value="2500">2,500</option>
<option value="5000">5,000</option>
<option value="7500">7,500</option>
</select>
<div id="viewDiv"></div>
</body>
</html>
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Hey Robert,
This works great!
TBH i wasnt sure what i was really after myself, im trying things to get a hang of it.
but if i can run an sql expression on a featureLayer with definitionExpression what can i do with the output of the queryTask ? I saw it used for displaying results as text, but you can also get geometry so how is it any different from a definition Expression?
Segev,
There is many reasons to use a QueryTask. Say you want to apply a different symbol (for example highlight) certain features, or you want to use a features geometry to do another spatial query on a layer, etc, etc.