I have the following code to filter shake intensity maps by ID. It works fine with this URL --> https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServe... but as soon as I plugin my production mapserver URL of --> https://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/USGS_Seismic_Data/MapServer/12/ I immediately get a console error 400 query failing, i.e. below, and the map no longer displays.
error:
full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Filter features by attribute - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.id-item:focus {
background-color: dimgrey;
}
.id-item:hover {
background-color: dimgrey;
}
#titleDiv {
padding: 10px;
}
#titleText {
font-size: 20pt;
font-weight: 60;
padding-bottom: 10px;
}
</style>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/layers/FeatureLayer",
"esri/widgets/Expand"
], function(MapView, Map, FeatureLayer, Expand) {
let floodLayerView;
const layer = new FeatureLayer({
url: "https://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/USGS_Seismic_Data/MapServer/12",
outFields: ["*"]
});
const map = new Map({
basemap: "gray-vector",
//layers: [layer]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [-98, 40],
zoom: 4
});
layer.definitionExpression = "eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2",
map.add(layer);
const idNodes = document.querySelectorAll(`.id-item`);
const idElement = document.getElementById("id-filter");
idElement.addEventListener("click", filterByID);
function filterByID(event) {
const selectedID = event.target.getAttribute("data-id");
eqLayerView.filter = {
where: "id = '" + selectedID + "'"
};
}
view.whenLayerView(layer).then(function(layerView) {
eqLayerView = layerView;
eqLayerView.filter = {
where: "id = ''"
};
idElement.style.visibility = "visible";
var query = layer.createQuery();
query.outFields = ["id"];
query.returnDistinctValues = true;
query.returnGeometry = false;
layer.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";
opt.setAttribute("data-id", id);
idElement.appendChild(opt);
idElement.appendChild(label);
});
});
});
});
</script>
</head>
<body>
<div id="id-filter" class="esri-widget">
</div>
<div id="viewDiv"></div>
<div id="titleDiv" class="esri-widget">
<div id="titleText">Earthquakes</div>
<div>Shake Intensity</div>
</div>
</body>
</html>
Accepted Solutions
