Commit 2865f799 authored by Peter Knoop's avatar Peter Knoop
Browse files

* some re-org to tackle double-drawing of layer initially

* replaced " with ' (according to Esri JavaScript style guide); except for JSON strings which must have "
parent 7ff47610
require([ require([
"esri/portal/Portal", 'esri/portal/Portal',
"esri/identity/OAuthInfo", 'esri/identity/OAuthInfo',
"esri/identity/IdentityManager", 'esri/identity/IdentityManager',
"esri/Map", 'esri/Map',
"esri/views/MapView", 'esri/views/MapView',
"esri/layers/FeatureLayer", 'esri/layers/FeatureLayer',
"esri/widgets/Slider", 'esri/widgets/Slider',
"esri/widgets/Legend", 'esri/widgets/Legend',
"esri/widgets/Home", 'esri/widgets/Home',
"esri/renderers/smartMapping/creators/relationship", 'esri/renderers/smartMapping/creators/relationship',
"dojo/dom-style", 'dojo/dom-style',
"dojo/dom-attr", 'dojo/dom-attr',
"dojo/on", 'dojo/on',
"dojo/dom" 'dojo/dom'
], function( ], function(
Portal, Portal,
OAuthInfo, OAuthInfo,
...@@ -30,7 +30,7 @@ require([ ...@@ -30,7 +30,7 @@ require([
dom dom
) { ) {
// Set Portal URL. // Set Portal URL.
const portalUrl = "https://umich.maps.arcgis.com/sharing" const portalUrl = 'https://umich.maps.arcgis.com/sharing'
// Set App ID for the ArcGIS Online item associated with this app. // Set App ID for the ArcGIS Online item associated with this app.
// If hosting the app locally, update the App Registration with the URI to its location, if needed. // If hosting the app locally, update the App Registration with the URI to its location, if needed.
// https://umich.maps.arcgis.com/home/item.html?id=b0f8c825ce4746e6ac89da2133905018 // https://umich.maps.arcgis.com/home/item.html?id=b0f8c825ce4746e6ac89da2133905018
...@@ -43,13 +43,13 @@ require([ ...@@ -43,13 +43,13 @@ require([
// Process login action. // Process login action.
// Listen for clicks on the sign-in link // Listen for clicks on the sign-in link
on(dom.byId("sign-in"), "click", function() { on(dom.byId('sign-in'), 'click', function() {
identityManager.getCredential(portalUrl); identityManager.getCredential(portalUrl);
}); });
// Process logout action. // Process logout action.
// Listen for clicks on the sign-out link // Listen for clicks on the sign-out link
on(dom.byId("sign-out"), "click", function() { on(dom.byId('sign-out'), 'click', function() {
identityManager.destroyCredentials(); identityManager.destroyCredentials();
// Reset page to initial state. // Reset page to initial state.
window.location.reload(); window.location.reload();
...@@ -70,47 +70,21 @@ require([ ...@@ -70,47 +70,21 @@ require([
// Once the portal has loaded successfully, then the user is signed in. // Once the portal has loaded successfully, then the user is signed in.
portal.load().then(function() { portal.load().then(function() {
console.log("start") console.log('start')
// Display username of logged in user. // Display username of logged in user.
dom.byId("username").innerHTML = portal.user.username; dom.byId('username').innerHTML = portal.user.username;
// 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,
//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]
});
// Create the map views and assign to their respective containers/divs // Create the map views and assign to their respective containers/divs
const mainView = new MapView({ const mainView = new MapView({
container: "mainViewDiv", container: 'mainViewDiv',
map: map, //map: map,
popup: { popup: {
highlightEnabled: false, highlightEnabled: false,
dockEnabled: true, dockEnabled: true,
dockOptions: { dockOptions: {
breakpoint: false, breakpoint: false,
position: "bottom-center" position: 'bottom-center'
} }
}, },
extent: { extent: {
...@@ -127,13 +101,45 @@ require([ ...@@ -127,13 +101,45 @@ require([
wkid: 5070 wkid: 5070
}, },
ui: { ui: {
components: ["attribution"] components: ['attribution']
} }
}); });
// 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,
//outFields: ['NAME', 'TotalPop', 'happening', 'happeningOppose'],
outFields: ['*'],
title: 'U.S. 115th Congressional Districts'
});
// Define initial set of parameters to display.
var parameter1 = 'FL';
var parameter2 = 'happening';
// Populate selection lists for parameters.
setParameterSelectionLists();
// Set relationship (or bivariate) renderer for data.
setRelationshipRenderer();
// Popup template for data.
var popupTemplate = '';
setPopupTemplate();
layer.popupTemplate = popupTemplate;
const map = new Map({
layers: [layer]
});
// Add map to mainView.
//mainView.map = map;
const akView = new MapView({ const akView = new MapView({
container: "akViewDiv", container: 'akViewDiv',
map: map, map: map,
extent: { extent: {
xmin: 396381, xmin: 396381,
...@@ -153,10 +159,10 @@ require([ ...@@ -153,10 +159,10 @@ require([
} }
}); });
mainView.ui.add("akViewDiv", "bottom-left"); mainView.ui.add('akViewDiv', 'bottom-left');
const hiView = new MapView({ const hiView = new MapView({
container: "hiViewDiv", container: 'hiViewDiv',
map: map, map: map,
extent: { extent: {
xmin: -342537, xmin: -342537,
...@@ -176,10 +182,7 @@ require([ ...@@ -176,10 +182,7 @@ require([
} }
}); });
mainView.ui.add("hiViewDiv", "bottom-left"); mainView.ui.add('hiViewDiv', 'bottom-left');
// Create relationship (or bivariate) renderer.
createRelationshipRenderer();
// Create legend for layer to place in mainView. // Create legend for layer to place in mainView.
const legend = new Legend({ const legend = new Legend({
...@@ -187,19 +190,19 @@ require([ ...@@ -187,19 +190,19 @@ require([
layerInfos: [ layerInfos: [
{ {
layer: layer, layer: layer,
title: "Alerts and Opinions" title: 'Alerts and Opinions'
} }
] ]
}); });
// Add widget to the bottom right corner of the view // Add legend to the mainView
mainView.ui.add(legend, "bottom-right"); mainView.ui.add(legend, 'bottom-right');
// Add Home button to mainView. // Add Home button to mainView.
const homeButton = new Home({ const homeButton = new Home({
view: mainView view: mainView
}); });
// Add the home button to the top left corner of the view // Add the home button to the top left corner of the view
mainView.ui.add(homeButton, "top-left"); mainView.ui.add(homeButton, 'top-left');
mainView mainView
.when(maintainFixedExtent) .when(maintainFixedExtent)
...@@ -207,7 +210,8 @@ require([ ...@@ -207,7 +210,8 @@ require([
.then(disablePopupOnClick) .then(disablePopupOnClick)
.then(enableHighlightOnPointerMove) .then(enableHighlightOnPointerMove)
.then(enableParameter1Selection) .then(enableParameter1Selection)
.then(enableParameter2Selection); .then(enableParameter2Selection)
.then(mainView.map = map);
akView akView
.when(disableNavigation) .when(disableNavigation)
.then(disablePopupOnClick) .then(disablePopupOnClick)
...@@ -217,11 +221,12 @@ require([ ...@@ -217,11 +221,12 @@ require([
.then(disablePopupOnClick) .then(disablePopupOnClick)
.then(enableHighlightOnPointerMove); .then(enableHighlightOnPointerMove);
function maintainFixedExtent(view) { function maintainFixedExtent(view) {
var fixedExtent = view.extent.clone(); var fixedExtent = view.extent.clone();
// keep a fixed extent in the view // keep a fixed extent in the view
// when the view size changes // when the view size changes
view.on("resize", function() { view.on('resize', function() {
view.extent = fixedExtent; view.extent = fixedExtent;
}); });
return view; return view;
...@@ -233,8 +238,8 @@ require([ ...@@ -233,8 +238,8 @@ require([
function enableHighlightOnPointerMove(view) { function enableHighlightOnPointerMove(view) {
view.whenLayerView(layer).then(function(layerView) { view.whenLayerView(layer).then(function(layerView) {
view.on("pointer-move", function(event) { view.on('pointer-move', function(event) {
// console.log("Highlight"); // console.log('Highlight');
view.hitTest(event).then(function(response) { view.hitTest(event).then(function(response) {
var lastHighlight = highlight; var lastHighlight = highlight;
...@@ -293,23 +298,23 @@ require([ ...@@ -293,23 +298,23 @@ require([
view.navigation.mouseWheelZoomEnabled = false; view.navigation.mouseWheelZoomEnabled = false;
// disable zooming via double-click on the view // disable zooming via double-click on the view
view.on("double-click", stopEvtPropagation); view.on('double-click', stopEvtPropagation);
// disable zooming out via double-click + Control on the view // disable zooming out via double-click + Control on the view
view.on("double-click", ["Control"], stopEvtPropagation); view.on('double-click', ['Control'], stopEvtPropagation);
// disables pinch-zoom and panning on the view // disables pinch-zoom and panning on the view
view.navigation.browserTouchPanEnabled = false; view.navigation.browserTouchPanEnabled = false;
view.on("drag", stopEvtPropagation); view.on('drag', stopEvtPropagation);
// disable the view's zoom box to prevent the Shift + drag // disable the view's zoom box to prevent the Shift + drag
// and Shift + Control + drag zoom gestures. // and Shift + Control + drag zoom gestures.
view.on("drag", ["Shift"], stopEvtPropagation); view.on('drag', ['Shift'], stopEvtPropagation);
view.on("drag", ["Shift", "Control"], stopEvtPropagation); view.on('drag', ['Shift', 'Control'], stopEvtPropagation);
// prevents zooming and rotation with the indicated keys // prevents zooming and rotation with the indicated keys
view.on("key-down", function(event) { view.on('key-down', function(event) {
var prohibitedKeys = ["+", "-", "_", "=", "a", "d"]; var prohibitedKeys = ['+', '-', '_', '=', 'a', 'd'];
var keyPressed = event.key.toLowerCase(); var keyPressed = event.key.toLowerCase();
if (prohibitedKeys.indexOf(keyPressed) !== -1) { if (prohibitedKeys.indexOf(keyPressed) !== -1) {
event.stopPropagation(); event.stopPropagation();
...@@ -321,7 +326,7 @@ require([ ...@@ -321,7 +326,7 @@ require([
// prevents the user from opening the popup with click // prevents the user from opening the popup with click
function disablePopupOnClick(view) { function disablePopupOnClick(view) {
view.on("click", function(event) { view.on('click', function(event) {
event.stopPropagation(); event.stopPropagation();
}); });
return view; return view;
...@@ -329,31 +334,31 @@ require([ ...@@ -329,31 +334,31 @@ require([
// Allows the user to pick the parameters to display. // Allows the user to pick the parameters to display.
function enableParameter1Selection(view) { function enableParameter1Selection(view) {
var selectNode = document.getElementById("parameter-1"); var selectNode = document.getElementById('parameter-1-select');
selectNode.addEventListener("change", function(event) { selectNode.addEventListener('change', function(event) {
console.log("Parameter 1 old selection:", parameter1 ); console.log('Parameter 1 old selection:', parameter1 );
parameter1 = event.target.value; parameter1 = event.target.value;
console.log("Parameter 1 new selection:", parameter1 ); console.log('Parameter 1 new selection:', parameter1 );
createRelationshipRenderer(); setRelationshipRenderer();
setPopupTemplate(); setPopupTemplate();
layer.popupTemplate = popupTemplate; layer.popupTemplate = popupTemplate;
}); });
} }
function enableParameter2Selection(view) { function enableParameter2Selection(view) {
var selectNode = document.getElementById("parameter-2"); var selectNode = document.getElementById('parameter-2-select');
selectNode.addEventListener("change", function(event) { selectNode.addEventListener('change', function(event) {
console.log("Parameter 2 old selection:", parameter2 ); console.log('Parameter 2 old selection:', parameter2 );
parameter2 = event.target.value; parameter2 = event.target.value;
console.log("Parameter 2 new selection:", parameter2 ); console.log('Parameter 2 new selection:', parameter2 );
createRelationshipRenderer(); setRelationshipRenderer();
setPopupTemplate(); setPopupTemplate();
layer.popupTemplate = popupTemplate; layer.popupTemplate = popupTemplate;
}); });
} }
// Create relationship (or bivariate) renderer. // Create relationship (or bivariate) renderer.
function createRelationshipRenderer() { function setRelationshipRenderer() {
const params = { const params = {
layer: layer, layer: layer,
view: mainView, view: mainView,
...@@ -364,11 +369,11 @@ require([ ...@@ -364,11 +369,11 @@ require([
field: parameter2 field: parameter2
}, },
// Set orientation of legend to a diamond. // Set orientation of legend to a diamond.
focus: "HH", focus: 'HH',
// Number of classes for grid 2 = 2x2 grid (value can also be 3 or 4) // Number of classes for grid (i.e., 2 = 2x2 grid; value can also be 3 or 4)
numClasses: 2 numClasses: 4
}; };
// Apply relationship renderer to the layer. // Apply renderer to layer.
relationshipRendererCreator.createRenderer(params).then(function(response) { relationshipRendererCreator.createRenderer(params).then(function(response) {
layer.renderer = response.renderer; layer.renderer = response.renderer;
}); });
...@@ -377,14 +382,14 @@ require([ ...@@ -377,14 +382,14 @@ require([
// Set the popup template // Set the popup template
function setPopupTemplate() { function setPopupTemplate() {
popupTemplate = { popupTemplate = {
title:"{CD_Code}", title:'{CD_Code}',
content: [ content: [
{ {
type:"fields", type:'fields',
fieldInfos: [ fieldInfos: [
{ {
fieldName: "TotalPop", fieldName: 'TotalPop',
label: "Total Population" label: 'Total Population'
}, },
{ {
fieldName: parameter1, fieldName: parameter1,
...@@ -399,24 +404,54 @@ require([ ...@@ -399,24 +404,54 @@ require([
] ]
} }
}; };
// Set the options for the parameter select lists.
function setParameterSelectionLists() {
var parameter1options = {
// 'HT' : 'Heat Advisory', // Not enough data...
'FL' : 'Flood Advisory',
//'HU' : 'Hurricane Warning', // Not enough data...
//'RP' : 'Rip Current', // Not enough data...
'SV' : 'Severe Thunderstorm'
//'WS' : 'Winter Storm' // Not enough data...
};
var select = document.getElementById('parameter-1-select');
select.options.length = 0
for(index in parameter1options) {
select.options[select.options.length] = new Option(parameter1options[index], index);
}
var parameter2options = {
'happening' : 'Believe global warming is happening',
'happeningOppose' : 'Do not believe global warming is happening'
};
var select = document.getElementById('parameter-2-select');
select.options.length = 0
for(index in parameter2options) {
select.options[select.options.length] = new Option(parameter2options[index], index);
}
console.log('Parameter selection lists set.')
}
// // add slider widget // // add slider widget
// // Joe is adding a comment for some reason... // // Joe is adding a comment for some reason...
// const slider = new Slider({ // const slider = new Slider({
// container: document.getElementById("sliderDiv"), // container: document.getElementById('sliderDiv'),
// min: 0, // min: 0,
// max: 100, // max: 100,
// values: [ 50 ], // values: [ 50 ],
// rangeLabelsVisible: true, // rangeLabelsVisible: true,
// precision: 0, // precision: 0,
// layout: "vertical" // layout: 'vertical'
// }); // });
// //
// mainView.ui.add(slider, { // mainView.ui.add(slider, {
// position: "top-right", // position: 'top-right',
// }); // });
console.log("complete") console.log('complete')
......
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