Segev,
You had many issues in your code. Mainly you were not referencing the 4.x module names (you were using some old 3.x names). Your Query where clause was incorrect. Your function parameters where out of line with your require array order. Your succ function had issue as you already knew.
<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',
], function (
dom, on, Map, MapView, Query, GraphicsLayer, Graphic, QueryTask
) {
var symbol = {
type: "simple-marker",
style: "cross",
color: [50, 50, 255],
size: "10px",
outline: {
color: [255, 255, 0],
width: 3
}
};
url = 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureServer/0';
var layer = new GraphicsLayer();
function succ(featureSet) {
layer.removeAll();
var gras = featureSet.features.map(function(gra){
gra.symbol = symbol;
return gra;
});
layer.addMany(gras);
map.add(layer);
};
function fail(error) {
console.error('An error ocurred in the query: ', error);
};
on(dom.byId('population'), 'change', function (e) {
var population = e.target.value;
if (population.length > 0) {
var querytask = new QueryTask({
url: url
});
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = "TOTAL_POP > " + population;
querytask.execute(query).then(succ, fail);
}
});
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543, 34.02700],
zoom: 13
});
});
</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>