Hello,
I added a print widget to the script below but it does not create/export the pdf. I have tried the exact print widget on other applications and it executes as it should.
The server error says "Layer "graphicsLayer1": Field 'SCHOOL' not part of schema for this feature collection. Failed to execute (ExportWebMap). "
Is this a limitation of the print widget due to the graphics layer? Any workaround?
<!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>Redistricting Test Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#mapDiv {
padding: 1px;
border: solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#HomeButton {
position: absolute;
top: 95px;
left: 21px;
z-index: 50;
}
#header {
border: solid 2px #462d44;
background: #fff;
color: #444;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 1.2em;
padding-left: 20px;
}
#rightPane {
width: 250px;
padding: 1px;
border: solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#info {
font-weight: bold;
font-size: 0.85em;
}
#legendDiv {
padding-top: 23px;
}
</style>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map, gra, schoolGL;
var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
var executeSchool4Evt, executeSchool5Evt;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
"esri/InfoTemplate", "esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/dijit/HomeButton", "esri/graphic",
"esri/renderers/SimpleRenderer", "esri/Color",
"esri/config", "esri/dijit/Legend",
"esri/tasks/query", "esri/tasks/QueryTask",
"dojo/_base/array", "dijit/registry",
"dojo/query", "esri/tasks/LegendLayer",
"esri/tasks/StatisticDefinition", "esri/geometry/geometryEngine",
"dojo/store/Memory", "dojo/dom-construct",
"dijit/form/Button", "dojo/dom",
"dojo/on", "dojo/parser",
"esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/domReady!"
], function(
Map, FeatureLayer, Print,
InfoTemplate, Draw,
SimpleLineSymbol, SimpleFillSymbol,
HomeButton, Graphic,
SimpleRenderer, Color,
esriConfig, Legend,
Query, QueryTask,
array, registry,
dojoQuery, LegendLayer,
StatisticDefinition, geometryEngine,
Memory, domConstruct,
Button, dom,
on, parser,
GraphicsLayer, UniqueValueRenderer
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
var selectionToolbar;
map = new Map("mapDiv", {
basemap: "topo",
center: [-84.20, 33.78], // lon, lat
zoom: 11
});
var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.5]));
//create renderer
var renderer = new SimpleRenderer(defaultSymbol);
var content = "<b>ES Population</b>: ${ES_Pop}" +
"<br><b>MS Population</b>: ${MS_Pop}" +
"<br><b>HS Population</b>: ${HS_Pop}";
var infoTemplate = new InfoTemplate("${ES_Name}", content);
var fields = ["ES_Name", "ES_Pop", "MS_Pop", "HS_Pop"];
var blocks = new FeatureLayer("http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ES_Areas_Redist_Test/Featu...", {
mode: FeatureLayer.MODE_SNAPSHOT,
//infoTemplate: infoTemplate,
outFields: fields
});
var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));
schoolGL = new GraphicsLayer();
var uvRenderer = new UniqueValueRenderer(defaultSymbol, "SCHOOL");
uvRenderer.addValue({
value: 1,
symbol: sSymbol1,
label: "School 1",
description: "School 1"
});
uvRenderer.addValue({
value: 2,
symbol: sSymbol2,
label: "School 2",
description: "School 2"
});
uvRenderer.addValue({
value: 3,
symbol: sSymbol3,
label: "School 3",
description: "School 3"
});
uvRenderer.addValue({
value: 4,
symbol: sSymbol4,
label: "School 4",
description: "School 4"
});
uvRenderer.addValue({
value: 5,
symbol: sSymbol5,
label: "School 5",
description: "School 5"
});
on(schoolGL, "click", function(e) {
if (e.shiftKey) {
schoolGL.remove(e.graphic);
calculatePop();
}
});
blocks.setRenderer(uvRenderer);
schoolGL.setRenderer(uvRenderer);
map.addLayers([blocks, schoolGL]);
dom.byId("SchoolsButton1").onclick = executeSchool1;
dom.byId("SchoolsButton2").onclick = executeSchool2;
dom.byId("SchoolsButton3").onclick = executeSchool3;
dom.byId("SchoolsButton4").onclick = executeSchool4;
dom.byId("SchoolsButton5").onclick = executeSchool5;
function clearEvts() {
if (executeSchool1Evt) {
executeSchool1Evt.remove();
}
if (executeSchool2Evt) {
executeSchool2Evt.remove();
}
if (executeSchool3Evt) {
executeSchool3Evt.remove();
}
if (executeSchool4Evt) {
executeSchool4Evt.remove();
}
if (executeSchool5Evt) {
executeSchool5Evt.remove();
}
}
function doPreEvents() {
clearEvts();
map.disableClickRecenter();
map.disableShiftDoubleClickZoom();
map.disableKeyboardNavigation();
map.disableRubberBandZoom();
}
function undoPreEvents() {
clearEvts();
map.enableClickRecenter();
map.enableShiftDoubleClickZoom();
map.enableKeyboardNavigation();
map.enableRubberBandZoom();
}
function executeSchool1() {
doPreEvents();
executeSchool1Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.SCHOOL = 1;
//gra.setSymbol(sSymbol1);
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool2() {
doPreEvents();
executeSchool2Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.SCHOOL = 2;
//gra.setSymbol(sSymbol2);
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool3() {
doPreEvents();
executeSchool3Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.SCHOOL = 3;
//gra.setSymbol(sSymbol3);
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool4() {
doPreEvents();
executeSchool4Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.SCHOOL = 4;
//gra.setSymbol(sSymbol4);
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool5() {
doPreEvents();
executeSchool5Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.SCHOOL = 5;
//gra.setSymbol(sSymbol5);
schoolGL.add(gra);
calculatePop();
});
}
function calculatePop(id) {
var PopSumObj = {
1: 0,
2: 0,
3: 0,
4: 0,
5: 0
}
//summarize the ES Population to display
array.forEach(schoolGL.graphics, function(feature) {
switch (feature.attributes.SCHOOL) {
case 1:
PopSumObj[1] += feature.attributes.ES_Pop;
break;
case 2:
PopSumObj[2] += feature.attributes.ES_Pop;
break;
case 3:
PopSumObj[3] += feature.attributes.ES_Pop;
break;
case 4:
PopSumObj[4] += feature.attributes.ES_Pop;
break;
case 5:
PopSumObj[5] += feature.attributes.ES_Pop;
break;
}
});
var CapDiv, Capacity;
for (var i = 0; i < 5; i++) {
CapDiv = Math.round((PopSumObj[(i + 1)] / 900) * 100);
if (CapDiv >= 80 && CapDiv <= 99) {
Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
} else if (CapDiv >= 100) {
Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
} else {
Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
}
dom.byId('countResult_' + (i + 1)).innerHTML = PopSumObj[(i + 1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
}
}
//add the legend
var legend = new Legend({
map: map,
layerInfos: [{
layer: blocks,
title: "School Re-Districting"
}]
}, "legendDiv");
legend.startup();
//function for refreshing block layer for use on button
var refreshlayer = new Button({
label: "Reset Map",
onClick: function() {
//the refresh will force it to get the original layer
schoolGL.clear();
dom.byId("countResult_1").innerHTML = "";
dom.byId("countResult_2").innerHTML = "";
dom.byId("countResult_3").innerHTML = "";
dom.byId("countResult_4").innerHTML = "";
dom.byId("countResult_5").innerHTML = "";
undoPreEvents();
}
}, "refreshbutton").startup();
//home button to return to map's default extent
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
//Print Button
var printer = new Print({
map: map,
url: "http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ExportWebMap_Test/GPServer..."
}, dom.byId("printButton"));
printer.startup();
on(printer, "onPrintComplete", function(result) {
var currentTime = new Date();
result.url += "?ts=" + currentTime.getTime();
});
// Code to edit the default print button text
printer._printText = 'Submit Map';
printer._printingText = 'Sending.., Please wait';
printer._printoutText = 'Map Submitted, Thank you.';
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Submit Map');
on(printer, '_createPrintButton', function(value) {
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Map Submitted, Thank you.');
});
});
</script>
</head>
<body class="tundra">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Title Test1</div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Test', selected:true">
<div id="info">
<button id="SchoolsButton1" data-dojo-type="dijit/form/Button">School 1</button><span class="stats" id="countResult_1"></span><br>
<button id="SchoolsButton2" data-dojo-type="dijit/form/Button">School 2</button><span class="stats" id="countResult_2"></span><br>
<button id="SchoolsButton3" data-dojo-type="dijit/form/Button">School 3</button><span class="stats" id="countResult_3"></span><br>
<button id="SchoolsButton4" data-dojo-type="dijit/form/Button">School 4</button><span class="stats" id="countResult_4"></span><br>
<button id="SchoolsButton5" data-dojo-type="dijit/form/Button">School 5</button><span class="stats" id="countResult_5"></span><br><br>
<div id="printButton" style="text-align: center; vertical-align: bottom;"></div>
<div id="refresh" style="text-align: center; vertical-align: bottom;"><button id="refreshbutton" type="button"></button></div>
</div>
<div id="legendDiv"></div>
</div>
</div>
</div>
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
<div id="HomeButton"></div>
</div>
</div>
</body>
</html>
Solved! Go to Solution.
Giovanni,
Here is the code fixed. The issue was I created a new field called SCHOOL in the previous code that did not exist in your layer. So now the code just uses the ES_Num field instead.
<!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>Redistricting Test Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#mapDiv {
padding: 1px;
border: solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#HomeButton {
position: absolute;
top: 95px;
left: 21px;
z-index: 50;
}
#header {
border: solid 2px #462d44;
background: #fff;
color: #444;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 1.2em;
padding-left: 20px;
}
#rightPane {
width: 250px;
padding: 1px;
border: solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#info {
font-weight: bold;
font-size: 0.85em;
}
#legendDiv {
padding-top: 23px;
}
</style>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map, gra, schoolGL;
var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
var executeSchool4Evt, executeSchool5Evt;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
"esri/InfoTemplate", "esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/dijit/HomeButton", "esri/graphic",
"esri/renderers/SimpleRenderer", "esri/Color",
"esri/config", "esri/dijit/Legend",
"esri/tasks/query", "esri/tasks/QueryTask",
"dojo/_base/array", "dijit/registry",
"dojo/query", "esri/tasks/LegendLayer",
"esri/tasks/StatisticDefinition", "esri/geometry/geometryEngine",
"dojo/store/Memory", "dojo/dom-construct",
"dijit/form/Button", "dojo/dom",
"dojo/on", "dojo/parser",
"esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/domReady!"
], function(
Map, FeatureLayer, Print,
InfoTemplate, Draw,
SimpleLineSymbol, SimpleFillSymbol,
HomeButton, Graphic,
SimpleRenderer, Color,
esriConfig, Legend,
Query, QueryTask,
array, registry,
dojoQuery, LegendLayer,
StatisticDefinition, geometryEngine,
Memory, domConstruct,
Button, dom,
on, parser,
GraphicsLayer, UniqueValueRenderer
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
var selectionToolbar;
map = new Map("mapDiv", {
basemap: "topo",
center: [-84.20, 33.78], // lon, lat
zoom: 11
});
var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.5]));
//create renderer
var renderer = new SimpleRenderer(defaultSymbol);
var content = "<b>ES Population</b>: ${ES_Pop}" +
"<br><b>MS Population</b>: ${MS_Pop}" +
"<br><b>HS Population</b>: ${HS_Pop}";
var infoTemplate = new InfoTemplate("${ES_Name}", content);
var fields = ["ES_Num", "ES_Name", "ES_Pop", "MS_Pop", "HS_Pop"];
var blocks = new FeatureLayer("http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ES_Areas_Redist_Test/Featu...", {
mode: FeatureLayer.MODE_SNAPSHOT,
//infoTemplate: infoTemplate,
outFields: fields
});
var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));
schoolGL = new GraphicsLayer();
var uvRenderer = new UniqueValueRenderer(defaultSymbol, "ES_Num");
uvRenderer.addValue({
value: 1,
symbol: sSymbol1,
label: "School 1",
description: "School 1"
});
uvRenderer.addValue({
value: 2,
symbol: sSymbol2,
label: "School 2",
description: "School 2"
});
uvRenderer.addValue({
value: 3,
symbol: sSymbol3,
label: "School 3",
description: "School 3"
});
uvRenderer.addValue({
value: 4,
symbol: sSymbol4,
label: "School 4",
description: "School 4"
});
uvRenderer.addValue({
value: 5,
symbol: sSymbol5,
label: "School 5",
description: "School 5"
});
on(schoolGL, "click", function(e) {
if (e.shiftKey) {
schoolGL.remove(e.graphic);
calculatePop();
}
});
blocks.setRenderer(uvRenderer);
schoolGL.setRenderer(uvRenderer);
map.addLayers([blocks, schoolGL]);
dom.byId("SchoolsButton1").onclick = executeSchool1;
dom.byId("SchoolsButton2").onclick = executeSchool2;
dom.byId("SchoolsButton3").onclick = executeSchool3;
dom.byId("SchoolsButton4").onclick = executeSchool4;
dom.byId("SchoolsButton5").onclick = executeSchool5;
function clearEvts() {
if (executeSchool1Evt) {
executeSchool1Evt.remove();
}
if (executeSchool2Evt) {
executeSchool2Evt.remove();
}
if (executeSchool3Evt) {
executeSchool3Evt.remove();
}
if (executeSchool4Evt) {
executeSchool4Evt.remove();
}
if (executeSchool5Evt) {
executeSchool5Evt.remove();
}
}
function doPreEvents() {
clearEvts();
map.disableClickRecenter();
map.disableShiftDoubleClickZoom();
map.disableKeyboardNavigation();
map.disableRubberBandZoom();
}
function undoPreEvents() {
clearEvts();
map.enableClickRecenter();
map.enableShiftDoubleClickZoom();
map.enableKeyboardNavigation();
map.enableRubberBandZoom();
}
function executeSchool1() {
doPreEvents();
executeSchool1Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 1;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool2() {
doPreEvents();
executeSchool2Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 2;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool3() {
doPreEvents();
executeSchool3Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 3;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool4() {
doPreEvents();
executeSchool4Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 4;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool5() {
doPreEvents();
executeSchool5Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 5;
schoolGL.add(gra);
calculatePop();
});
}
function calculatePop(id) {
var PopSumObj = {
1: 0,
2: 0,
3: 0,
4: 0,
5: 0
}
//summarize the ES Population to display
array.forEach(schoolGL.graphics, function(feature) {
switch (feature.attributes.ES_Num) {
case 1:
PopSumObj[1] += feature.attributes.ES_Pop;
break;
case 2:
PopSumObj[2] += feature.attributes.ES_Pop;
break;
case 3:
PopSumObj[3] += feature.attributes.ES_Pop;
break;
case 4:
PopSumObj[4] += feature.attributes.ES_Pop;
break;
case 5:
PopSumObj[5] += feature.attributes.ES_Pop;
break;
}
});
var CapDiv, Capacity;
for (var i = 0; i < 5; i++) {
CapDiv = Math.round((PopSumObj[(i + 1)] / 900) * 100);
if (CapDiv >= 80 && CapDiv <= 99) {
Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
} else if (CapDiv >= 100) {
Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
} else {
Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
}
dom.byId('countResult_' + (i + 1)).innerHTML = PopSumObj[(i + 1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
}
}
//add the legend
var legend = new Legend({
map: map,
layerInfos: [{
layer: blocks,
title: "School Re-Districting"
}]
}, "legendDiv");
legend.startup();
//function for refreshing block layer for use on button
var refreshlayer = new Button({
label: "Reset Map",
onClick: function() {
//the refresh will force it to get the original layer
schoolGL.clear();
dom.byId("countResult_1").innerHTML = "";
dom.byId("countResult_2").innerHTML = "";
dom.byId("countResult_3").innerHTML = "";
dom.byId("countResult_4").innerHTML = "";
dom.byId("countResult_5").innerHTML = "";
undoPreEvents();
}
}, "refreshbutton").startup();
//home button to return to map's default extent
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
//Print Button
var printer = new Print({
map: map,
url: "http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ExportWebMap_Test/GPServer..."
}, dom.byId("printButton"));
printer.startup();
on(printer, "onPrintComplete", function(result) {
var currentTime = new Date();
result.url += "?ts=" + currentTime.getTime();
});
// Code to edit the default print button text
printer._printText = 'Submit Map';
printer._printingText = 'Sending.., Please wait';
printer._printoutText = 'Map Submitted, Thank you.';
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Submit Map');
on(printer, '_createPrintButton', function(value) {
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Map Submitted, Thank you.');
});
});
</script>
</head>
<body class="tundra">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Title Test1</div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Test', selected:true">
<div id="info">
<button id="SchoolsButton1" data-dojo-type="dijit/form/Button">School 1</button><span class="stats" id="countResult_1"></span><br>
<button id="SchoolsButton2" data-dojo-type="dijit/form/Button">School 2</button><span class="stats" id="countResult_2"></span><br>
<button id="SchoolsButton3" data-dojo-type="dijit/form/Button">School 3</button><span class="stats" id="countResult_3"></span><br>
<button id="SchoolsButton4" data-dojo-type="dijit/form/Button">School 4</button><span class="stats" id="countResult_4"></span><br>
<button id="SchoolsButton5" data-dojo-type="dijit/form/Button">School 5</button><span class="stats" id="countResult_5"></span><br><br>
<div id="printButton" style="text-align: center; vertical-align: bottom;"></div>
<div id="refresh" style="text-align: center; vertical-align: bottom;"><button id="refreshbutton" type="button"></button></div>
</div>
<div id="legendDiv"></div>
</div>
</div>
</div>
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
<div id="HomeButton"></div>
</div>
</div>
</body>
</html>
Giovanni,
Here is the code fixed. The issue was I created a new field called SCHOOL in the previous code that did not exist in your layer. So now the code just uses the ES_Num field instead.
<!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>Redistricting Test Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#mapDiv {
padding: 1px;
border: solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#HomeButton {
position: absolute;
top: 95px;
left: 21px;
z-index: 50;
}
#header {
border: solid 2px #462d44;
background: #fff;
color: #444;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 1.2em;
padding-left: 20px;
}
#rightPane {
width: 250px;
padding: 1px;
border: solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#info {
font-weight: bold;
font-size: 0.85em;
}
#legendDiv {
padding-top: 23px;
}
</style>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map, gra, schoolGL;
var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
var executeSchool4Evt, executeSchool5Evt;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
"esri/InfoTemplate", "esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/dijit/HomeButton", "esri/graphic",
"esri/renderers/SimpleRenderer", "esri/Color",
"esri/config", "esri/dijit/Legend",
"esri/tasks/query", "esri/tasks/QueryTask",
"dojo/_base/array", "dijit/registry",
"dojo/query", "esri/tasks/LegendLayer",
"esri/tasks/StatisticDefinition", "esri/geometry/geometryEngine",
"dojo/store/Memory", "dojo/dom-construct",
"dijit/form/Button", "dojo/dom",
"dojo/on", "dojo/parser",
"esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/domReady!"
], function(
Map, FeatureLayer, Print,
InfoTemplate, Draw,
SimpleLineSymbol, SimpleFillSymbol,
HomeButton, Graphic,
SimpleRenderer, Color,
esriConfig, Legend,
Query, QueryTask,
array, registry,
dojoQuery, LegendLayer,
StatisticDefinition, geometryEngine,
Memory, domConstruct,
Button, dom,
on, parser,
GraphicsLayer, UniqueValueRenderer
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
var selectionToolbar;
map = new Map("mapDiv", {
basemap: "topo",
center: [-84.20, 33.78], // lon, lat
zoom: 11
});
var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.5]));
//create renderer
var renderer = new SimpleRenderer(defaultSymbol);
var content = "<b>ES Population</b>: ${ES_Pop}" +
"<br><b>MS Population</b>: ${MS_Pop}" +
"<br><b>HS Population</b>: ${HS_Pop}";
var infoTemplate = new InfoTemplate("${ES_Name}", content);
var fields = ["ES_Num", "ES_Name", "ES_Pop", "MS_Pop", "HS_Pop"];
var blocks = new FeatureLayer("http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ES_Areas_Redist_Test/Featu...", {
mode: FeatureLayer.MODE_SNAPSHOT,
//infoTemplate: infoTemplate,
outFields: fields
});
var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));
schoolGL = new GraphicsLayer();
var uvRenderer = new UniqueValueRenderer(defaultSymbol, "ES_Num");
uvRenderer.addValue({
value: 1,
symbol: sSymbol1,
label: "School 1",
description: "School 1"
});
uvRenderer.addValue({
value: 2,
symbol: sSymbol2,
label: "School 2",
description: "School 2"
});
uvRenderer.addValue({
value: 3,
symbol: sSymbol3,
label: "School 3",
description: "School 3"
});
uvRenderer.addValue({
value: 4,
symbol: sSymbol4,
label: "School 4",
description: "School 4"
});
uvRenderer.addValue({
value: 5,
symbol: sSymbol5,
label: "School 5",
description: "School 5"
});
on(schoolGL, "click", function(e) {
if (e.shiftKey) {
schoolGL.remove(e.graphic);
calculatePop();
}
});
blocks.setRenderer(uvRenderer);
schoolGL.setRenderer(uvRenderer);
map.addLayers([blocks, schoolGL]);
dom.byId("SchoolsButton1").onclick = executeSchool1;
dom.byId("SchoolsButton2").onclick = executeSchool2;
dom.byId("SchoolsButton3").onclick = executeSchool3;
dom.byId("SchoolsButton4").onclick = executeSchool4;
dom.byId("SchoolsButton5").onclick = executeSchool5;
function clearEvts() {
if (executeSchool1Evt) {
executeSchool1Evt.remove();
}
if (executeSchool2Evt) {
executeSchool2Evt.remove();
}
if (executeSchool3Evt) {
executeSchool3Evt.remove();
}
if (executeSchool4Evt) {
executeSchool4Evt.remove();
}
if (executeSchool5Evt) {
executeSchool5Evt.remove();
}
}
function doPreEvents() {
clearEvts();
map.disableClickRecenter();
map.disableShiftDoubleClickZoom();
map.disableKeyboardNavigation();
map.disableRubberBandZoom();
}
function undoPreEvents() {
clearEvts();
map.enableClickRecenter();
map.enableShiftDoubleClickZoom();
map.enableKeyboardNavigation();
map.enableRubberBandZoom();
}
function executeSchool1() {
doPreEvents();
executeSchool1Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 1;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool2() {
doPreEvents();
executeSchool2Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 2;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool3() {
doPreEvents();
executeSchool3Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 3;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool4() {
doPreEvents();
executeSchool4Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 4;
schoolGL.add(gra);
calculatePop();
});
}
function executeSchool5() {
doPreEvents();
executeSchool5Evt = on(blocks, "click", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 5;
schoolGL.add(gra);
calculatePop();
});
}
function calculatePop(id) {
var PopSumObj = {
1: 0,
2: 0,
3: 0,
4: 0,
5: 0
}
//summarize the ES Population to display
array.forEach(schoolGL.graphics, function(feature) {
switch (feature.attributes.ES_Num) {
case 1:
PopSumObj[1] += feature.attributes.ES_Pop;
break;
case 2:
PopSumObj[2] += feature.attributes.ES_Pop;
break;
case 3:
PopSumObj[3] += feature.attributes.ES_Pop;
break;
case 4:
PopSumObj[4] += feature.attributes.ES_Pop;
break;
case 5:
PopSumObj[5] += feature.attributes.ES_Pop;
break;
}
});
var CapDiv, Capacity;
for (var i = 0; i < 5; i++) {
CapDiv = Math.round((PopSumObj[(i + 1)] / 900) * 100);
if (CapDiv >= 80 && CapDiv <= 99) {
Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
} else if (CapDiv >= 100) {
Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
} else {
Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
}
dom.byId('countResult_' + (i + 1)).innerHTML = PopSumObj[(i + 1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
}
}
//add the legend
var legend = new Legend({
map: map,
layerInfos: [{
layer: blocks,
title: "School Re-Districting"
}]
}, "legendDiv");
legend.startup();
//function for refreshing block layer for use on button
var refreshlayer = new Button({
label: "Reset Map",
onClick: function() {
//the refresh will force it to get the original layer
schoolGL.clear();
dom.byId("countResult_1").innerHTML = "";
dom.byId("countResult_2").innerHTML = "";
dom.byId("countResult_3").innerHTML = "";
dom.byId("countResult_4").innerHTML = "";
dom.byId("countResult_5").innerHTML = "";
undoPreEvents();
}
}, "refreshbutton").startup();
//home button to return to map's default extent
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
//Print Button
var printer = new Print({
map: map,
url: "http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ExportWebMap_Test/GPServer..."
}, dom.byId("printButton"));
printer.startup();
on(printer, "onPrintComplete", function(result) {
var currentTime = new Date();
result.url += "?ts=" + currentTime.getTime();
});
// Code to edit the default print button text
printer._printText = 'Submit Map';
printer._printingText = 'Sending.., Please wait';
printer._printoutText = 'Map Submitted, Thank you.';
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Submit Map');
on(printer, '_createPrintButton', function(value) {
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Map Submitted, Thank you.');
});
});
</script>
</head>
<body class="tundra">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Title Test1</div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Test', selected:true">
<div id="info">
<button id="SchoolsButton1" data-dojo-type="dijit/form/Button">School 1</button><span class="stats" id="countResult_1"></span><br>
<button id="SchoolsButton2" data-dojo-type="dijit/form/Button">School 2</button><span class="stats" id="countResult_2"></span><br>
<button id="SchoolsButton3" data-dojo-type="dijit/form/Button">School 3</button><span class="stats" id="countResult_3"></span><br>
<button id="SchoolsButton4" data-dojo-type="dijit/form/Button">School 4</button><span class="stats" id="countResult_4"></span><br>
<button id="SchoolsButton5" data-dojo-type="dijit/form/Button">School 5</button><span class="stats" id="countResult_5"></span><br><br>
<div id="printButton" style="text-align: center; vertical-align: bottom;"></div>
<div id="refresh" style="text-align: center; vertical-align: bottom;"><button id="refreshbutton" type="button"></button></div>
</div>
<div id="legendDiv"></div>
</div>
</div>
</div>
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
<div id="HomeButton"></div>
</div>
</div>
</body>
</html>
That was it!, Thanks again!.