Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Geoenrichment - Infographic
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
The Infographic widget requests for GeoEnrichment data of a given location, and visualizes the results in a Infographics consisting of properly formatted charts and/or tables. This sample allows users to click any location on the map and returns the GeoEnrichment data (an age pyramid) of a 1-mile ring buffer area.GeoEnrichment is a subscription based service available through ArcGIS Online. Log-in credentials are always required when executing a GeoEnrichment task. For demo purpose, this sample uses a helper method to define a proxy for a set of resources. All requests to geoenrich.arcgis.com are routed to the specified proxy url.
urlUtils.addProxyRule({
urlPrefix: "geoenrich.arcgis.com",
proxyUrl: "/sproxy"
});
When writing your own apps, remove this part from the code so your users will be able to sign in with their own credentials.
Code
<!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>Geoenrichment - Infographic</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/dijit/geoenrichment/themes/common/main.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#infographics {
position: absolute;
top: 10px;
right: 10px;
}
#progressbar{
position: absolute;
bottom: 10px;
left: 10px;
width: 200px;
display: none;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
require([
"esri/map", "esri/urlUtils", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol",
"esri/dijit/geoenrichment/Infographic", "esri/tasks/geoenrichment/GeometryStudyArea", "dijit/ProgressBar", "dojo/domReady!"
], function(Map, urlUtils, Graphic, SimpleMarkerSymbol, SimpleFillSymbol, Infographic, GeometryStudyArea, ProgressBar){
//all requests to geoenrich.arcgis.com will proxy to the proxyUrl defined in this object.
urlUtils.addProxyRule({
urlPrefix: "geoenrich.arcgis.com",
proxyUrl: "/sproxy/"
});
var map = new Map("map", {
basemap: "topo",
center: [-118.25,34.06],
zoom: 12
});
var infographics = new Infographic({
type: "AgePyramid",
variables: ["Age.*"],
returnGeometry: true
}, "infographics");
var progressBar = new ProgressBar({
indeterminate: true
}, "progressbar");
map.on("click", function(evt){
map.graphics.clear();
map.graphics.add(new Graphic(evt.mapPoint, new SimpleMarkerSymbol()));
infographics.set("studyArea", new GeometryStudyArea({ geometry: evt.mapPoint }));
infographics.startup();
progressBar.domNode.style.display = "block";
});
infographics.on("data-ready", function(evt){
map.graphics.add(new Graphic(evt.provider.getGeometry(), new SimpleFillSymbol()));
progressBar.domNode.style.display = "none";
});
});
</script>
</head>
<body class="claro">
<div id="map"></div>
<div id="infographics"></div>
<div id="progressbar"></div>
</body>
</html>