displaying a query on a feature/graphic layer

316
4
Jump to solution
05-22-2019 11:20 AM
deleted-user-wcpelUUf_XXx
New Contributor III

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.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

deleted-user-wcpelUUf_XXx
New Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
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.

deleted-user-wcpelUUf_XXx
New Contributor III

this is super helpful thank you!

0 Kudos