I still can't seem to find the correct place to capture my layer view to use for the client side filter; I have tried on 'fl' as well as 'SeismicData' layers. Below is my complete code: (there is no syntax errors, not sure why the editor below is commenting out a closing bracket, the only errors arise are ones referencing the layerview 'eqLayerView'
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Add layers to a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.contn { position: absolute; bottom: 0px; left: 0px;}
</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/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/geometryEngine",
"esri/geometry/Circle",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/widgets/Legend"
], function(
Map,
MapView,
FeatureLayer,
geometryEngine,
Circle,
Graphic,
GraphicsLayer,
SimpleFillSymbol,
ClassBreaksRenderer,
Legend) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-122, 37],
zoom: 2
});
shakeLays();
function shakeLays() {
let selectedID;
let currentShakes;
let SeismicData;
let eqLayerView;
let fl;
fetchdata();
function fetchdata(){
SeismicData = new FeatureLayer({
title: "MMI - Shake Intensity",
url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/",
outFields: ["*"],
});
SeismicData.definitionExpression = "eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2";
};
let quakeFoldr = document.getElementById("Shakemaps").parentElement;
let onup = quakeFoldr.parentElement;
let twup = onup.parentElement;
let idElement = document.createElement("div");
let isElement = document.createElement("ul");
idElement.className += "shaked";
isElement.className += "k-group";
twup.appendChild(idElement);
idElement.appendChild(isElement);
var graphicsLayer = new GraphicsLayer();
function filterByID(event) {
console.log('filter hit');
let sqlExp = '';
let idChkBoxes = document.querySelectorAll(`.id-item`);
idChkBoxes.forEach(function(node){
if(node.checked){
sqlExp += "'" + node.getAttribute("data-id") + "' ";
}
});
sqlExp = sqlExp.replace(/' /g, "', ");
sqlExp = sqlExp.substring(0, sqlExp.length - 2);
eqLayerView.filter = {
where: "id IN (" + sqlExp + ")"
};
}
view.when(SeismicData).then(function(layerView) {
var query = SeismicData.createQuery();
query.outFields = ["id"];
query.returnDistinctValues = true;
query.returnGeometry = false;
SeismicData.queryFeatures(query).then(function(results){
results.features.map(function(feat){
let id = feat.attributes["id"];
let opt = document.createElement("input");
opt.type = "checkbox";
let label = document.createElement('label')
label.innerHTML = id;
opt.className = "id-item visible-id shakeids";
opt.setAttribute("data-id", id);
opt.name = "shaks";
idElement.appendChild(opt);
idElement.appendChild(label);
getCur(event);
});
view.whenLayerView(SeismicData).then(function(layerView) {
eqLayerView = layerView;
console.log(eqLayerView);
console.log(SeismicData);
});
});
function getCur(event) {
let chkst = document.querySelector('.shaked');
if (chkst) {
chkst.addEventListener("click", filterByID);
} else {
getCur();
}
}
SeismicData.queryFeatures().then(function(evt) {
evt.features.forEach(function(feature) {
var att = feature.attributes
var test = geometryEngine.convexHull(feature.geometry)
var genpoly = null
if (att.grid_value <= 4.0) {
var rad = att.Shape__Length / 75
genpoly = new Circle({
center: test.centroid,
radius: rad,
radiusUnit: "meters"
})
} else {
genpoly = test
}
var polygonGraphic = new Graphic({
geometry: genpoly,
attributes: att,
type: "polygon"
});
graphicsLayer.add(polygonGraphic);
});
var renderer = {
type: "class-breaks",
field: "grid_value",
classificationMethod: "esriClassifyManual",
classBreakInfos: [{
minValue: 0,
maxValue: 1.9999,
symbol: {
color: [0, 0, 0, 0],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "I (Not Felt)"
},
{
minValue: 2.0,
maxValue: 3.0,
symbol: {
color: [191, 204, 255, .3],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "II (Weak)"
},
{
minValue: 3.1,
maxValue: 3.9,
symbol: {
color: [153, 153, 255, .4],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "III (Weak)"
},
{
minValue: 4.0,
maxValue: 4.5,
symbol: {
color: [136, 255, 255, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "IV (Light)"
},
{
minValue: 4.5,
maxValue: 4.9999,
symbol: {
color: [125, 248, 148, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "V (Light)"
},
{
minValue: 6.0,
maxValue: 6.9999,
symbol: {
color: [255, 255, 0, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "VI (Strong)"
},
{
minValue: 7.0,
maxValue: 7.9999,
symbol: {
color: [255, 221, 0, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "VII (Very Strong)"
},
{
minValue: 8.0,
maxValue: 8.9999,
symbol: {
color: [255, 145, 0, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "VIII (Severe) "
},
{
minValue: 9.0,
maxValue: 9.9999,
symbol: {
color: [255, 0, 0, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "IX (Violent)"
},
{
minValue: 10.0,
maxValue: 10.9999,
symbol: {
color: [221, 0, 0, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "X"
},
{
minValue: 11.0,
maxValue: 11.9999,
symbol: {
color: [136, 0, 0, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "XI"
},
{
minValue: 12.0,
maxValue: 12.0,
symbol: {
color: [68, 0, 0, 1],
outline: {
color: [0, 0, 0, 0],
width: 0.4,
type: "simple-line",
style: "solid"
},
type: "simple-fill",
style: "solid"
},
label: "XII"
}
]
}
var popuptemp = {
title: "Shake Intensity",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "grid_value",
label: "Grid Value"
},
{
fieldName: "id",
label: "id"
},
{
fieldName: "ObjectID",
label: "ObjectID"
},
{
fieldName: "url",
label: "Url"
}
]
}]
}
fl = new FeatureLayer({
source: graphicsLayer.graphics,
objectIdField: "ObjectID",
geometryType: "polygon",
fields: [{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},{
name: "id",
alias: "id",
type: "string"
}, {
name: "url",
alias: "url",
type: "string"
}, {
name: "grid_value",
alias: "grid_value",
type: "double"
}],
renderer: renderer,
popupEnabled: true,
popupTemplate: popuptemp
});
map.add(fl);
console.log(fl);
});
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="contn">
<div>
<div>
<div id="Shakemaps">Shakemaps</div>
</div>
</div>
</div>
</body>
</html>