Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

Commit f926a41b authored by Peter Knoop's avatar Peter Knoop
Browse files

change parameters displayed on selection by updating renderer, also update popup template

parent c8cc3f16
......@@ -75,40 +75,27 @@ require([
// Display username of logged in user.
dom.byId("username").innerHTML = portal.user.username;
// Popup template for Yale state level data.
const popupTemplate = {
title:"{CD_Code}",
content: [
{
type:"fields",
fieldInfos: [
{
fieldName: "TotalPop",
label: "Total Population"
},
{
fieldName: "happening",
label: "Believe global warming is happening"
},
{
fieldName: "FL",
label: "Flood Warnings"
}
]
}
]
}
// Define initial set of parameters to display.
var parameter1 = "FL";
var parameter2 = "happening";
// Create a layer from Perry's alert and Yale's opinion data at the level of Congressional Districts (115th).
const layer = new FeatureLayer({
//url: "https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/Yale_Congressional_District_115_Level/FeatureServer/0",
url: "https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/Yale_Perry_115_Congressional_Districts/FeatureServer/0",
popupTemplate: popupTemplate,
//popupTemplate: popupTemplate,
//outFields: ["NAME", "TotalPop", "happening", "happeningOppose"],
outFields: ["*"],
title: "U.S. 115th Congressional Districts"
});
// Popup template for data.
var popupTemplate = '';
setPopupTemplate();
layer.popupTemplate = popupTemplate;
const map = new Map({
layers: [layer]
});
......@@ -123,7 +110,7 @@ require([
dockEnabled: true,
dockOptions: {
breakpoint: false,
position: "bottom-right"
position: "bottom-center"
}
},
extent: {
......@@ -192,24 +179,7 @@ require([
mainView.ui.add("hiViewDiv", "bottom-left");
// Create relationship (or bivariate) renderer.
const params = {
layer: layer,
view: mainView,
field1: {
field: "FL"
},
field2: {
field: "happening"
},
// Set orientation of legend to a diamond.
focus: "HH",
// Number of classes for grid 2 = 2x2 grid (value can also be 3 or 4)
numClasses: 2
};
// Apply relationship renderer to the layer.
relationshipRendererCreator.createRenderer(params).then(function(response) {
layer.renderer = response.renderer;
});
createRelationshipRenderer();
// Create legend for layer to place in mainView.
const legend = new Legend({
......@@ -235,7 +205,9 @@ require([
.when(maintainFixedExtent)
// .then(disableNavigation)
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove);
.then(enableHighlightOnPointerMove)
.then(enableParameter1Selection)
.then(enableParameter2Selection);
akView
.when(disableNavigation)
.then(disablePopupOnClick)
......@@ -348,7 +320,6 @@ require([
}
// prevents the user from opening the popup with click
function disablePopupOnClick(view) {
view.on("click", function(event) {
event.stopPropagation();
......@@ -356,6 +327,78 @@ require([
return view;
}
// Allows the user to pick the parameters to display.
function enableParameter1Selection(view) {
var selectNode = document.getElementById("parameter-1");
selectNode.addEventListener("change", function(event) {
console.log("Parameter 1 old selection:", parameter1 );
parameter1 = event.target.value;
console.log("Parameter 1 new selection:", parameter1 );
createRelationshipRenderer();
setPopupTemplate();
layer.popupTemplate = popupTemplate;
});
}
function enableParameter2Selection(view) {
var selectNode = document.getElementById("parameter-2");
selectNode.addEventListener("change", function(event) {
console.log("Parameter 2 old selection:", parameter2 );
parameter2 = event.target.value;
console.log("Parameter 2 new selection:", parameter2 );
createRelationshipRenderer();
setPopupTemplate();
layer.popupTemplate = popupTemplate;
});
}
// Create relationship (or bivariate) renderer.
function createRelationshipRenderer() {
const params = {
layer: layer,
view: mainView,
field1: {
field: parameter1
},
field2: {
field: parameter2
},
// Set orientation of legend to a diamond.
focus: "HH",
// Number of classes for grid 2 = 2x2 grid (value can also be 3 or 4)
numClasses: 2
};
// Apply relationship renderer to the layer.
relationshipRendererCreator.createRenderer(params).then(function(response) {
layer.renderer = response.renderer;
});
}
// Set the popup template
function setPopupTemplate() {
popupTemplate = {
title:"{CD_Code}",
content: [
{
type:"fields",
fieldInfos: [
{
fieldName: "TotalPop",
label: "Total Population"
},
{
fieldName: parameter1,
label: parameter1
},
{
fieldName: parameter2,
label: parameter2
}
]
}
]
}
};
// // add slider widget
// // Joe is adding a comment for some reason...
// const slider = new Slider({
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment