Hi! I'm kind of new to esri API, and I need to resolve a task. My job is to print out AGE_10_14 field values in an alert, where STATE_NAME = 'California'. I could not find any documentation, neither post, which could give me a guide. I accept any help gratefully! My code is:
Solved! Go to Solution.
Here's an example of getting an alert when clicking on a feature
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Clicking on a layer with JS API 4</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.19/"></script>
<script>
var map;
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
function (Map, MapView, FeatureLayer) {
const map = new Map({
basemap: "arcgis-topographic"
});
const populationRenderer = {
type: "simple",
symbol: {
color: "#BA55D3",
type: "simple-fill",
style: "solid"
}
}
const view = new MapView({
container: "viewDiv",
map: map,
center: [-105.80543, 38.02700],
zoom: 5
});
USACounties = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Counties_Generalized/FeatureServer/0",
definitionExpression: "STATE_NAME = 'California'",
renderer: populationRenderer,
outFields: ['*']
});
map.add(USACounties, 0);
view.on('click', (event) => {
view.hitTest(event)
.then((response) => {
console.log(response.results[0].graphic.attributes['AGE_10_14']);
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
When do you want it to pop up the alert? When the user clicks on the map? When the map is ready to use?
When the map (feature layer) is loaded, there's not any restriction to it.
This is a good blog that talks about when items are ready: https://odoe.net/blog/when-are-layers-done
Yes, but my issue is that I don't know, how to print field values to anywhere (alert, console, or just put them in an array, doesn't matter) =\ I could not find any simple solution for that, but probably there is.
Here's an example of getting an alert when clicking on a feature
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Clicking on a layer with JS API 4</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.19/"></script>
<script>
var map;
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
function (Map, MapView, FeatureLayer) {
const map = new Map({
basemap: "arcgis-topographic"
});
const populationRenderer = {
type: "simple",
symbol: {
color: "#BA55D3",
type: "simple-fill",
style: "solid"
}
}
const view = new MapView({
container: "viewDiv",
map: map,
center: [-105.80543, 38.02700],
zoom: 5
});
USACounties = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Counties_Generalized/FeatureServer/0",
definitionExpression: "STATE_NAME = 'California'",
renderer: populationRenderer,
outFields: ['*']
});
map.add(USACounties, 0);
view.on('click', (event) => {
view.hitTest(event)
.then((response) => {
console.log(response.results[0].graphic.attributes['AGE_10_14']);
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>