gray<!DOCTYPE HTML>
<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%;
}
</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/widgets/BasemapToggle",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/renderers/ClassBreaksRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/GraphicsLayer",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/geometry/geometryEngine"
], function(Map,MapView,BasemapToggle,FeatureLayer,MapImageLayer,ClassBreaksRenderer,SimpleMarkerSymbol,GraphicsLayer,Query,QueryTask,geometryEngine) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-100.000000,31.000000],
zoom: 13
});
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "topo-vector"
});
view.ui.add(basemapToggle, "bottom-right");
var featureLayer = new FeatureLayer({
url: "https://services6.arcgis.com/cmKWjJDTp7lPppjM/arcgis/rest/services/Zip/FeatureServer/0"
});
map.add(featureLayer);
featureLayer.when(function(){
view.extent=featureLayer.fullExtent;
});
var medianAgeLayer = new MapImageLayer({
url: "https://demographics9.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries_2019/MapServer"
});
var cbrenderer = new ClassBreaksRenderer({
field: "Age"
});
cbrenderer.addClassBreakInfo({
minValue: 19,
maxValue: 40,
symbol: new SimpleMarkerSymbol({
style: "diamond",
color: "#9ACD32",
size: 10
})
});
cbrenderer.addClassBreakInfo({
minValue: 41,
maxValue: 52,
symbol: new SimpleMarkerSymbol({
style: "diamond",
color: [0,0,255,0.2],
size: 15
})
});
featureLayer.renderer = cbrenderer;
var graphicsLayer = new GraphicsLayer({
graphics: []
});
map.add(graphicsLayer);
var gCriteria01Geometry;
var gCriteria02Geometry;
function countPerZIPCode(inputLayer){
var q = featureLayer.createQuery();
q.outFields = ["ZIP"];
return inputLayer.queryFeatures(q).then(function(response){
var dict = {};
var zip;
response.features.forEach(function (item) {
zip = item.attributes.ZIP;
if (dict[zip] == undefined) {
dict[zip]= 1;
}
else
{
dict[zip] = dict[zip] + 1;
}
});
return Object.keys(dict).reduce(function(key1,key2){
return dict[key1] > dict[key2] ? key1 : key2;
});
});
}
function bufferByDistance(sickestZIP){
var q = new Query();
q.where = "ID = '" + sickestZIP + "'";
q.returnGeometry = true;
var medianAgeQueryTask = new QueryTask({
url: "https://demographics9.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries_2019/MapServer"
});
return medianAgeQueryTask.execute(q).then(function(response){
return response.features[0].geometry;
}).then(function(sickestZIPGeometry){
gCriteria01Geometry = geometryEngine.buffer(
sickestZIPGeometry,
2,
"miles"
);
displayMyPolygon(gCriteria01Geometry, "red");
displayMyPolygon(sickestZIPGeometry, "green");
});
}
view.when(featureLayer.when()
.then(countPerZIPCode)
.then(bufferByDistance)
);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>