Hello everyone,
I'm trying to get into web developing using the ArcGIS JavaScript api, but I'm still very new to web developing. I wanted to ask for your advice or pointers on how to do this. I am basically trying to display the results from the query onto a div section on the page. I cannot get it to work, am I even going in the right direction? Below are the code that I have so far. Thanks in Advance.
End Goal: is to display the sum of each category(females, males, owners, renters) for entire 51 states when the page first loads, below the map div. Then click on each individual state, and have the values/number change dynamically for those categories, to display only values/number associated with that particular clicked state.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatitble" content="IE=Edge"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>TEST STATISTIC</title>
<link rel="stylesheet" href="
https://js.arcgis.com/3.28/esri/css/esri.css">
<link rel="stylesheet" href="
http://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
<style>
html, body, #mapDiv{border:0; margin:0; padding:0; height:90%; width:100%;}
</style>
<script type = "text/javascript" src ="
https://js.arcgis.com/3.28/"></script>
<script type="text/javascript" >
require
(
[
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/SpatialReference",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/StatisticDefinition"
var map = new Map("mapDiv", {
basemap: "topo",
center: [-94.84, 39.69],
zoom: 5
});
censusLayers.setVisibleLayers([3]);
function totalFemales()
{
var queryTask = new Qt("
https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var query = new Query();
query.returnGeometry = false;
query.outFields = ["FEMALES"];
var stats = new statD();
stats.statisticType = "sum";
stats.onStatisticField = "FEMALES";
stats.outStatisticName = "sum_female_pop";
query.where = "1=1";
query.outStatistics = [stats];
queryTask.execute(query,showFemalesSum );
};
function showFemalesSum(results)
{
if ( ! results.hasOwnProperty("features") ||results.features.length === 0 )
{
return;
}
var totalSum = results.features[0].attributes.sum_female_pop;
console.log("testing", totalSum, results.features);
document.getElementById('totalFemales').innerHTML = "Total Females: "+totalSum;
}
function totalMales()
{
var queryTask = new Qt("
https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var query = new Query();
query.returnGeometry = false;
query.outFields = ["MALES"];
var stats = new statD();
stats.statisticType = "sum";
stats.onStatisticField = "MALES";
stats.outStatisticName = "sum_male_pop";
query.where = "1=1";
query.outStatistics = [stats];
queryTask.execute(query,showMalesSum );
};
function showMalesSum(results)
{
if ( ! results.hasOwnProperty("features") ||results.features.length === 0 )
{
return;
}
var totalSum = results.features[0].attributes.sum_male_pop;
console.log("testing", totalSum, results.features);
document.getElementById('totalMales').innerHTML = "Total Males: "+totalSum;
}
map.addLayer(censusLayers);
map.on("load",showFemalesSum,showMalesSum);
}
);
</script>
</head>
<body>
<div id ="mapDiv"></div>
<div id = "genderPopData" style ="font-weight: bold">
Total Gender Population
<div id = "totalFemales" style ="font-weight: normal; padding:3px">
Number of Females:
</div>
<div id = "totalMales" style ="font-weight: normal; padding:3px">
Number of Males:
</div>
</div>
</br>
<div id = "housingData" style ="font-weight: bold">
Owner Versus Renter
<div id = "totalOwners" style ="font-weight: normal; padding:3px">
Number of Homeowners:
</div>
<div id = "totalRenter" style ="font-weight: normal; padding:3px">
Number of Renters:
</div>
</div>
</body>
</html>
