Im having a problem displaying a query.
i tried it both on a graphic layer and a feature layer
the code is the same for both except the layer is different type and the apply is accordingly different
feature layer code:
https://codepen.io/segev-salman/pen/MdrBGq?editors=1000
graphic layer code:
https://codepen.io/segev-salman/pen/xNpzKr
on change a query happens and displayed with a different renderer.
Solved! Go to Solution.
Here is the featurelayer sample fixed:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>query-map</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
#selectPanel {
padding: 30px;
background-color: rgba(255, 255, 255, 0.8);
}
.esri-button {
margin: 2px;
}
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"> -->
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
'dojo/dom',
'dojo/on',
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
], function (Map, MapView, FeatureLayer,Expand,dom, on,Query,GraphicsLayer) {
var TF = new FeatureLayer({
url: "https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
});
var newRend, layer;
var map = new Map({
basemap: "gray",
layers: [TF]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-102.370576, 40.172530],
zoom: 5
});
///renderers
var origRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: [0, 197, 255, 255],
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
var maleRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: "#FF0800",
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
var childRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: "#ffcd00",
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
var femRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: "#AF1668",
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
///get resaults and add them to a G-layer
function succ(featureSet) {
if(layer){
map.remove(layer);
}
layer = new FeatureLayer({
objectIdField: "ObjectId",
source: featureSet.features
})
map.remove(TF);
layer.renderer = newRend;
map.add(layer);
};
function fail(error) {
console.error('An error ocurred in the query: ', error);
};
on(dom.byId('select'), 'change', function (e) {
var select = e.target.value;
var tableC;
if (select == "male") {
tableC = "male",
newRend = maleRend
}
else if (select == "fem") {
tableC = "fem",
newRend = femRend
}
else if (select == "chld") {
tableC = "chld",
newRend = childRend
}
else {
tableC = "1",
newRend = origRend
}
var query = TF.createQuery();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = tableC + " = 1";
TF.queryFeatures(query).then(succ, fail);
});
view.ui.add("selectPanel", "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="selectPanel" class="esri-widget">
<h2>Facilities for:</h2>
<select id="select" class="esri-select" >
<option value="All">All</option>
<option value="male">Male</option>
<option value="fem">Female</option>
<option value="chld">Child</option>
</select>
</div>
</body>
</html>
Here is the featurelayer sample fixed:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>query-map</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
#selectPanel {
padding: 30px;
background-color: rgba(255, 255, 255, 0.8);
}
.esri-button {
margin: 2px;
}
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"> -->
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
'dojo/dom',
'dojo/on',
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
], function (Map, MapView, FeatureLayer,Expand,dom, on,Query,GraphicsLayer) {
var TF = new FeatureLayer({
url: "https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
});
var newRend, layer;
var map = new Map({
basemap: "gray",
layers: [TF]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-102.370576, 40.172530],
zoom: 5
});
///renderers
var origRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: [0, 197, 255, 255],
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
var maleRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: "#FF0800",
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
var childRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: "#ffcd00",
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
var femRend = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: "#AF1668",
size: 7,
outline: {
color: [255, 255, 255, 255],
width: 0.75
}}};
///get resaults and add them to a G-layer
function succ(featureSet) {
if(layer){
map.remove(layer);
}
layer = new FeatureLayer({
objectIdField: "ObjectId",
source: featureSet.features
})
map.remove(TF);
layer.renderer = newRend;
map.add(layer);
};
function fail(error) {
console.error('An error ocurred in the query: ', error);
};
on(dom.byId('select'), 'change', function (e) {
var select = e.target.value;
var tableC;
if (select == "male") {
tableC = "male",
newRend = maleRend
}
else if (select == "fem") {
tableC = "fem",
newRend = femRend
}
else if (select == "chld") {
tableC = "chld",
newRend = childRend
}
else {
tableC = "1",
newRend = origRend
}
var query = TF.createQuery();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = tableC + " = 1";
TF.queryFeatures(query).then(succ, fail);
});
view.ui.add("selectPanel", "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="selectPanel" class="esri-widget">
<h2>Facilities for:</h2>
<select id="select" class="esri-select" >
<option value="All">All</option>
<option value="male">Male</option>
<option value="fem">Female</option>
<option value="chld">Child</option>
</select>
</div>
</body>
</html>
Robert,
this is great.
is it better to create a new FL than applyedits and change the renderer of an exsisting one?
why do you specify objectIdField: "ObjectId", is it needed when you add a featureSet to a layer like that?
can you show me a correct syntax to applyedits.updateFeatures on this code?
Is it better to create a new FL than applyedits and change the renderer of an exsisting one?
Yes.
Why do you specify objectIdField: "ObjectId", is it needed when you add a featureSet to a layer like that?
Its required.
Can you show me a correct syntax to applyedits.updateFeatures on this code?
That's a bit of work. You have to defines the fields and geometry type when you create a new FeatureLayer and want to add features using applyEdits. To complicated.
this is super helpful thank you!