I had this working but suddenly it's not working and I cannot figure out why because all I've changed is my HTML and some styling (in the body) which should have nothing to do with the popup contents. The variables (function names) are global as the documentation says they should be. There is literally no reason this should not work, yet it doesn't.
The require statement and global variables:
var map, qhStatus, coarseClassify, fineClassify, cropType, pcType, pubOrPriv;
require([
"esri/map",
"esri/request",
"esri/arcgis/utils",
"esri/layers/FeatureLayer",
"esri/tasks/Geoprocessor",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/renderers/UniqueValueRenderer",
"esri/renderers/SimpleRenderer",
"esri/Color",
"esri/InfoTemplate",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/dijit/Legend",
"esri/dijit/PopupTemplate",
"dojo/query",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dojox/widget/Standby",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function(
Map,
esriRequest,
arcgisUtils,
FeatureLayer,
Geoprocessor,
SimpleLineSymbol,
SimpleFillSymbol,
Graphic,
UniqueValueRenderer,
SimpleRenderer,
Color,
InfoTemplate,
Query,
QueryTask,
Legend,
PopupTemplate,
query,
dom,
domConstruct,
on,
Standby,
parser
) {
The popup content for one of my popups (though none of them are working as they should). Note that the Number_Format function is called successfully and formats correctly but my custom function "pubOrPriv" is not called, thus the popups don't reflect the correct information.
var cipPopupContent = "<ul><li>State: ${StateID}</li>" +
"<li>Area: ${Area_ac:NumberFormat(places: 2)} acres</li>" +
"<li>Land Type: ${PublicLand:pubOrPriv}</li></ul>"
var cipPopupBox = new InfoTemplate("${Name} ${Route} Area", cipPopupContent);
Example custom function that is supposed to be called when a cipPopupBox should appear:
pubOrPriv = function(value, key, data){
var land = "";
var pub = value;
var priv = data.PrivateLand;
if (pub == 1 && priv == 0){
land = "Public"
}
else if (pub == 0 && priv == 1){
land = "Private"
}
else{
land = "Public and private"
}
return land;
};
The popup functions work as expected when the HTML is like so:
<div id="map"></div>
<div id="info">
<div id="legend"></div>
</div>
<div id="HabClassifyGPService">
State: <select id="stateAbbrev" name="stateIDList" form="uploadForm">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="DE">Delaware</option>
<option value="GA">Georgia</option>
<option value="FL">Florida</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Lousiana</option>
<option value="MD">Maryland</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="NE">Nebraska</option>
<option value="NJ">New Jersey</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="PA">Pennsylvania</option>
<option value="SC">South Carolina</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
<form id="uploadForm" method="post" enctype="multipart/form-data">
<label class="custom-file-upload">
<input type="file" name="file" id="dataUpload"/>
<span id="fileUploadLabel">File Upload</span>
</label>
<input type="button" value="Upload" id="upload"/>
</form>
</div>
<div id="viewableLayers">
Select year: <select id="data-year"></select><br><br>
<legend>Toggle renderers:</legend>
<label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked>Quail Habitat Status</label>
<label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Types</label>
<label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Types</label><br>
<legend>Set Transparency:</legend>
<input type="radio" id="100-percent" name="setOpacity" value="100" checked>0%
<input type="radio" id="75-percent" name="setOpacity" value="25">25%
<input type="radio" id="50-percent" name="setOpacity" value="50">50%
<input type="radio" id="25-percent" name="setOpacity" value="75">75%<br><br>
<legend>Toggle layers:</legend>
<label><input type="checkbox" id="protectCoverLyr" name="pcLayer" value="pc">Protective Cover</label>
<label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areas</label>
</div>
The popups do not work when the HTML is like so (I haven't added the HabitatClassifyGP stuff yet to this version):
<div id="map"></div>
<div id="info">
Select data year to display: <br />
<select id="data-year"></select>
<div id="legendDiv">
<div id="legend"></div>
</div>
<div id="layersDiv">
<h5>Layers</h5>
<div id="toggleLayers">
<label><input type="checkbox" id="protectCoverLyr" name="pcLayer" value="pc">Protective Cover</label>
<label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areas</label>
</div>
</div>
<div id="rendererDiv">
<h5>Renderers</h5>
<label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked>Quail Habitat Status</label>
<label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Types</label>
<label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Types</label><br />
<h5>Opacity</h5>
<input type="radio" id="100-percent" name="setOpacity" value="100" checked>0%
<input type="radio" id="75-percent" name="setOpacity" value="25">25%
<input type="radio" id="50-percent" name="setOpacity" value="50">50%
<input type="radio" id="25-percent" name="setOpacity" value="75">75%
</div>
</div>
How do I get it to call my functions??
